@lifecorner/angular-ui-kit 3.30.1 → 3.31.0

package/fesm2022/lifecorner-angular-ui-kit-date-range-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-date-range-picker.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/date-range-picker/date-range-picker.component.ts","../../../../libs/angular-ui-kit/src/lib/date-range-picker/date-range-picker.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  afterRenderEffect,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CALENDAR } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface DateRange {\n  start: Date | null;\n  end: Date | null;\n}\n\n/** Monday..Sunday of a known week — only used to derive localised weekday names */\nconst REFERENCE_WEEK = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, 1 + i));\n\n@Component({\n  selector: 'lc-date-range-picker',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_CALENDAR])],\n  templateUrl: './date-range-picker.component.html',\n  styleUrls: ['./date-range-picker.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DateRangePickerComponent),\n      multi: true,\n    },\n  ],\n})\nexport class DateRangePickerComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Per-instance ids for label ↔ trigger ↔ panel ARIA wiring */\n  readonly triggerId = `lc-drp-${++DateRangePickerComponent.nextId}`;\n  readonly labelId = `${this.triggerId}-label`;\n  readonly valueId = `${this.triggerId}-value`;\n  readonly panelId = `${this.triggerId}-panel`;\n\n  private readonly elRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly triggerEl = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');\n  private readonly panelEl = viewChild<ElementRef<HTMLElement>>('panelEl');\n\n  readonly label = input('');\n  readonly placeholder = input('Select date range');\n  readonly disabled = input(false);\n  readonly minDate = input<Date | null>(null);\n  readonly maxDate = input<Date | null>(null);\n  /** BCP 47 locale for the displayed dates, month title and weekday headers */\n  readonly locale = input('de-DE');\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear');\n\n  /** Accessible name of the previous-month button. */\n  readonly previousMonthAriaLabel = input('Previous month');\n\n  /** Accessible name of the next-month button. */\n  readonly nextMonthAriaLabel = input('Next month');\n\n  readonly rangeChange = output<DateRange>();\n\n  protected isOpen = signal(false);\n  protected range = signal<DateRange>({ start: null, end: null });\n  protected selecting = signal<'start' | 'end'>('start');\n  protected hoveredDate = signal<Date | null>(null);\n  protected viewingMonth = signal(new Date());\n\n  /** Disabled via `setDisabledState` (reactive forms) */\n  private readonly formDisabled = signal(false);\n\n  /** Effective disabled state: `disabled` input OR form control disabled */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private onChange: (val: DateRange) => void = () => { /* set by registerOnChange */ };\n  private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n  protected readonly displayValue = computed(() => {\n    const r = this.range();\n    if (!r.start) return '';\n    const locale = this.locale();\n    const fmt = (d: Date) => d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' });\n    if (!r.end) return fmt(r.start) + ' – …';\n    return `${fmt(r.start)} – ${fmt(r.end)}`;\n  });\n\n  protected readonly monthLabel = computed(() => {\n    const d = this.viewingMonth();\n    return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });\n  });\n\n  /** Monday-first weekday headers in the configured locale (e.g. Mo…So / Mon…Sun) */\n  protected readonly weekdays = computed(() => {\n    const locale = this.locale();\n    // some ICU builds abbreviate with a trailing period (\"Mo.\") — keep the compact form\n    return REFERENCE_WEEK.map((d) => d.toLocaleDateString(locale, { weekday: 'short' }).replace(/\\.$/, ''));\n  });\n\n  protected readonly calendarDays = computed(() => {\n    const viewing = this.viewingMonth();\n    const locale = this.locale();\n    const year = viewing.getFullYear();\n    const month = viewing.getMonth();\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n\n    let startDow = firstDay.getDay();\n    if (startDow === 0) startDow = 7; // Monday = 1\n    const prefixDays = startDow - 1;\n\n    const days: { date: Date; inMonth: boolean; disabled: boolean; ariaLabel: string }[] = [];\n    const push = (date: Date, inMonth: boolean) =>\n      days.push({\n        date,\n        inMonth,\n        disabled: this.isDateDisabled(date),\n        ariaLabel: date.toLocaleDateString(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),\n      });\n\n    for (let i = prefixDays; i > 0; i--) {\n      push(new Date(year, month, 1 - i), false);\n    }\n\n    for (let d = 1; d <= lastDay.getDate(); d++) {\n      push(new Date(year, month, d), true);\n    }\n\n    const remaining = 42 - days.length;\n    for (let i = 1; i <= remaining; i++) {\n      push(new Date(year, month + 1, i), false);\n    }\n\n    return days;\n  });\n\n  constructor() {\n    // Move focus into the panel once it is rendered so keyboard users land on\n    // the calendar instead of having to tab through the trigger's siblings.\n    afterRenderEffect(() => {\n      if (!this.isOpen()) return;\n      untracked(() => {\n        const panel = this.panelEl()?.nativeElement;\n        if (!panel || panel.contains(document.activeElement)) return;\n        const target =\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day--start:not(:disabled)') ??\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day--today:not(:disabled)') ??\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day:not(.lc-drp__day--outside):not(:disabled)');\n        target?.focus();\n      });\n    });\n  }\n\n  writeValue(value: DateRange | null): void {\n    this.range.set(value ?? { start: null, end: null });\n    if (value?.start) {\n      this.viewingMonth.set(new Date(value.start.getFullYear(), value.start.getMonth(), 1));\n    }\n  }\n\n  registerOnChange(fn: (val: DateRange) => void): void { this.onChange = fn; }\n  registerOnTouched(fn: () => void): void { this.onTouched = fn; }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n    if (isDisabled) this.isOpen.set(false);\n  }\n\n  protected toggle(): void {\n    if (this.isDisabled()) return;\n    if (this.isOpen()) {\n      this.close();\n      return;\n    }\n    this.selecting.set('start');\n    this.hoveredDate.set(null);\n    this.isOpen.set(true);\n  }\n\n  protected close(): void {\n    if (!this.isOpen()) return;\n    this.isOpen.set(false);\n    this.onTouched();\n    // Return focus to the trigger when it was inside the (now removed) panel\n    if (this.elRef.nativeElement.contains(document.activeElement)) {\n      this.triggerEl()?.nativeElement.focus();\n    }\n  }\n\n  /** Escape (from the trigger or anywhere in the panel) closes the picker */\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.isOpen()) {\n      this.close();\n      // consumed here — an enclosing modal/drawer must not close as well\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('document:click', ['$event'])\n  protected onDocumentClick(event: MouseEvent): void {\n    if (this.isOpen() && !this.elRef.nativeElement.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  protected prevMonth(): void {\n    this.viewingMonth.update(d => new Date(d.getFullYear(), d.getMonth() - 1, 1));\n  }\n\n  protected nextMonth(): void {\n    this.viewingMonth.update(d => new Date(d.getFullYear(), d.getMonth() + 1, 1));\n  }\n\n  protected selectDate(date: Date): void {\n    if (this.isDateDisabled(date)) return;\n\n    const current = this.range();\n    if (this.selecting() === 'start') {\n      this.range.set({ start: date, end: null });\n      this.selecting.set('end');\n    } else {\n      if (date < current.start!) {\n        this.range.set({ start: date, end: current.start });\n      } else {\n        this.range.set({ start: current.start, end: date });\n      }\n      this.selecting.set('start');\n      this.emitRange();\n      this.close();\n    }\n  }\n\n  protected onDayHover(date: Date): void {\n    if (this.selecting() === 'end') {\n      this.hoveredDate.set(date);\n    }\n  }\n\n  protected isStart(date: Date): boolean {\n    return this.sameDay(date, this.range().start);\n  }\n\n  protected isEnd(date: Date): boolean {\n    return this.sameDay(date, this.range().end);\n  }\n\n  protected isInRange(date: Date): boolean {\n    const r = this.range();\n    if (!r.start) return false;\n    const end = r.end || this.hoveredDate();\n    if (!end) return false;\n    const s = Math.min(r.start.getTime(), end.getTime());\n    const e = Math.max(r.start.getTime(), end.getTime());\n    const t = date.getTime();\n    return t > s && t < e;\n  }\n\n  protected isToday(date: Date): boolean {\n    return this.sameDay(date, new Date());\n  }\n\n  protected clearRange(event: Event): void {\n    event.stopPropagation();\n    if (this.isDisabled()) return;\n    this.range.set({ start: null, end: null });\n    const r = { start: null, end: null };\n    this.onChange(r);\n    this.rangeChange.emit(r);\n  }\n\n  /** min/max are compared by calendar day — `minDate = new Date()` keeps today selectable */\n  private isDateDisabled(date: Date): boolean {\n    const min = this.minDate();\n    const max = this.maxDate();\n    const day = this.dayStamp(date);\n    if (min && day < this.dayStamp(min)) return true;\n    if (max && day > this.dayStamp(max)) return true;\n    return false;\n  }\n\n  private dayStamp(d: Date): number {\n    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n  }\n\n  private sameDay(a: Date | null, b: Date | null): boolean {\n    if (!a || !b) return false;\n    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n  }\n\n  private emitRange(): void {\n    const r = this.range();\n    this.onChange(r);\n    this.rangeChange.emit(r);\n  }\n}\n","@if (label()) {\n  <label class=\"lc-drp__label\" [id]=\"labelId\" [for]=\"triggerId\">{{ label() }}</label>\n}\n\n<!-- The clear button must not be nested inside the trigger button, so the\n     bordered \"field\" wraps both. -->\n<div class=\"lc-drp__field\" [class.lc-drp__field--disabled]=\"isDisabled()\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"lc-drp__trigger\"\n    [id]=\"triggerId\"\n    [class.lc-drp__trigger--disabled]=\"isDisabled()\"\n    [disabled]=\"isDisabled()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? panelId : null\"\n    [attr.aria-labelledby]=\"label() ? labelId + ' ' + valueId : null\"\n    (click)=\"toggle()\"\n  >\n    <lc-icon class=\"lc-drp__icon\" name=\"calendar\" size=\"sm\" [decorative]=\"true\" />\n    <span class=\"lc-drp__value\" [id]=\"valueId\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n      {{ displayValue() || placeholder() }}\n    </span>\n  </button>\n  @if (displayValue() && !isDisabled()) {\n    <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" [attr.aria-label]=\"clearAriaLabel()\">×</button>\n  }\n</div>\n\n@if (isOpen()) {\n  <div\n    #panelEl\n    class=\"lc-drp__dropdown\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"label() || placeholder()\"\n  >\n    <div class=\"lc-drp__header\">\n      <button type=\"button\" class=\"lc-drp__nav\" [attr.aria-label]=\"previousMonthAriaLabel()\" (click)=\"prevMonth()\">‹</button>\n      <span class=\"lc-drp__month\" aria-live=\"polite\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"lc-drp__nav\" [attr.aria-label]=\"nextMonthAriaLabel()\" (click)=\"nextMonth()\">›</button>\n    </div>\n\n    <div class=\"lc-drp__weekdays\" aria-hidden=\"true\">\n      @for (wd of weekdays(); track $index) {\n        <span class=\"lc-drp__weekday\">{{ wd }}</span>\n      }\n    </div>\n\n    <div class=\"lc-drp__grid\">\n      @for (day of calendarDays(); track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"lc-drp__day\"\n          [class.lc-drp__day--outside]=\"!day.inMonth\"\n          [class.lc-drp__day--disabled]=\"day.disabled\"\n          [class.lc-drp__day--today]=\"isToday(day.date)\"\n          [class.lc-drp__day--start]=\"isStart(day.date)\"\n          [class.lc-drp__day--end]=\"isEnd(day.date)\"\n          [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n          [disabled]=\"day.disabled\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-pressed]=\"isStart(day.date) || isEnd(day.date)\"\n          (click)=\"selectDate(day.date)\"\n          (mouseenter)=\"onDayHover(day.date)\"\n        >{{ day.date.getDate() }}</button>\n      }\n    </div>\n\n    <div class=\"lc-drp__footer\">\n      <span class=\"lc-drp__hint\" aria-live=\"polite\">\n        @if (selecting() === 'start') { Select start date }\n        @else { Select end date }\n      </span>\n    </div>\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-date-range-picker.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/date-range-picker/date-range-picker.component.ts","../../../../libs/angular-ui-kit/src/lib/date-range-picker/date-range-picker.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  afterRenderEffect,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CALENDAR } from '@lifecorner/angular-ui-kit/icons';\nimport { closestLang } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport interface DateRange {\n  start: Date | null;\n  end: Date | null;\n}\n\n/** Monday..Sunday of a known week — only used to derive localised weekday names */\nconst REFERENCE_WEEK = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, 1 + i));\n\n@Component({\n  selector: 'lc-date-range-picker',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_CALENDAR])],\n  templateUrl: './date-range-picker.component.html',\n  styleUrls: ['./date-range-picker.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DateRangePickerComponent),\n      multi: true,\n    },\n  ],\n})\nexport class DateRangePickerComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Per-instance ids for label ↔ trigger ↔ panel ARIA wiring */\n  readonly triggerId = `lc-drp-${++DateRangePickerComponent.nextId}`;\n  readonly labelId = `${this.triggerId}-label`;\n  readonly valueId = `${this.triggerId}-value`;\n  readonly panelId = `${this.triggerId}-panel`;\n\n  private readonly elRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly triggerEl = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');\n  private readonly panelEl = viewChild<ElementRef<HTMLElement>>('panelEl');\n\n  readonly label = input('');\n  readonly placeholder = input('Select date range');\n  readonly disabled = input(false);\n  readonly minDate = input<Date | null>(null);\n  readonly maxDate = input<Date | null>(null);\n  /**\n   * BCP 47 locale for the displayed dates, month title and weekday headers.\n   * Also the open panel's `lang` when the host has no `[lang]` ancestor (3.30.2).\n   * @default 'de-DE'\n   */\n  readonly locale = input('de-DE');\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear');\n\n  /** Accessible name of the previous-month button. */\n  readonly previousMonthAriaLabel = input('Previous month');\n\n  /** Accessible name of the next-month button. */\n  readonly nextMonthAriaLabel = input('Next month');\n\n  readonly rangeChange = output<DateRange>();\n\n  protected isOpen = signal(false);\n  protected range = signal<DateRange>({ start: null, end: null });\n  protected selecting = signal<'start' | 'end'>('start');\n  protected hoveredDate = signal<Date | null>(null);\n  protected viewingMonth = signal(new Date());\n\n  /** Disabled via `setDisabledState` (reactive forms) */\n  private readonly formDisabled = signal(false);\n\n  /** Effective disabled state: `disabled` input OR form control disabled */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  /**\n   * `lang` of the open panel (3.30.2, WCAG 3.1.2). The panel sits in the host\n   * and inherits a `[lang]` ancestor through the DOM, so it gets one only\n   * without any: then `locale`. `null` while closed.\n   */\n  protected readonly panelLang = computed(() =>\n    this.isOpen() && closestLang(this.elRef.nativeElement) === null ? this.locale() || null : null\n  );\n\n  private onChange: (val: DateRange) => void = () => { /* set by registerOnChange */ };\n  private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n  protected readonly displayValue = computed(() => {\n    const r = this.range();\n    if (!r.start) return '';\n    const locale = this.locale();\n    const fmt = (d: Date) => d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' });\n    if (!r.end) return fmt(r.start) + ' – …';\n    return `${fmt(r.start)} – ${fmt(r.end)}`;\n  });\n\n  protected readonly monthLabel = computed(() => {\n    const d = this.viewingMonth();\n    return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });\n  });\n\n  /** Monday-first weekday headers in the configured locale (e.g. Mo…So / Mon…Sun) */\n  protected readonly weekdays = computed(() => {\n    const locale = this.locale();\n    // some ICU builds abbreviate with a trailing period (\"Mo.\") — keep the compact form\n    return REFERENCE_WEEK.map((d) => d.toLocaleDateString(locale, { weekday: 'short' }).replace(/\\.$/, ''));\n  });\n\n  protected readonly calendarDays = computed(() => {\n    const viewing = this.viewingMonth();\n    const locale = this.locale();\n    const year = viewing.getFullYear();\n    const month = viewing.getMonth();\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n\n    let startDow = firstDay.getDay();\n    if (startDow === 0) startDow = 7; // Monday = 1\n    const prefixDays = startDow - 1;\n\n    const days: { date: Date; inMonth: boolean; disabled: boolean; ariaLabel: string }[] = [];\n    const push = (date: Date, inMonth: boolean) =>\n      days.push({\n        date,\n        inMonth,\n        disabled: this.isDateDisabled(date),\n        ariaLabel: date.toLocaleDateString(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),\n      });\n\n    for (let i = prefixDays; i > 0; i--) {\n      push(new Date(year, month, 1 - i), false);\n    }\n\n    for (let d = 1; d <= lastDay.getDate(); d++) {\n      push(new Date(year, month, d), true);\n    }\n\n    const remaining = 42 - days.length;\n    for (let i = 1; i <= remaining; i++) {\n      push(new Date(year, month + 1, i), false);\n    }\n\n    return days;\n  });\n\n  constructor() {\n    // Move focus into the panel once it is rendered so keyboard users land on\n    // the calendar instead of having to tab through the trigger's siblings.\n    afterRenderEffect(() => {\n      if (!this.isOpen()) return;\n      untracked(() => {\n        const panel = this.panelEl()?.nativeElement;\n        if (!panel || panel.contains(document.activeElement)) return;\n        const target =\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day--start:not(:disabled)') ??\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day--today:not(:disabled)') ??\n          panel.querySelector<HTMLButtonElement>('.lc-drp__day:not(.lc-drp__day--outside):not(:disabled)');\n        target?.focus();\n      });\n    });\n  }\n\n  writeValue(value: DateRange | null): void {\n    this.range.set(value ?? { start: null, end: null });\n    if (value?.start) {\n      this.viewingMonth.set(new Date(value.start.getFullYear(), value.start.getMonth(), 1));\n    }\n  }\n\n  registerOnChange(fn: (val: DateRange) => void): void { this.onChange = fn; }\n  registerOnTouched(fn: () => void): void { this.onTouched = fn; }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n    if (isDisabled) this.isOpen.set(false);\n  }\n\n  protected toggle(): void {\n    if (this.isDisabled()) return;\n    if (this.isOpen()) {\n      this.close();\n      return;\n    }\n    this.selecting.set('start');\n    this.hoveredDate.set(null);\n    this.isOpen.set(true);\n  }\n\n  protected close(): void {\n    if (!this.isOpen()) return;\n    this.isOpen.set(false);\n    this.onTouched();\n    // Return focus to the trigger when it was inside the (now removed) panel\n    if (this.elRef.nativeElement.contains(document.activeElement)) {\n      this.triggerEl()?.nativeElement.focus();\n    }\n  }\n\n  /** Escape (from the trigger or anywhere in the panel) closes the picker */\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.isOpen()) {\n      this.close();\n      // consumed here — an enclosing modal/drawer must not close as well\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('document:click', ['$event'])\n  protected onDocumentClick(event: MouseEvent): void {\n    if (this.isOpen() && !this.elRef.nativeElement.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  protected prevMonth(): void {\n    this.viewingMonth.update(d => new Date(d.getFullYear(), d.getMonth() - 1, 1));\n  }\n\n  protected nextMonth(): void {\n    this.viewingMonth.update(d => new Date(d.getFullYear(), d.getMonth() + 1, 1));\n  }\n\n  protected selectDate(date: Date): void {\n    if (this.isDateDisabled(date)) return;\n\n    const current = this.range();\n    if (this.selecting() === 'start') {\n      this.range.set({ start: date, end: null });\n      this.selecting.set('end');\n    } else {\n      if (date < current.start!) {\n        this.range.set({ start: date, end: current.start });\n      } else {\n        this.range.set({ start: current.start, end: date });\n      }\n      this.selecting.set('start');\n      this.emitRange();\n      this.close();\n    }\n  }\n\n  protected onDayHover(date: Date): void {\n    if (this.selecting() === 'end') {\n      this.hoveredDate.set(date);\n    }\n  }\n\n  protected isStart(date: Date): boolean {\n    return this.sameDay(date, this.range().start);\n  }\n\n  protected isEnd(date: Date): boolean {\n    return this.sameDay(date, this.range().end);\n  }\n\n  protected isInRange(date: Date): boolean {\n    const r = this.range();\n    if (!r.start) return false;\n    const end = r.end || this.hoveredDate();\n    if (!end) return false;\n    const s = Math.min(r.start.getTime(), end.getTime());\n    const e = Math.max(r.start.getTime(), end.getTime());\n    const t = date.getTime();\n    return t > s && t < e;\n  }\n\n  protected isToday(date: Date): boolean {\n    return this.sameDay(date, new Date());\n  }\n\n  protected clearRange(event: Event): void {\n    event.stopPropagation();\n    if (this.isDisabled()) return;\n    this.range.set({ start: null, end: null });\n    const r = { start: null, end: null };\n    this.onChange(r);\n    this.rangeChange.emit(r);\n  }\n\n  /** min/max are compared by calendar day — `minDate = new Date()` keeps today selectable */\n  private isDateDisabled(date: Date): boolean {\n    const min = this.minDate();\n    const max = this.maxDate();\n    const day = this.dayStamp(date);\n    if (min && day < this.dayStamp(min)) return true;\n    if (max && day > this.dayStamp(max)) return true;\n    return false;\n  }\n\n  private dayStamp(d: Date): number {\n    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n  }\n\n  private sameDay(a: Date | null, b: Date | null): boolean {\n    if (!a || !b) return false;\n    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n  }\n\n  private emitRange(): void {\n    const r = this.range();\n    this.onChange(r);\n    this.rangeChange.emit(r);\n  }\n}\n","@if (label()) {\n  <label class=\"lc-drp__label\" [id]=\"labelId\" [for]=\"triggerId\">{{ label() }}</label>\n}\n\n<!-- The clear button must not be nested inside the trigger button, so the\n     bordered \"field\" wraps both. -->\n<div class=\"lc-drp__field\" [class.lc-drp__field--disabled]=\"isDisabled()\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"lc-drp__trigger\"\n    [id]=\"triggerId\"\n    [class.lc-drp__trigger--disabled]=\"isDisabled()\"\n    [disabled]=\"isDisabled()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? panelId : null\"\n    [attr.aria-labelledby]=\"label() ? labelId + ' ' + valueId : null\"\n    (click)=\"toggle()\"\n  >\n    <lc-icon class=\"lc-drp__icon\" name=\"calendar\" size=\"sm\" [decorative]=\"true\" />\n    <span class=\"lc-drp__value\" [id]=\"valueId\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n      {{ displayValue() || placeholder() }}\n    </span>\n  </button>\n  @if (displayValue() && !isDisabled()) {\n    <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" [attr.aria-label]=\"clearAriaLabel()\">×</button>\n  }\n</div>\n\n@if (isOpen()) {\n  <div\n    #panelEl\n    class=\"lc-drp__dropdown\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"label() || placeholder()\"\n    [attr.lang]=\"panelLang()\"\n  >\n    <div class=\"lc-drp__header\">\n      <button type=\"button\" class=\"lc-drp__nav\" [attr.aria-label]=\"previousMonthAriaLabel()\" (click)=\"prevMonth()\">‹</button>\n      <span class=\"lc-drp__month\" aria-live=\"polite\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"lc-drp__nav\" [attr.aria-label]=\"nextMonthAriaLabel()\" (click)=\"nextMonth()\">›</button>\n    </div>\n\n    <div class=\"lc-drp__weekdays\" aria-hidden=\"true\">\n      @for (wd of weekdays(); track $index) {\n        <span class=\"lc-drp__weekday\">{{ wd }}</span>\n      }\n    </div>\n\n    <div class=\"lc-drp__grid\">\n      @for (day of calendarDays(); track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"lc-drp__day\"\n          [class.lc-drp__day--outside]=\"!day.inMonth\"\n          [class.lc-drp__day--disabled]=\"day.disabled\"\n          [class.lc-drp__day--today]=\"isToday(day.date)\"\n          [class.lc-drp__day--start]=\"isStart(day.date)\"\n          [class.lc-drp__day--end]=\"isEnd(day.date)\"\n          [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n          [disabled]=\"day.disabled\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-pressed]=\"isStart(day.date) || isEnd(day.date)\"\n          (click)=\"selectDate(day.date)\"\n          (mouseenter)=\"onDayHover(day.date)\"\n        >{{ day.date.getDate() }}</button>\n      }\n    </div>\n\n    <div class=\"lc-drp__footer\">\n      <span class=\"lc-drp__hint\" aria-live=\"polite\">\n        @if (selecting() === 'start') { Select start date }\n        @else { Select end date }\n      </span>\n    </div>\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DOCUMENT, Injector, afterNextRender, computed, forwardRef, inject, input, linkedSignal, output, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, ElementRef, Injector, afterNextRender, computed, forwardRef, inject, input, linkedSignal, output, signal, viewChild } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import * as i1 from "@angular/cdk/overlay";
 import { OverlayModule } from "@angular/cdk/overlay";
+import { closestLang } from "@lifecorner/angular-ui-kit/internal/a11y";
 var DatepickerComponent = class DatepickerComponent {
 	static nextId = 0;
 	inputId = `lc-datepicker-${++DatepickerComponent.nextId}`;
@@ -47,6 +48,7 @@ var DatepickerComponent = class DatepickerComponent {
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	isMonthMode = computed(() => this.granularity() === "month", ...ngDevMode ? [{ debugName: "isMonthMode" }] : /* istanbul ignore next */ []);
+	panelLang = computed(() => this.isOpen() ? closestLang(this.host.nativeElement) ?? (this.locale() || null) : null, ...ngDevMode ? [{ debugName: "panelLang" }] : /* istanbul ignore next */ []);
 	formattedDate = computed(() => {
 		const date = this.selectedDate();
 		if (!date) return "";
@@ -137,6 +139,7 @@ var DatepickerComponent = class DatepickerComponent {
 	}, ...ngDevMode ? [{ debugName: "datepickerClasses" }] : /* istanbul ignore next */ []);
 	document = inject(DOCUMENT);
 	injector = inject(Injector);
+	host = inject(ElementRef);
 	onChange = () => {};
 	onTouched = () => {};
 	toggle() {
@@ -750,7 +753,7 @@ var DatepickerComponent = class DatepickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"lc-datepicker-wrapper\">\n  @if (label()) {\n    <label class=\"lc-datepicker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"onClearClick($event)\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayViewportMargin]=\"8\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+		template: "<div class=\"lc-datepicker-wrapper\">\n  @if (label()) {\n    <label class=\"lc-datepicker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"onClearClick($event)\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayViewportMargin]=\"8\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n      [attr.lang]=\"panelLang()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
 		styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker__label{display:block;margin-bottom:.125rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);color:var(--color-text-primary);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;background:none;background-clip:content-box;border:none;border-radius:calc(var(--border-radius-sm) + .125rem);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker--md~.lc-datepicker-icons .lc-datepicker-clear:before,.lc-datepicker--lg~.lc-datepicker-icons .lc-datepicker-clear:before{content:\"\";position:absolute;inset:-.625rem -.125rem -.625rem -1.125rem}.lc-datepicker-calendar{position:relative;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:1023.98px){.lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-weekdays,.lc-datepicker-days{gap:0;grid-template-columns:repeat(7,minmax(0,1fr));inline-size:19.25rem;max-inline-size:calc(100vw - 3.125rem)}.lc-datepicker-day{width:100%;height:auto;aspect-ratio:1}}.lc-datepicker-calendar--month .lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-calendar--month .lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-months{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:17.25rem;max-inline-size:calc(100vw - 4.125rem)}.lc-datepicker-month-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-2)}.lc-datepicker-month{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 var(--spacing-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);text-align:center;overflow-wrap:anywhere;hyphens:auto;color:var(--color-text-primary);border-radius:var(--border-radius-md);cursor:pointer}.lc-datepicker-month:hover:not(.lc-datepicker-month--disabled):not(.lc-datepicker-month--selected){background-color:var(--color-surface-hover)}.lc-datepicker-month.lc-datepicker-month--current{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-month.lc-datepicker-month--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-month.lc-datepicker-month--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-month:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-datepicker-month:focus-visible{outline-color:Highlight}.lc-datepicker-month.lc-datepicker-month--selected{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-month.lc-datepicker-month--current{text-decoration:underline}.lc-datepicker-month.lc-datepicker-month--disabled{color:GrayText}.lc-datepicker-clear:focus-visible,.lc-datepicker-day:focus-visible{outline-color:Highlight}.lc-datepicker-day.lc-datepicker-day--selected,.lc-datepicker-day.lc-datepicker-day--selected:hover{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-day.lc-datepicker-day--today{text-decoration:underline}.lc-datepicker-day.lc-datepicker-day--disabled{color:GrayText}}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"],
 		dependencies: [{
 			kind: "ngmodule",
@@ -816,7 +819,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => DatepickerComponent),
 				multi: true
 			}],
-			template: "<div class=\"lc-datepicker-wrapper\">\n  @if (label()) {\n    <label class=\"lc-datepicker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"onClearClick($event)\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayViewportMargin]=\"8\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+			template: "<div class=\"lc-datepicker-wrapper\">\n  @if (label()) {\n    <label class=\"lc-datepicker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"onClearClick($event)\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayViewportMargin]=\"8\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n      [attr.lang]=\"panelLang()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
 			styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker__label{display:block;margin-bottom:.125rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);color:var(--color-text-primary);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;background:none;background-clip:content-box;border:none;border-radius:calc(var(--border-radius-sm) + .125rem);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker--md~.lc-datepicker-icons .lc-datepicker-clear:before,.lc-datepicker--lg~.lc-datepicker-icons .lc-datepicker-clear:before{content:\"\";position:absolute;inset:-.625rem -.125rem -.625rem -1.125rem}.lc-datepicker-calendar{position:relative;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:1023.98px){.lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-weekdays,.lc-datepicker-days{gap:0;grid-template-columns:repeat(7,minmax(0,1fr));inline-size:19.25rem;max-inline-size:calc(100vw - 3.125rem)}.lc-datepicker-day{width:100%;height:auto;aspect-ratio:1}}.lc-datepicker-calendar--month .lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-calendar--month .lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-months{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:17.25rem;max-inline-size:calc(100vw - 4.125rem)}.lc-datepicker-month-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-2)}.lc-datepicker-month{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 var(--spacing-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);text-align:center;overflow-wrap:anywhere;hyphens:auto;color:var(--color-text-primary);border-radius:var(--border-radius-md);cursor:pointer}.lc-datepicker-month:hover:not(.lc-datepicker-month--disabled):not(.lc-datepicker-month--selected){background-color:var(--color-surface-hover)}.lc-datepicker-month.lc-datepicker-month--current{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-month.lc-datepicker-month--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-month.lc-datepicker-month--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-month:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-datepicker-month:focus-visible{outline-color:Highlight}.lc-datepicker-month.lc-datepicker-month--selected{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-month.lc-datepicker-month--current{text-decoration:underline}.lc-datepicker-month.lc-datepicker-month--disabled{color:GrayText}.lc-datepicker-clear:focus-visible,.lc-datepicker-day:focus-visible{outline-color:Highlight}.lc-datepicker-day.lc-datepicker-day--selected,.lc-datepicker-day.lc-datepicker-day--selected:hover{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-day.lc-datepicker-day--today{text-decoration:underline}.lc-datepicker-day.lc-datepicker-day--disabled{color:GrayText}}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"]
 		}]
 	}],