Filter Dropdown Calendar Range

Level: molecule.

Purpose and use

Edit a period filter while preserving the applied range until confirmation. Use the single-date wrapper when the user should choose exactly one date.

Anatomy, behavior, and accessibility

• Filter Chip opens a named dialog with a two-month Calendar, optional description, Clear and Apply. Applied endpoints format as DD.MM.YYYY - DD.MM.YYYY.
• Opening copies the applied endpoints into a draft. A changed complete draft enables Apply; a half-range does not. Clear sets both draft endpoints to null and can be applied only to clear an existing complete range.
• Apply emits {start,end} and closes. Backdrop/detach or Escape in the dialog closes without committing. 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. The parent owns applied state and removal.
• Focus moves to the first Calendar input/control on attach. Disabled blocks trigger opening and footer actions. Supply a descriptive period label; both endpoint values use YYYY-MM-DD and Calendar enforces its current date policy.

Open Questions

There is no explicit focus trap or focus restoration. An externally supplied partial applied range is not a filled chip and cannot be cleared through the same complete-range Apply path; consumers should supply complete/null pairs.

Local component contract

This is the active owned contract for component.filter-dropdown-calendar-range. 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

• WblFilterDropdownCalendarRangeComponent — wbl-filter-dropdown-calendar-range (src/app/design-system/patterns/filter-row/filter-dropdown-calendar-range.component.ts).

Inputs

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

Public types and allowed values

interface WblCalendarRange {
  start: string | null;
  end: string | null;
}

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

Models

• None.

Outputs

• WblFilterDropdownCalendarRangeComponent.rangeChange = output<WblCalendarRange>()
• WblFilterDropdownCalendarRangeComponent.openRequest = output<boolean>()
• WblFilterDropdownCalendarRangeComponent.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-range.component.ts.
• Focused test: src/app/design-system/patterns/filter-row/filter-dropdown-calendar-range.component.spec.ts.
• Public export: export * from './patterns/filter-row/filter-dropdown-calendar-range.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.