# Filter Dropdown Calendar

Level: molecule.

## Purpose and use

Edit a single date filter with explicit Apply/Clear. Use Calendar directly for
immediate selection or the range wrapper for two endpoints.

## Anatomy, behavior, and accessibility

- Filter Chip opens a named dialog overlay containing Calendar without presets,
  optional description, Clear and Apply. The chip displays the applied date.
- Opening resets the draft to `value`. Calendar changes update only the draft;
  Apply emits valueChange and closes. Clear edits the draft to null and also
  requires Apply before the applied date changes.
- Apply requires a changed date or clearing an existing value. Disabled prevents
  trigger opening and footer actions. Lifecycle, open state, and validation are
  controlled by the owning screen through the nested Filter Chip. `openRequest`
  asks the owner to set `opened`; its semantic `action` asks the owner to clear,
  reset, or remove the filter and closes the overlay without mutating the
  parent's value itself.
- On attach focus moves to the first input/control. Escape in the dialog,
  backdrop click and detach close without applying. Date strings use YYYY-MM-DD;
  the chip formats them as DD.MM.YYYY. Label the filter by its business meaning.

## Open Questions

The overlay has no explicit focus trap or return-to-trigger implementation.
Calendar owns date validation; this wrapper does not validate external strings.

## Local component contract

This is the active owned contract for `component.filter-dropdown-calendar`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblFilterDropdownCalendarComponent` — `wbl-filter-dropdown-calendar` (src/app/design-system/patterns/filter-row/filter-dropdown-calendar.component.ts).

### Inputs

- `WblFilterDropdownCalendarComponent.label = input('Период')`
- `WblFilterDropdownCalendarComponent.value = input<string | null>(null)`
- `WblFilterDropdownCalendarComponent.referenceDate = input(DEFAULT_TODAY)`
- `WblFilterDropdownCalendarComponent.today = input(DEFAULT_TODAY)`
- `WblFilterDropdownCalendarComponent.lifecycle = input<WblFilterLifecycle>('pinned')`
- `WblFilterDropdownCalendarComponent.opened = input(false)`
- `WblFilterDropdownCalendarComponent.invalid = input(false)`
- `WblFilterDropdownCalendarComponent.errorText = input('')`
- `WblFilterDropdownCalendarComponent.disabled = input(false)`
- `WblFilterDropdownCalendarComponent.description = input<string | null>(null)`
- `WblFilterDropdownCalendarComponent.clearLabel = input('Очистить')`
- `WblFilterDropdownCalendarComponent.applyLabel = input('Применить')`

### Models

- None.

### Shared types

`WblFilterLifecycle` and `WblFilterAction` are shared with Filter Chip:
`'required' | 'pinned' | 'optional'` and `'clear' | 'reset' | 'remove'`.

### Outputs

- `WblFilterDropdownCalendarComponent.valueChange = output<string | null>()`
- `WblFilterDropdownCalendarComponent.openRequest = output<boolean>()`
- `WblFilterDropdownCalendarComponent.action = output<WblFilterAction>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Code: `src/app/design-system/patterns/filter-row/filter-dropdown-calendar.component.ts`.
- Focused test: `src/app/design-system/patterns/filter-row/filter-dropdown-calendar.component.spec.ts`.
- Public export: `export * from './patterns/filter-row/filter-dropdown-calendar.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/filter-row.stories.ts` (`Design System/Patterns/wbl-filter-row`). This is the shared active Storybook story for this family.

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.