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.
openRequestasks the owner to setopened; its semanticactionasks 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';insrc/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.