@agorapulse/ui-components 22.1.7 → 22.2.0

package/fesm2022/agorapulse-ui-components-datepicker.mjs

@@ -1,11 +1,15 @@
-import { StopPropagationDirective } from '@agorapulse/ui-components/directives';
-import { createDropdownOverlay, DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
+import { StopPropagationDirective, OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective } from '@agorapulse/ui-components/directives';
+import { DropdownPanelComponent, DropdownContentDirective } from '@agorapulse/ui-components/dropdown-panel';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component, viewChild, computed, output, signal, effect } from '@angular/core';
+import { input, output, signal, viewChild, linkedSignal, computed, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, ViewChild, inject, APP_ID, model, effect, ViewEncapsulation } from '@angular/core';
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { createDropdownOverlay, DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
+import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import * as i1 from '@agorapulse/ui-symbol';
-import { apArrowLeft, apArrowRight, SymbolComponent, withSymbols, apCalendar, apChevronDown, apClose } from '@agorapulse/ui-symbol';
+import { withSymbols, apArrowLeft, apArrowRight, SymbolComponent, apCalendar, apChevronDown, apChevronUp, apClock, apClose, apInfo } from '@agorapulse/ui-symbol';
 import * as i2 from '@agorapulse/ngx-daterangepicker-material';
-import { NgxDaterangepickerMd } from '@agorapulse/ngx-daterangepicker-material';
+import { NgxDaterangepickerMd, LOCALE_CONFIG, LocaleService } from '@agorapulse/ngx-daterangepicker-material';
 import dayjs from 'dayjs';
 import 'dayjs/locale/de';
 import 'dayjs/locale/en';
@@ -13,10 +17,176 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/pt';
 import localeData from 'dayjs/plugin/localeData';
-import { FormFieldComponent } from '@agorapulse/ui-components/form-field';
-import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
-import { InputDirective } from '@agorapulse/ui-components/input';
 import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+
+const MONTHS_IN_YEAR = 12;
+/** A page of years fills the month grid exactly, so switching view never resizes the panel. */
+const YEARS_PER_PAGE = MONTHS_IN_YEAR;
+const SELECTED_MONTH_CONFIG = { style: 'primary', color: 'blue' };
+const UNSELECTED_MONTH_CONFIG = { style: 'ghost', color: 'grey' };
+/**
+ * A year of months in a dropdown, so a calendar can be moved somewhere far without paging through
+ * the months in between. Driven by `apDropdownTrigger` on whatever the caller wants as a trigger.
+ *
+ * The year is browsable inside the panel; only clicking a month commits.
+ *
+ * @example
+ * ```html
+ * <ap-button [apDropdownTrigger]="picker">{{ label }}</ap-button>
+ * <ap-datepicker-month-picker
+ *     #picker
+ *     [month]="month"
+ *     [year]="year"
+ *     (monthSelected)="goTo($event)" />
+ * ```
+ */
+class DatepickerMonthPickerComponent {
+    /** The month the calendar is showing, zero-based. Highlighted in the grid. */
+    month = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    /** The year the calendar is showing. The panel opens on it, and returns to it when it moves. */
+    year = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+    locale = input('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    minDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    monthSelected = output();
+    /**
+     * Months until the year is clicked, years until one is picked. Reaching a distant year through
+     * the arrows alone costs one click per year; through the grid it costs one per page.
+     */
+    showingYears = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showingYears" }] : /* istanbul ignore next */ []));
+    panelTemplate = viewChild('panelTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    overlay = createDropdownOverlay();
+    isOpen = this.overlay.isOpen;
+    /** Browsable on its own, and re-anchored on the calendar's year whenever that moves. */
+    displayedYear = linkedSignal(() => this.year(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedYear" }] : /* istanbul ignore next */ []));
+    /**
+     * First year of the visible page. Pages are fixed blocks rather than a window around the
+     * displayed year, so the same year always sits in the same page and browsing back and forth
+     * lands on the same grid.
+     */
+    yearPageStart = computed(() => {
+        const year = this.displayedYear();
+        return year - (((year % YEARS_PER_PAGE) + YEARS_PER_PAGE) % YEARS_PER_PAGE);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
+    /** The page the years grid spans, for the header that replaces the year while it shows. */
+    displayedYearRange = computed(() => `${this.yearPageStart()} - ${this.yearPageStart() + YEARS_PER_PAGE - 1}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedYearRange" }] : /* istanbul ignore next */ []));
+    canGoPrevious = computed(() => {
+        const min = this.minDate();
+        if (min === undefined) {
+            return true;
+        }
+        return this.showingYears() ? this.yearPageStart() > min.year() : this.displayedYear() > min.year();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
+    canGoNext = computed(() => {
+        const max = this.maxDate();
+        if (max === undefined) {
+            return true;
+        }
+        const lastOfPage = this.yearPageStart() + YEARS_PER_PAGE - 1;
+        return this.showingYears() ? lastOfPage < max.year() : this.displayedYear() < max.year();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+    months = computed(() => {
+        const locale = this.locale();
+        const displayedYear = this.displayedYear();
+        const showingCalendarYear = displayedYear === this.year();
+        const calendarMonth = this.month();
+        const min = this.minDate();
+        const max = this.maxDate();
+        return Array.from({ length: MONTHS_IN_YEAR }, (_, month) => {
+            // Anchored on the 1st before the year and the month are set: from a 31st, moving to a
+            // shorter month would otherwise spill into the next one.
+            const firstOfMonth = dayjs().date(1).year(displayedYear).month(month).locale(locale);
+            const selected = showingCalendarYear && month === calendarMonth;
+            return {
+                month,
+                label: firstOfMonth.format('MMM'),
+                ariaLabel: firstOfMonth.format('MMMM YYYY'),
+                disabled: (min !== undefined && firstOfMonth.endOf('month').isBefore(min, 'day')) ||
+                    (max !== undefined && firstOfMonth.startOf('month').isAfter(max, 'day')),
+                config: selected ? SELECTED_MONTH_CONFIG : UNSELECTED_MONTH_CONFIG,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    years = computed(() => {
+        const pageStart = this.yearPageStart();
+        const displayedYear = this.displayedYear();
+        const min = this.minDate();
+        const max = this.maxDate();
+        return Array.from({ length: YEARS_PER_PAGE }, (_, offset) => {
+            const year = pageStart + offset;
+            const selected = year === displayedYear;
+            return {
+                year,
+                disabled: (min !== undefined && year < min.year()) || (max !== undefined && year > max.year()),
+                config: selected ? SELECTED_MONTH_CONFIG : UNSELECTED_MONTH_CONFIG,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    open(triggerElement) {
+        const panelTemplate = this.panelTemplate();
+        if (this.isOpen() || !panelTemplate) {
+            return;
+        }
+        this.overlay.open(panelTemplate, triggerElement, { onClose: () => this.close() });
+    }
+    close() {
+        // Back to months, so reopening never starts on the year grid the last visit happened to leave on.
+        this.showingYears.set(false);
+        this.overlay.close();
+    }
+    toggle(triggerElement) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open(triggerElement);
+        }
+    }
+    onPrevious() {
+        this.displayedYear.update(year => year - this.step());
+    }
+    onNext() {
+        this.displayedYear.update(year => year + this.step());
+    }
+    /** Toggles the grid between the months of a year and the years of a page. */
+    onToggleYears() {
+        this.showingYears.update(showing => !showing);
+    }
+    onSelectYear(year) {
+        this.displayedYear.set(year);
+        this.showingYears.set(false);
+    }
+    onSelectMonth(month) {
+        this.monthSelected.emit({ month, year: this.displayedYear() });
+        this.close();
+    }
+    /** One year at a time through the months, a whole page at a time through the years. */
+    step() {
+        return this.showingYears() ? YEARS_PER_PAGE : 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerMonthPickerComponent, isStandalone: true, selector: "ap-datepicker-month-picker", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthSelected: "monthSelected" }, providers: [withSymbols(apArrowLeft, apArrowRight)], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #panelTemplate>\n    <div\n        class=\"ap-datepicker-month-picker\"\n        role=\"dialog\"\n        tabindex=\"-1\">\n        <div class=\"ap-datepicker-month-picker__header\">\n            <ap-icon-button\n                symbolId=\"arrow-left\"\n                [ariaLabel]=\"showingYears() ? 'Previous years' : 'Previous year'\"\n                [disabled]=\"!canGoPrevious()\"\n                (onClick)=\"onPrevious()\" />\n            <!--\n                A button, not a label: it is what opens the year grid. Reaching a distant year through\n                the arrows alone costs one click per year.\n            -->\n            <ap-button\n                class=\"ap-datepicker-month-picker__year\"\n                [ariaLabel]=\"showingYears() ? 'Back to the months' : 'Choose a year'\"\n                [config]=\"{ style: 'ghost', color: 'grey' }\"\n                (click)=\"onToggleYears()\">\n                {{ showingYears() ? displayedYearRange() : displayedYear() }}\n            </ap-button>\n            <ap-icon-button\n                symbolId=\"arrow-right\"\n                [ariaLabel]=\"showingYears() ? 'Next years' : 'Next year'\"\n                [disabled]=\"!canGoNext()\"\n                (onClick)=\"onNext()\" />\n        </div>\n\n        <!-- One grid for both: a page of years fills it exactly, so switching never resizes the panel. -->\n        <div class=\"ap-datepicker-month-picker__grid\">\n            @if (showingYears()) {\n                @for (option of years(); track option.year) {\n                    <ap-button\n                        [config]=\"option.config\"\n                        [disabled]=\"option.disabled\"\n                        (click)=\"onSelectYear(option.year)\">\n                        {{ option.year }}\n                    </ap-button>\n                }\n            } @else {\n                @for (option of months(); track option.month) {\n                    <ap-button\n                        [ariaLabel]=\"option.ariaLabel\"\n                        [config]=\"option.config\"\n                        [disabled]=\"option.disabled\"\n                        (click)=\"onSelectMonth(option.month)\">\n                        {{ option.label }}\n                    </ap-button>\n                }\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-month-picker{padding:var(--ref-spacing-sm);border-radius:var(--comp-action-dropdown-border-radius);background-color:var(--comp-action-dropdown-background-color);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none}.ap-datepicker-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ref-spacing-xs);gap:var(--ref-spacing-xxs)}.ap-datepicker-month-picker__year{color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height)}.ap-datepicker-month-picker__grid{display:grid;gap:var(--ref-spacing-xxs);grid-template-columns:repeat(3,minmax(64px,1fr))}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerMonthPickerComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-month-picker', imports: [ButtonComponent, IconButtonComponent], providers: [withSymbols(apArrowLeft, apArrowRight)], template: "<ng-template #panelTemplate>\n    <div\n        class=\"ap-datepicker-month-picker\"\n        role=\"dialog\"\n        tabindex=\"-1\">\n        <div class=\"ap-datepicker-month-picker__header\">\n            <ap-icon-button\n                symbolId=\"arrow-left\"\n                [ariaLabel]=\"showingYears() ? 'Previous years' : 'Previous year'\"\n                [disabled]=\"!canGoPrevious()\"\n                (onClick)=\"onPrevious()\" />\n            <!--\n                A button, not a label: it is what opens the year grid. Reaching a distant year through\n                the arrows alone costs one click per year.\n            -->\n            <ap-button\n                class=\"ap-datepicker-month-picker__year\"\n                [ariaLabel]=\"showingYears() ? 'Back to the months' : 'Choose a year'\"\n                [config]=\"{ style: 'ghost', color: 'grey' }\"\n                (click)=\"onToggleYears()\">\n                {{ showingYears() ? displayedYearRange() : displayedYear() }}\n            </ap-button>\n            <ap-icon-button\n                symbolId=\"arrow-right\"\n                [ariaLabel]=\"showingYears() ? 'Next years' : 'Next year'\"\n                [disabled]=\"!canGoNext()\"\n                (onClick)=\"onNext()\" />\n        </div>\n\n        <!-- One grid for both: a page of years fills it exactly, so switching never resizes the panel. -->\n        <div class=\"ap-datepicker-month-picker__grid\">\n            @if (showingYears()) {\n                @for (option of years(); track option.year) {\n                    <ap-button\n                        [config]=\"option.config\"\n                        [disabled]=\"option.disabled\"\n                        (click)=\"onSelectYear(option.year)\">\n                        {{ option.year }}\n                    </ap-button>\n                }\n            } @else {\n                @for (option of months(); track option.month) {\n                    <ap-button\n                        [ariaLabel]=\"option.ariaLabel\"\n                        [config]=\"option.config\"\n                        [disabled]=\"option.disabled\"\n                        (click)=\"onSelectMonth(option.month)\">\n                        {{ option.label }}\n                    </ap-button>\n                }\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-month-picker{padding:var(--ref-spacing-sm);border-radius:var(--comp-action-dropdown-border-radius);background-color:var(--comp-action-dropdown-background-color);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none}.ap-datepicker-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ref-spacing-xs);gap:var(--ref-spacing-xxs)}.ap-datepicker-month-picker__year{color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height)}.ap-datepicker-month-picker__grid{display:grid;gap:var(--ref-spacing-xxs);grid-template-columns:repeat(3,minmax(64px,1fr))}\n"] }]
+        }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }] } });
 
 var DatepickerMode;
 (function (DatepickerMode) {
@@ -29,35 +199,17 @@ var SideEnum;
     SideEnum["left"] = "left";
     SideEnum["right"] = "right";
 })(SideEnum || (SideEnum = {}));
-const RangesConfigPreset = {
-    yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
-    lastWeek: [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
-    last30Days: [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
-    lastMonth: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
-    thisMonth: [dayjs().startOf('month'), dayjs().endOf('month')],
-    lastWeekFromToday: [dayjs().subtract(6, 'days'), dayjs()],
-    lastMonthFromToday: [dayjs().subtract(1, 'month').add(1, 'days'), dayjs()],
-    last3MonthsFromToday: [dayjs().subtract(3, 'month').add(1, 'days'), dayjs()],
-    last6MonthsFromToday: [dayjs().subtract(6, 'month').add(1, 'days'), dayjs()],
-    lastYearFromToday: [dayjs().subtract(1, 'year').add(1, 'days'), dayjs()],
-};
+/** A stable "no shortcuts" reference: a fresh object would reset the vendor. */
+const NO_RANGES = {};
 // TODO fix css for range mode (more lateral padding)
 class DatepickerComponent {
     changeDetectorRef;
     symbolRegistry;
     datepickerRef;
     firstDayOfWeek = 'monday';
-    i18n = {
-        ranges: {
-            yesterday: 'Yesterday',
-            lastWeek: 'Last Week',
-            last30Days: 'Last 30 days',
-            lastMonth: 'Previous month',
-            thisMonth: 'This month',
-        },
-    };
     locale = 'en';
     set maxDate(maxDate) {
+        this.maxDateValue = maxDate;
         if (maxDate) {
             this.maxDateStr = maxDate.toISOString();
         }
@@ -66,6 +218,7 @@ class DatepickerComponent {
         }
     }
     set minDate(minDate) {
+        this.minDateValue = minDate;
         if (minDate) {
             this.minDateStr = minDate.toISOString();
         }
@@ -80,22 +233,38 @@ class DatepickerComponent {
     /** Maximum number of days between the start and the end date in Range mode. Undefined means no limit. */
     dateLimit = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateLimit" }] : /* istanbul ignore next */ []));
-    showRanges = false;
-    showCustomRangeLabel = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : /* istanbul ignore next */ []));
+    /** Shortcuts listed beside the calendars. Empty by default, and ignored outside Range mode. */
+    presets = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     dateSelected = new EventEmitter();
     periodSelected = new EventEmitter();
     DatepickerMode = DatepickerMode;
-    doubleCalendarWidth = 528; // 231px calendar table * 2 = 462 (+ 16px x-padding * 4 = 64)
     localeConfig;
-    rangesConfig = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangesConfig" }] : /* istanbul ignore next */ []));
-    ranges = {};
-    rangePickerWidth = 150;
-    width = 0;
     pageSet = false;
     maxDateStr = '';
     minDateStr = '';
+    /** The same bounds as `minDateStr`/`maxDateStr`, kept as dayjs for the month pickers. */
+    maxDateValue = undefined;
+    minDateValue = undefined;
+    /** A field and not an inline literal: the template would rebuild the object on every pass. */
+    monthTriggerConfig = { style: 'ghost', color: 'grey' };
+    /** A getter and not a `computed`: `mode` is a plain `@Input`, which a computed would not track. */
+    get hasPresets() {
+        return this.presets().length > 0 && this.mode === DatepickerMode.Range;
+    }
+    /**
+     * Memoised, and a shared constant when empty, so the reference only changes when `presets` does.
+     * A fresh `ranges` object reaches the vendor's setter, which resets the calendars and drops the
+     * start anchor and the in-range preview of a selection still in progress.
+     */
+    presetRanges = computed(() => 
+    // Annotated as a tuple: an inline array literal here infers as `(string | [Dayjs, Dayjs])[]`,
+    // which resolves `Object.fromEntries` to its untyped `any` overload instead of the typed one.
+    Object.fromEntries(this.presets().map(({ label, range }) => [label, range])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetRanges" }] : /* istanbul ignore next */ []));
+    get vendorRanges() {
+        return this.hasPresets ? this.presetRanges() : NO_RANGES;
+    }
     constructor(changeDetectorRef, symbolRegistry) {
         this.changeDetectorRef = changeDetectorRef;
         this.symbolRegistry = symbolRegistry;
@@ -103,18 +272,9 @@ class DatepickerComponent {
     }
     ngOnInit() {
         dayjs.extend(localeData);
-        const rangesConfig = this.rangesConfig();
-        if (rangesConfig) {
-            this.ranges = rangesConfig;
-        }
-        else {
-            // if config not defined - init default ranges
-            this.initRanges();
-        }
         this.initDatePickerLocale();
     }
     ngOnChanges(changes) {
-        this.setWidth();
         if (this.datepickerRef) {
             setTimeout(() => {
                 this.datepickerRef.updateCalendars();
@@ -161,19 +321,14 @@ class DatepickerComponent {
             firstDayOfWeekIndex = dayjs.localeData().firstDayOfWeek();
         }
         this.localeConfig = {
-            customRangeLabel: this.i18n.customRangeLabel ?? 'Custom',
+            // The vendor demands this label, but the entry is never shown: it only revealed the
+            // calendars, which `alwaysShowCalendars` keeps visible anyway.
+            customRangeLabel: 'Custom',
             daysOfWeek: dayjs.weekdaysMin(),
             monthNames: dayjs.months(),
             firstDay: firstDayOfWeekIndex,
         };
     }
-    initRanges() {
-        this.ranges[this.i18n.ranges.yesterday] = RangesConfigPreset.yesterday;
-        this.ranges[this.i18n.ranges.lastWeek] = RangesConfigPreset.lastWeek;
-        this.ranges[this.i18n.ranges.last30Days] = RangesConfigPreset.last30Days;
-        this.ranges[this.i18n.ranges.lastMonth] = RangesConfigPreset.lastMonth;
-        this.ranges[this.i18n.ranges.thisMonth] = RangesConfigPreset.thisMonth;
-    }
     isCustomDate = (date) => {
         const classes = [];
         if (this.mode === DatepickerMode.Multiple) {
@@ -188,6 +343,11 @@ class DatepickerComponent {
             if (dayjs().isSame(date, 'day') && !this.selectedPeriod?.startDate && !this.selectedPeriod?.endDate) {
                 classes.push('force-inactive');
             }
+            // The picker only flags the days *between* start and hover as `in-range`, never the hovered one.
+            const hoveredDate = this.datepickerRef?.pickingDate ? this.datepickerRef?.nowHoveredDate : undefined;
+            if (hoveredDate && dayjs(date).isSame(dayjs(hoveredDate), 'day')) {
+                classes.push('hovered-end');
+            }
         }
         return classes;
     };
@@ -198,25 +358,27 @@ class DatepickerComponent {
         const date = event.startDate.toDate();
         const dateLocalTime = new Date(date.getTime());
         const dayJsDate = dayjs(dateLocalTime);
-        if (this.mode !== DatepickerMode.Range) {
-            this.selectedDate = dayJsDate;
-            this.datepickerRef.setEndDate(dayJsDate);
-            if (this.pageSet) {
-                this.pageSet = false;
-            }
-            else {
-                this.dateSelected.emit(dayJsDate.clone());
-                if (this.mode === DatepickerMode.Multiple) {
-                    this.selectedDates.push(dayJsDate);
-                }
-            }
-            if (this.datepickerRef) {
-                this.datepickerRef.updateCalendars();
-            }
+        if (this.mode === DatepickerMode.Range) {
+            return;
+        }
+        this.selectedDate = dayJsDate;
+        this.datepickerRef.setEndDate(dayJsDate);
+        if (this.pageSet) {
+            this.pageSet = false;
+        }
+        else {
+            this.dateSelected.emit(dayJsDate.clone());
+        }
+        if (this.datepickerRef) {
+            this.datepickerRef.updateCalendars();
         }
     }
     onDatesUpdated(event) {
-        if (this.mode === DatepickerMode.Range) {
+        // `autoApply` makes the vendor emit on the FIRST click of a range, with the end set equal
+        // to the start. Emitting that reads as a finished selection: a dropdown closes on it, so
+        // the second click never happens and no range wider than a day can be picked. While
+        // `pickingDate` is true the user is still choosing the end — say nothing yet.
+        if (this.mode === DatepickerMode.Range && !this.datepickerRef?.pickingDate) {
             const startDate = event.startDate?.toDate();
             const startDateLocalTime = startDate ? new Date(startDate.getTime()) : new Date();
             const endDate = event.endDate?.toDate();
@@ -224,15 +386,44 @@ class DatepickerComponent {
             this.periodSelected.emit({
                 startDate: dayjs(startDateLocalTime).startOf('day'),
                 endDate: dayjs(endDateLocalTime).endOf('day'),
+                preset: this.chosenPreset(),
             });
         }
         if (this.datepickerRef) {
             this.datepickerRef.updateCalendars();
+            // Nothing is emitted above, so nothing writes `selectedPeriod` back, `ngOnChanges` never
+            // runs and this OnPush panel keeps the previous cells. Render here for the start anchor.
+            this.changeDetectorRef.detectChanges();
         }
     }
+    /**
+     * The preset the current range came from. The vendor keeps `chosenRange` up to date both ways —
+     * `clickRange` writes the clicked label, `clickDate` resets it to `customRangeLabel` — and those
+     * labels are the keys of its `ranges` table, so they are unique. Matching on the label rather
+     * than on a position survives a translated or reordered shortcut.
+     */
+    chosenPreset() {
+        const chosen = this.datepickerRef?.chosenRange;
+        return chosen ? this.presets().find(preset => preset.label === chosen) : undefined;
+    }
     onNextMonth() {
         this.datepickerRef.clickNext(SideEnum.right);
     }
+    onLeftMonthPicked(picked) {
+        this.moveCalendarTo(picked, SideEnum.left);
+    }
+    onRightMonthPicked(picked) {
+        this.moveCalendarTo(picked, SideEnum.right);
+    }
+    /**
+     * The vendor moves the view only — never the selection — and clamps to its own min/max on the
+     * way, so the picker's disabled months are a second line of defence rather than the only one.
+     */
+    moveCalendarTo({ month, year }, side) {
+        this.datepickerRef.monthOrYearChanged(month, year, side);
+        this.datepickerRef.updateCalendars();
+        this.changeDetectorRef.detectChanges();
+    }
     onPreviousMonth() {
         this.datepickerRef.clickPrev(SideEnum.left);
     }
@@ -252,25 +443,17 @@ class DatepickerComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    setWidth() {
-        this.width =
-            this.showRanges && this.mode === DatepickerMode.Range
-                ? this.doubleCalendarWidth + this.rangePickerWidth
-                : this.doubleCalendarWidth;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: false, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"custom-calendar\"\n    [style.width]=\"width + 'px'\">\n    <div class=\"custom-header\">\n        @if (datepickerRef.leftCalendar.month) {\n            <div class=\"month-header\">\n                <div\n                    class=\"month-arrow-button\"\n                    aria-label=\"Previous month\"\n                    tabindex=\"0\"\n                    (click)=\"onPreviousMonth()\">\n                    <ap-symbol\n                        symbolId=\"arrow-left\"\n                        [color]=\"'#858FA1'\"\n                        [size]=\"14\" />\n                </div>\n                <div class=\"month-label\">\n                    {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n                </div>\n            </div>\n        }\n        @if (datepickerRef.rightCalendar.month) {\n            <div class=\"month-header\">\n                <div class=\"month-label\">\n                    {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n                </div>\n                <div\n                    class=\"month-arrow-button\"\n                    aria-label=\"Next month\"\n                    tabindex=\"-1\"\n                    (click)=\"onNextMonth()\">\n                    <ap-symbol\n                        symbolId=\"arrow-right\"\n                        [color]=\"'#858FA1'\"\n                        [size]=\"14\" />\n                </div>\n            </div>\n        }\n        @if (showRanges && mode === DatepickerMode.Range) {\n            <div class=\"header-filler\"></div>\n        }\n    </div>\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!showRanges\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [dateLimit]=\"dateLimit() ?? 0\"\n        [linkedCalendars]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDateStr\"\n        [minDate]=\"minDateStr\"\n        [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n        [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%;overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"custom-calendar\"\n    [class.single-month]=\"mode !== DatepickerMode.Range\">\n    <div class=\"custom-header\">\n        @if (datepickerRef.leftCalendar.month) {\n            <div class=\"month-header\">\n                <ap-icon-button\n                    symbolId=\"arrow-left\"\n                    ariaLabel=\"Previous month\"\n                    (onClick)=\"onPreviousMonth()\" />\n                <ap-button\n                    class=\"month-label\"\n                    symbolId=\"chevron-down\"\n                    [apDropdownTrigger]=\"leftMonthPicker\"\n                    [config]=\"monthTriggerConfig\">\n                    <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n                </ap-button>\n                <ap-datepicker-month-picker\n                    #leftMonthPicker\n                    [locale]=\"locale\"\n                    [maxDate]=\"maxDateValue\"\n                    [minDate]=\"minDateValue\"\n                    [month]=\"datepickerRef.leftCalendar.month.month()\"\n                    [year]=\"datepickerRef.leftCalendar.month.year()\"\n                    (monthSelected)=\"onLeftMonthPicked($event)\" />\n                <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n                @if (mode !== DatepickerMode.Range) {\n                    <ap-icon-button\n                        symbolId=\"arrow-right\"\n                        ariaLabel=\"Next month\"\n                        (onClick)=\"onNextMonth()\" />\n                }\n            </div>\n        }\n        @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n            <div class=\"month-header\">\n                <ap-button\n                    class=\"month-label\"\n                    symbolId=\"chevron-down\"\n                    [apDropdownTrigger]=\"rightMonthPicker\"\n                    [config]=\"monthTriggerConfig\">\n                    <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n                </ap-button>\n                <ap-datepicker-month-picker\n                    #rightMonthPicker\n                    [locale]=\"locale\"\n                    [maxDate]=\"maxDateValue\"\n                    [minDate]=\"minDateValue\"\n                    [month]=\"datepickerRef.rightCalendar.month.month()\"\n                    [year]=\"datepickerRef.rightCalendar.month.year()\"\n                    (monthSelected)=\"onRightMonthPicked($event)\" />\n                <ap-icon-button\n                    symbolId=\"arrow-right\"\n                    ariaLabel=\"Next month\"\n                    (onClick)=\"onNextMonth()\" />\n            </div>\n        }\n    </div>\n    <!--\n        `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n        but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n        that is what `monthOrYearChanged` reads to move a calendar.\n    -->\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!hasPresets\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [dateLimit]=\"dateLimit() ?? 0\"\n        [linkedCalendars]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDateStr\"\n        [minDate]=\"minDateStr\"\n        [ranges]=\"vendorRanges\"\n        [showCustomRangeLabel]=\"false\"\n        [showDropdowns]=\"true\"\n        [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;background:var(--ref-color-grey-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: DatepickerMonthPickerComponent, selector: "ap-datepicker-month-picker", inputs: ["month", "year", "locale", "minDate", "maxDate"], outputs: ["monthSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [SymbolComponent, NgxDaterangepickerMd], template: "<div\n    class=\"custom-calendar\"\n    [style.width]=\"width + 'px'\">\n    <div class=\"custom-header\">\n        @if (datepickerRef.leftCalendar.month) {\n            <div class=\"month-header\">\n                <div\n                    class=\"month-arrow-button\"\n                    aria-label=\"Previous month\"\n                    tabindex=\"0\"\n                    (click)=\"onPreviousMonth()\">\n                    <ap-symbol\n                        symbolId=\"arrow-left\"\n                        [color]=\"'#858FA1'\"\n                        [size]=\"14\" />\n                </div>\n                <div class=\"month-label\">\n                    {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n                </div>\n            </div>\n        }\n        @if (datepickerRef.rightCalendar.month) {\n            <div class=\"month-header\">\n                <div class=\"month-label\">\n                    {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n                </div>\n                <div\n                    class=\"month-arrow-button\"\n                    aria-label=\"Next month\"\n                    tabindex=\"-1\"\n                    (click)=\"onNextMonth()\">\n                    <ap-symbol\n                        symbolId=\"arrow-right\"\n                        [color]=\"'#858FA1'\"\n                        [size]=\"14\" />\n                </div>\n            </div>\n        }\n        @if (showRanges && mode === DatepickerMode.Range) {\n            <div class=\"header-filler\"></div>\n        }\n    </div>\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!showRanges\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [dateLimit]=\"dateLimit() ?? 0\"\n        [linkedCalendars]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDateStr\"\n        [minDate]=\"minDateStr\"\n        [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n        [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%;overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [ButtonComponent, DatepickerMonthPickerComponent, DropdownTriggerDirective, IconButtonComponent, NgxDaterangepickerMd], template: "<div\n    class=\"custom-calendar\"\n    [class.single-month]=\"mode !== DatepickerMode.Range\">\n    <div class=\"custom-header\">\n        @if (datepickerRef.leftCalendar.month) {\n            <div class=\"month-header\">\n                <ap-icon-button\n                    symbolId=\"arrow-left\"\n                    ariaLabel=\"Previous month\"\n                    (onClick)=\"onPreviousMonth()\" />\n                <ap-button\n                    class=\"month-label\"\n                    symbolId=\"chevron-down\"\n                    [apDropdownTrigger]=\"leftMonthPicker\"\n                    [config]=\"monthTriggerConfig\">\n                    <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n                </ap-button>\n                <ap-datepicker-month-picker\n                    #leftMonthPicker\n                    [locale]=\"locale\"\n                    [maxDate]=\"maxDateValue\"\n                    [minDate]=\"minDateValue\"\n                    [month]=\"datepickerRef.leftCalendar.month.month()\"\n                    [year]=\"datepickerRef.leftCalendar.month.year()\"\n                    (monthSelected)=\"onLeftMonthPicked($event)\" />\n                <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n                @if (mode !== DatepickerMode.Range) {\n                    <ap-icon-button\n                        symbolId=\"arrow-right\"\n                        ariaLabel=\"Next month\"\n                        (onClick)=\"onNextMonth()\" />\n                }\n            </div>\n        }\n        @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n            <div class=\"month-header\">\n                <ap-button\n                    class=\"month-label\"\n                    symbolId=\"chevron-down\"\n                    [apDropdownTrigger]=\"rightMonthPicker\"\n                    [config]=\"monthTriggerConfig\">\n                    <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n                </ap-button>\n                <ap-datepicker-month-picker\n                    #rightMonthPicker\n                    [locale]=\"locale\"\n                    [maxDate]=\"maxDateValue\"\n                    [minDate]=\"minDateValue\"\n                    [month]=\"datepickerRef.rightCalendar.month.month()\"\n                    [year]=\"datepickerRef.rightCalendar.month.year()\"\n                    (monthSelected)=\"onRightMonthPicked($event)\" />\n                <ap-icon-button\n                    symbolId=\"arrow-right\"\n                    ariaLabel=\"Next month\"\n                    (onClick)=\"onNextMonth()\" />\n            </div>\n        }\n    </div>\n    <!--\n        `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n        but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n        that is what `monthOrYearChanged` reads to move a calendar.\n    -->\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!hasPresets\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [dateLimit]=\"dateLimit() ?? 0\"\n        [linkedCalendars]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDateStr\"\n        [minDate]=\"minDateStr\"\n        [ranges]=\"vendorRanges\"\n        [showCustomRangeLabel]=\"false\"\n        [showDropdowns]=\"true\"\n        [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;background:var(--ref-color-grey-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SymbolRegistry }], propDecorators: { datepickerRef: [{
                 type: ViewChild,
                 args: ['datepickerRef']
             }], firstDayOfWeek: [{
                 type: Input
-            }], i18n: [{
-                type: Input
             }], locale: [{
                 type: Input
             }], maxDate: [{
@@ -288,30 +471,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], selectedPeriod: [{
                 type: Input
-            }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], showRanges: [{
-                type: Input
-            }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], dateSelected: [{
+            }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], dateSelected: [{
                 type: Output
             }], periodSelected: [{
                 type: Output
-            }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }] } });
+            }] } });
 
-const DEFAULT_I18N = {
-    ranges: {
-        yesterday: 'Yesterday',
-        lastWeek: 'Last Week',
-        last30Days: 'Last 30 days',
-        lastMonth: 'Previous month',
-        thisMonth: 'This month',
-    },
-};
 /**
  * A dropdown component that displays a datepicker (single, multiple, or range mode)
  * in an overlay. Exposes open/close/toggle so it can be driven by apDropdownTrigger.
  */
 class DatepickerDropdownComponent {
-    datepickerDropdownTemplate = viewChild('datepickerDropdownTemplate', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "datepickerDropdownTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Stable id for the panel (`role="dialog"`), so a trigger can bind `aria-controls` to it.
+     * Combines the app id — several federated Angular apps can share one page — with a per-instance
+     * random suffix computed once at construction. No shared mutable counter, and no reliance on
+     * `crypto.randomUUID()`, which browsers refuse outside a secure (HTTPS/localhost) context.
+     */
+    panelId = `${inject(APP_ID)}-datepicker-panel-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+    panel = viewChild(DropdownPanelComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
     mode = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     selectedDate = input(undefined, /* @ts-ignore */
@@ -330,23 +509,25 @@ class DatepickerDropdownComponent {
     /** Caption shown at the bottom of the panel, e.g. to explain a selection constraint. */
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /**
+     * Rendered under `hint`, for what a caption cannot carry — a banner with its own button. A
+     * `TemplateRef` and not an `ng-content`: the footer shows inside the overlay's embedded view.
+     */
+    panelFooter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelFooter" }] : /* istanbul ignore next */ []));
     firstDayOfWeek = input('monday', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     locale = input('en', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    i18n = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "i18n" }] : /* istanbul ignore next */ []));
-    effectiveI18n = computed(() => this.i18n() ?? DEFAULT_I18N, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveI18n" }] : /* istanbul ignore next */ []));
-    showRanges = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showRanges" }] : /* istanbul ignore next */ []));
-    showCustomRangeLabel = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : /* istanbul ignore next */ []));
-    rangesConfig = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangesConfig" }] : /* istanbul ignore next */ []));
+    /** Shortcuts listed beside the calendars. Empty: no column at all. */
+    presets = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     showBackdrop = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
-    /** Close the overlay once a full period is selected. When false it stays open until backdrop click or Escape. */
+    /**
+     * Close the overlay once the selection is complete. When false it stays open until backdrop
+     * click or Escape — which lets the host vet a selection before anything closes.
+     */
     closeOnSelect = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
@@ -358,24 +539,18 @@ class DatepickerDropdownComponent {
     closed = output();
     dateSelected = output();
     periodSelected = output();
-    overlay = createDropdownOverlay();
-    isOpen = this.overlay.isOpen;
+    isOpen = computed(() => this.panel()?.isOpen() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     open(triggerElement) {
-        const template = this.datepickerDropdownTemplate();
-        if (this.disabled() || this.isOpen() || !template)
+        const panel = this.panel();
+        if (this.disabled() || this.isOpen() || !panel)
             return;
-        this.overlay.open(template, triggerElement, {
-            showBackdrop: this.showBackdrop(),
-            placement: this.placement(),
-            onClose: () => this.close(),
-        });
+        panel.open(triggerElement);
         this.opened.emit();
     }
+    /** `closed` is relayed from the panel, which fires it for a gesture as well as for this call. */
     close() {
-        if (!this.isOpen())
-            return;
-        this.overlay.close();
-        this.closed.emit();
+        this.panel()?.close();
     }
     toggle(triggerElement) {
         if (this.isOpen()) {
@@ -387,7 +562,7 @@ class DatepickerDropdownComponent {
     }
     onDateSelected(date) {
         this.dateSelected.emit(date);
-        if (this.mode() !== DatepickerMode.Multiple) {
+        if (this.closeOnSelect() && this.mode() !== DatepickerMode.Multiple) {
             this.close();
         }
     }
@@ -398,144 +573,405 @@ class DatepickerDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerDropdownComponent, isStandalone: true, selector: "ap-datepicker-dropdown", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerDropdownTemplate", first: true, predicate: ["datepickerDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #datepickerDropdownTemplate>\n    <div\n        class=\"ap-datepicker-dropdown__content\"\n        role=\"dialog\"\n        aria-label=\"Datepicker\"\n        tabindex=\"-1\">\n        <ap-datepicker\n            apStopPropagation\n            [dateLimit]=\"dateLimit()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [i18n]=\"effectiveI18n()\"\n            [locale]=\"locale()\"\n            [maxDate]=\"maxDate()\"\n            [minDate]=\"minDate()\"\n            [mode]=\"mode()\"\n            [rangesConfig]=\"rangesConfig()\"\n            [selectedDate]=\"selectedDate()\"\n            [selectedDates]=\"selectedDates()\"\n            [selectedPeriod]=\"selectedPeriod()\"\n            [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n            [showRanges]=\"showRanges()\"\n            (dateSelected)=\"onDateSelected($event)\"\n            (periodSelected)=\"onPeriodSelected($event)\" />\n        @if (hint()) {\n            <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}\n"], dependencies: [{ kind: "component", type: DatepickerComponent, selector: "ap-datepicker", inputs: ["firstDayOfWeek", "i18n", "locale", "maxDate", "minDate", "mode", "selectedDate", "selectedDates", "selectedPeriod", "dateLimit", "showRanges", "showCustomRangeLabel", "rangesConfig"], outputs: ["dateSelected", "periodSelected"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerDropdownComponent, isStandalone: true, selector: "ap-datepicker-dropdown", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"closed.emit()\">\n    <div\n        *apDropdownContent\n        class=\"ap-datepicker-dropdown__content\"\n        role=\"dialog\"\n        aria-label=\"Datepicker\"\n        tabindex=\"-1\"\n        [id]=\"panelId\">\n        <ap-datepicker\n            apStopPropagation\n            [dateLimit]=\"dateLimit()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [locale]=\"locale()\"\n            [maxDate]=\"maxDate()\"\n            [minDate]=\"minDate()\"\n            [mode]=\"mode()\"\n            [presets]=\"presets()\"\n            [selectedDate]=\"selectedDate()\"\n            [selectedDates]=\"selectedDates()\"\n            [selectedPeriod]=\"selectedPeriod()\"\n            (dateSelected)=\"onDateSelected($event)\"\n            (periodSelected)=\"onPeriodSelected($event)\" />\n        @if (hint()) {\n            <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n        }\n        @if (panelFooter(); as footer) {\n            <div class=\"ap-datepicker-dropdown__footer\">\n                <ng-container [ngTemplateOutlet]=\"footer\" />\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{padding:var(--ref-spacing-sm);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}.ap-datepicker-dropdown__footer{border-top:1px solid var(--ref-color-grey-10);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs)}.ap-datepicker-dropdown__hint+.ap-datepicker-dropdown__footer{border-top:none;padding-top:0}\n"], dependencies: [{ kind: "component", type: DatepickerComponent, selector: "ap-datepicker", inputs: ["firstDayOfWeek", "locale", "maxDate", "minDate", "mode", "selectedDate", "selectedDates", "selectedPeriod", "dateLimit", "presets"], outputs: ["dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerDropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-dropdown', imports: [DatepickerComponent, StopPropagationDirective], template: "<ng-template #datepickerDropdownTemplate>\n    <div\n        class=\"ap-datepicker-dropdown__content\"\n        role=\"dialog\"\n        aria-label=\"Datepicker\"\n        tabindex=\"-1\">\n        <ap-datepicker\n            apStopPropagation\n            [dateLimit]=\"dateLimit()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [i18n]=\"effectiveI18n()\"\n            [locale]=\"locale()\"\n            [maxDate]=\"maxDate()\"\n            [minDate]=\"minDate()\"\n            [mode]=\"mode()\"\n            [rangesConfig]=\"rangesConfig()\"\n            [selectedDate]=\"selectedDate()\"\n            [selectedDates]=\"selectedDates()\"\n            [selectedPeriod]=\"selectedPeriod()\"\n            [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n            [showRanges]=\"showRanges()\"\n            (dateSelected)=\"onDateSelected($event)\"\n            (periodSelected)=\"onPeriodSelected($event)\" />\n        @if (hint()) {\n            <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}\n"] }]
-        }], propDecorators: { datepickerDropdownTemplate: [{ type: i0.ViewChild, args: ['datepickerDropdownTemplate', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], periodSelected: [{ type: i0.Output, args: ["periodSelected"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-dropdown', imports: [DatepickerComponent, DropdownContentDirective, DropdownPanelComponent, NgTemplateOutlet, StopPropagationDirective], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"closed.emit()\">\n    <div\n        *apDropdownContent\n        class=\"ap-datepicker-dropdown__content\"\n        role=\"dialog\"\n        aria-label=\"Datepicker\"\n        tabindex=\"-1\"\n        [id]=\"panelId\">\n        <ap-datepicker\n            apStopPropagation\n            [dateLimit]=\"dateLimit()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [locale]=\"locale()\"\n            [maxDate]=\"maxDate()\"\n            [minDate]=\"minDate()\"\n            [mode]=\"mode()\"\n            [presets]=\"presets()\"\n            [selectedDate]=\"selectedDate()\"\n            [selectedDates]=\"selectedDates()\"\n            [selectedPeriod]=\"selectedPeriod()\"\n            (dateSelected)=\"onDateSelected($event)\"\n            (periodSelected)=\"onPeriodSelected($event)\" />\n        @if (hint()) {\n            <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n        }\n        @if (panelFooter(); as footer) {\n            <div class=\"ap-datepicker-dropdown__footer\">\n                <ng-container [ngTemplateOutlet]=\"footer\" />\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{padding:var(--ref-spacing-sm);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}.ap-datepicker-dropdown__footer{border-top:1px solid var(--ref-color-grey-10);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs)}.ap-datepicker-dropdown__hint+.ap-datepicker-dropdown__footer{border-top:none;padding-top:0}\n"] }]
+        }], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], periodSelected: [{ type: i0.Output, args: ["periodSelected"] }] } });
 
-const defaultPeriodSelected = { startDate: undefined, endDate: undefined };
-class InputDatepickerComponent {
+const DEFAULT_LABELS = {
+    yesterday: 'Yesterday',
+    lastWeek: 'Last Week',
+    last30Days: 'Last 30 days',
+    lastMonth: 'Previous month',
+    thisMonth: 'This month',
+};
+/**
+ * The five shortcuts a picker offers by default. A function and not a constant, so the ranges are
+ * computed when shown: a session left open across midnight would otherwise offer yesterday's.
+ */
+function defaultDatepickerPresets(labels, today = dayjs()) {
+    const yesterday = today.subtract(1, 'day');
+    const previousMonth = today.subtract(1, 'month');
+    const label = (key) => labels?.[key] ?? DEFAULT_LABELS[key];
+    return [
+        { key: 'yesterday', label: label('yesterday'), range: [yesterday, yesterday] },
+        { key: 'lastWeek', label: label('lastWeek'), range: [today.subtract(7, 'day'), yesterday] },
+        { key: 'last30Days', label: label('last30Days'), range: [today.subtract(30, 'day'), yesterday] },
+        {
+            key: 'lastMonth',
+            label: label('lastMonth'),
+            range: [previousMonth.startOf('month'), previousMonth.endOf('month')],
+        },
+        { key: 'thisMonth', label: label('thisMonth'), range: [today.startOf('month'), today.endOf('month')] },
+    ];
+}
+
+const EXPECTED = {
+    [DatepickerMode.Single]: 'a single date',
+    [DatepickerMode.Range]: 'a Period ({ startDate, endDate })',
+    [DatepickerMode.Multiple]: 'an array of dates',
+};
+function describe(value) {
+    if (Array.isArray(value)) {
+        return `an array of ${value.length} date${value.length === 1 ? '' : 's'}`;
+    }
+    if (dayjs.isDayjs(value)) {
+        return 'a single date';
+    }
+    if (isPeriod(value)) {
+        return 'a Period ({ startDate, endDate })';
+    }
+    return 'an unrecognised value';
+}
+/** Tells a `Period` from the two other shapes, without an `as`. */
+function isPeriod(value) {
+    // Must be a non-null object
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    // Must not be an array
+    if (Array.isArray(value)) {
+        return false;
+    }
+    // Must not be a dayjs instance
+    if (dayjs.isDayjs(value)) {
+        return false;
+    }
+    // Must have startDate and endDate properties
+    const obj = value;
+    // Check that at least one of startDate/endDate is defined as an own property
+    const hasStartDate = 'startDate' in obj;
+    const hasEndDate = 'endDate' in obj;
+    if (!hasStartDate && !hasEndDate) {
+        return false;
+    }
+    const startDate = obj.startDate;
+    const endDate = obj.endDate;
+    // Each field must be either undefined/null or a dayjs instance
+    const isValidDateField = (field) => {
+        return field === undefined || field === null || dayjs.isDayjs(field);
+    };
+    return isValidDateField(startDate) && isValidDateField(endDate);
+}
+function matches(mode, value) {
+    if (mode === DatepickerMode.Multiple) {
+        return Array.isArray(value);
+    }
+    if (mode === DatepickerMode.Single) {
+        return dayjs.isDayjs(value);
+    }
+    return isPeriod(value);
+}
+/**
+ * Throws when the value does not match the mode. An empty value (`undefined`, `null`) is accepted
+ * everywhere: it means nothing is selected.
+ */
+function assertValueMatchesMode(mode, value) {
+    if (value === undefined || value === null) {
+        return;
+    }
+    if (!matches(mode, value)) {
+        throw new Error(`ap-datepicker-select: mode="${mode}" expects ${EXPECTED[mode]}, received ${describe(value)}.`);
+    }
+}
+
+const EMPTY_PERIOD = { startDate: undefined, endDate: undefined };
+/**
+ * The design system's date field: it shows the value, opens the shared panel and binds to a form.
+ * It carries no label of its own — wrap it in an `ap-form-field`, as `ap-select` is.
+ *
+ * @example
+ * ```html
+ * <ap-form-field>
+ *     <label for="period">Reporting period</label>
+ *     <ap-datepicker-select [mode]="DatepickerMode.Range" [(value)]="period" [presets]="presets" />
+ * </ap-form-field>
+ * ```
+ */
+class DatepickerSelectComponent {
     mode = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    label = input('Select date', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('Select date', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    firstDayOfWeek = input('monday', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-    locale = input('en', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    dateFormat = input('MM/DD/YYYY', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * The selection. Its shape follows the mode: a date in Single, a `Period` in Range, an array in
+     * Multiple. A shape that does not match the mode throws on the first render.
+     *
+     * Empty is `undefined`, and `null` is accepted for it: a form holding a nullable date has no
+     * other empty to offer, and this is the type a binding is checked against.
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disables the field. A form writes here too, rather than to a second flag of its own. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     minDate = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    selectedDate = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
-    selectedDates = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []));
-    selectedPeriod = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : /* istanbul ignore next */ []));
-    i18n = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "i18n" }] : /* istanbul ignore next */ []));
-    showRanges = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showRanges" }] : /* istanbul ignore next */ []));
-    showCustomRangeLabel = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : /* istanbul ignore next */ []));
-    rangesConfig = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangesConfig" }] : /* istanbul ignore next */ []));
-    showBackdrop = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of days between the start and the end, in Range mode. It bars the days beyond
+     * the limit without saying so: pair it with a `panelHint` when the constraint deserves a word.
+     */
+    maxRangeDays = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRangeDays" }] : /* istanbul ignore next */ []));
+    /** Caption shown at the bottom of the panel, to explain a constraint for instance. */
+    panelHint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelHint" }] : /* istanbul ignore next */ []));
+    /** Rendered under `panelHint`, for what a sentence cannot carry — a banner with its own button. */
+    panelFooter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelFooter" }] : /* istanbul ignore next */ []));
+    /**
+     * Consulted before a selection is committed. Returning `false` keeps the current value, keeps the
+     * panel open and emits `selectionRejected`.
+     *
+     * A constraint the panel can apply itself (`minDate`, `maxDate`, `maxRangeDays`) belongs there
+     * instead: it bars the days rather than letting them be clicked and then refused.
+     */
+    canSelect = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSelect" }] : /* istanbul ignore next */ []));
+    /** Shortcuts listed beside the calendars. Empty: no column at all. */
+    presets = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name of the field, since `role="combobox"` is not a name-from-content role and the
+     * component carries no internal `<label>` — surround it with an `ap-form-field` for the visible
+     * label, and mirror its text here.
+     */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * dayjs format of the displayed text. Defaults to `'MM/DD/YYYY'`, which needs no plugin: the
+     * localized tokens (`ll`, `LL`) assume the host application loaded `dayjs/plugin/localizedFormat`.
+     */
+    dateFormat = input('MM/DD/YYYY', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    locale = input('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input('monday', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
     placement = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
-    /** Show a clear (X) inside the input when a value is selected. Off by default. */
+    /** Shows a clear cross in the field as soon as something is selected. */
     clearable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    periodRange = signal(defaultPeriodSelected, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "periodRange" }] : /* istanbul ignore next */ []));
-    isDisabled = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    periodChanged = output();
-    dateSelected = output();
-    displayedDate = computed(() => {
-        const { startDate, endDate } = this.periodRange();
-        const dateFormat = this.dateFormat() ?? 'MM/DD/YYYY';
-        const locale = this.locale();
-        if (startDate && endDate) {
-            return `${dayjs(startDate).locale(locale).format(dateFormat)} - ${dayjs(endDate).locale(locale).format(dateFormat)}`;
+    /** IANA time zone name. When set, a chip shows its abbreviation beside the field. */
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    /** Tooltip carried by the info icon next to the chip. */
+    timeZoneTooltip = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZoneTooltip" }] : /* istanbul ignore next */ []));
+    /** Blur of the combobox. A form reads it to mark the field touched. */
+    touch = output();
+    /** The committed value with the preset that produced it, beside `valueChange` — one event, not two halves to correlate. */
+    selectionChange = output();
+    /** The selection `canSelect` just refused. The field's value has not moved. */
+    selectionRejected = output();
+    /** The panel just opened, just closed, so that what a host shows beside it can start over. */
+    opened = output();
+    closed = output();
+    DatepickerMode = DatepickerMode;
+    /**
+     * The panel only closes itself without a refusal predicate: it emits the selection then closes,
+     * so a veto would land too late. With one, the field closes what it accepted.
+     */
+    closesOnSelect = computed(() => this.canSelect() === undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closesOnSelect" }] : /* istanbul ignore next */ []));
+    /** Fed by the dropdown's `opened`/`closed` rather than read back from it: a host class can only bind to our own members. */
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** The dropdown driving the panel — held only to close it when the field becomes disabled. */
+    dropdown = viewChild('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+    /**
+     * Closes an already-open panel the moment the field becomes disabled. The dropdown only guards
+     * *new* opens, and its panel is a CDK overlay detached from this component's DOM.
+     */
+    closeOnDisable = effect(() => {
+        if (this.disabled()) {
+            this.dropdown()?.close();
         }
-        return '';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayedDate" }] : /* istanbul ignore next */ []));
-    initPeriodRange = effect(() => {
-        const selected = this.selectedPeriod();
-        if (selected && selected.startDate && selected.endDate) {
-            this.periodRange.set({
-                startDate: dayjs(selected.startDate),
-                endDate: dayjs(selected.endDate),
-            });
+    ...(ngDevMode ? [{ debugName: "closeOnDisable" }] : /* istanbul ignore next */ []));
+    /** Checks the value once, and sorts it into the three shapes the panel expects. */
+    shaped = computed(() => {
+        const mode = this.mode();
+        // Both empties collapse here, so nothing below has to know which one it was handed.
+        const value = this.value() ?? undefined;
+        assertValueMatchesMode(mode, value);
+        if (mode === DatepickerMode.Single) {
+            return { date: dayjs.isDayjs(value) ? value : undefined, dates: [], period: EMPTY_PERIOD };
+        }
+        if (mode === DatepickerMode.Multiple) {
+            return { date: undefined, dates: Array.isArray(value) ? value : [], period: EMPTY_PERIOD };
+        }
+        return { date: undefined, dates: [], period: value !== undefined && isPeriod(value) ? value : EMPTY_PERIOD };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shaped" }] : /* istanbul ignore next */ []));
+    selectedDate = computed(() => this.shaped().date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    selectedDates = computed(() => this.shaped().dates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []));
+    /**
+     * Bumped to re-impose the value a refusal kept. The panel only reacts to `selectedPeriod`
+     * changing identity, so putting it back takes a fresh object.
+     */
+    restoreNonce = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreNonce" }] : /* istanbul ignore next */ []));
+    selectedPeriod = computed(() => {
+        this.restoreNonce();
+        return { ...this.shaped().period };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        const mode = this.mode();
+        if (mode === DatepickerMode.Single) {
+            return this.selectedDate() !== undefined;
         }
-        else {
-            this.periodRange.set(defaultPeriodSelected);
+        if (mode === DatepickerMode.Multiple) {
+            return this.selectedDates().length > 0;
         }
+        const { startDate, endDate } = this.selectedPeriod();
+        return startDate !== undefined || endDate !== undefined;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "initPeriodRange" }] : /* istanbul ignore next */ []));
-    onTouched = () => { };
-    onChange = () => { };
-    onPeriodSelected(period) {
-        if (period.startDate && period.endDate) {
-            this.periodRange.set(period);
-            this.onChange(period);
-            this.periodChanged.emit(period);
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** The field's text. Empty in Multiple, where the field shows chips instead. */
+    displayed = computed(() => {
+        const format = (date) => date.locale(this.locale()).format(this.dateFormat());
+        const mode = this.mode();
+        if (mode === DatepickerMode.Single) {
+            const date = this.selectedDate();
+            return date ? format(date) : '';
+        }
+        if (mode === DatepickerMode.Range) {
+            const { startDate, endDate } = this.selectedPeriod();
+            return startDate && endDate ? `${format(startDate)} - ${format(endDate)}` : '';
         }
-        else {
-            this.periodRange.set(defaultPeriodSelected);
-            this.onChange(defaultPeriodSelected);
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
+    /** The chips shown in Multiple mode, one per selected date. */
+    chips = computed(() => this.selectedDates().map(date => ({
+        label: date.locale(this.locale()).format(this.dateFormat()),
+        date,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    /** The zone abbreviation ("EST", "CEST"…), computed without touching dayjs globally. */
+    timeZoneOffset = computed(() => {
+        const timeZone = this.timeZone();
+        if (!timeZone) {
+            return '';
+        }
+        return (new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'short' })
+            .formatToParts(new Date())
+            .find(({ type }) => type === 'timeZoneName')?.value ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZoneOffset" }] : /* istanbul ignore next */ []));
+    onDateSelected(date) {
+        const mode = this.mode();
+        if (mode === DatepickerMode.Single) {
+            this.commit(date);
+            return;
         }
-    }
-    /** Clear the selected period. Stops propagation so it doesn't reopen the calendar. */
-    onClear(event) {
-        event.stopPropagation();
-        this.periodRange.set(defaultPeriodSelected);
-        this.onChange(defaultPeriodSelected);
-        this.periodChanged.emit(defaultPeriodSelected);
-    }
-    writeValue(value) {
-        if (value && value.startDate && value.endDate) {
-            this.periodRange.set({
-                startDate: dayjs(value.startDate),
-                endDate: dayjs(value.endDate),
-            });
+        if (mode === DatepickerMode.Multiple) {
+            // The panel re-emits the same date on every click: toggling is ours to do.
+            const dates = this.selectedDates();
+            const without = dates.filter(selected => !selected.isSame(date, 'day'));
+            this.commit(without.length === dates.length ? [...dates, date] : without);
         }
-        else {
-            this.periodRange.set(defaultPeriodSelected);
+    }
+    /** Drops a date from the selection, from the chip the user closed. */
+    removeDate(chip) {
+        this.commit(this.selectedDates().filter(date => date !== chip.date));
+    }
+    onPanelOpened() {
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    onPanelClosed() {
+        this.isOpen.set(false);
+        this.closed.emit();
+    }
+    /** The preset is stripped from the value: it says where the value came from, it is not part of it. */
+    onPeriodSelected({ preset, ...period }) {
+        if (this.mode() === DatepickerMode.Range) {
+            this.commit(period, preset);
         }
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    /** Clears the selection. Stops propagation so the panel does not reopen. */
+    clear(event) {
+        event.stopPropagation();
+        this.commit(undefined);
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    /** The single write point: the signal and the form get the same value, and a disabled field none. */
+    commit(value, preset) {
+        if (this.disabled())
+            return;
+        // Clearing is not a selection: the predicate has no say in it.
+        if (value !== undefined && this.canSelect()?.(value) === false) {
+            this.selectionRejected.emit(value);
+            this.restoreNonce.update(nonce => nonce + 1);
+            return;
+        }
+        this.value.set(value);
+        this.selectionChange.emit({ value, preset });
+        if (!this.closesOnSelect() && this.isComplete(value)) {
+            this.dropdown()?.close();
+        }
     }
-    setDisabledState(isDisabled) {
-        this.isDisabled.set(isDisabled);
+    /** True when nothing is left to pick — the panel's own closing criterion. */
+    isComplete(value) {
+        const mode = this.mode();
+        if (mode === DatepickerMode.Multiple) {
+            // A multiple selection is never finished: the panel stays open from one click to the next.
+            return false;
+        }
+        if (mode === DatepickerMode.Single) {
+            return value !== undefined;
+        }
+        return value !== undefined && isPeriod(value) && value.startDate !== undefined && value.endDate !== undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InputDatepickerComponent, isStandalone: true, selector: "ap-input-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodChanged: "periodChanged", dateSelected: "dateSelected" }, providers: [withSymbols(apCalendar, apChevronDown, apClose)], ngImport: i0, template: "<ap-form-field>\n    @let vLabel = label();\n    @if (vLabel) {\n        <label for=\"datepicker\">\n            {{ vLabel }}\n        </label>\n    }\n    <ap-input-group\n        [apDropdownTrigger]=\"datepickerDropdown\"\n        symbolPosition=\"left\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"calendar\" />\n        <input\n            apInput\n            id=\"datepicker\"\n            readonly\n            (blur)=\"onTouched()\"\n            [disabled]=\"disabled() || isDisabled()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"displayedDate()\"\n            type=\"text\" />\n        @if (clearable() && displayedDate() && !disabled() && !isDisabled()) {\n            <ap-icon-button\n                class=\"ap-input-datepicker__clear\"\n                type=\"flat\"\n                name=\"datepicker-clear\"\n                symbolId=\"close\"\n                ariaLabel=\"Clear date range\"\n                (click)=\"onClear($event)\" />\n        }\n    </ap-input-group>\n</ap-form-field>\n\n<ap-datepicker-dropdown\n    #datepickerDropdown\n    [placement]=\"placement()\"\n    [disabled]=\"disabled() || isDisabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [i18n]=\"i18n()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [mode]=\"mode()\"\n    [rangesConfig]=\"rangesConfig()\"\n    [selectedDate]=\"selectedDate()\"\n    [selectedDates]=\"selectedDates()\"\n    [selectedPeriod]=\"periodRange()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n    (dateSelected)=\"dateSelected.emit($event)\"\n    (periodSelected)=\"onPeriodSelected($event)\"\n    [showRanges]=\"showRanges()\" />\n", styles: [".ap-input-datepicker__clear ::ng-deep .icon-button:hover:not(.stroked):not(.locked),.ap-input-datepicker__clear ::ng-deep .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-input-datepicker__clear ::ng-deep .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-input-datepicker__clear:hover ::ng-deep .icon-button ap-symbol{color:var(--sys-color-error-text)}:host ::ng-deep .ap-input-group:has(.ap-input-datepicker__clear){padding-right:0}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "firstDayOfWeek", "locale", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerSelectComponent, isStandalone: true, selector: "ap-datepicker-select", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, panelHint: { classPropertyName: "panelHint", publicName: "panelHint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange", selectionRejected: "selectionRejected", opened: "opened", closed: "closed" }, host: { properties: { "class.ap-datepicker-select--open": "isOpen()", "class.ap-datepicker-select--multiple": "mode() === DatepickerMode.Multiple" }, classAttribute: "ap-datepicker-select" }, providers: [
+            withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apClose, apInfo),
+            // The vendored DaterangepickerComponent the panel renders injects LocaleService, and the plain
+            // NgxDaterangepickerMd module provides none — only its forRoot() does.
+            { provide: LOCALE_CONFIG, useValue: {} },
+            LocaleService,
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n    The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n    own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n    band above, below or beside it fell on nothing. The group is also what the panel should line up\n    with, and `toggle()` anchors the overlay to the trigger.\n\n    Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n    the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n    [apDropdownTrigger]=\"dropdown\"\n    [disabled]=\"disabled()\">\n    <div class=\"ap-datepicker-select__field\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"calendar\" />\n\n        <!--\n            The combobox is this box and not the field around it: ng-select does the same, carrying the\n            role on its inner input so the clear and the arrow stay its siblings rather than its\n            descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n            anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n            bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n        -->\n        <div\n            #overflow=\"apOverflowCount\"\n            class=\"ap-datepicker-select__values\"\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            apOverflowCount\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.tabindex]=\"disabled() ? -1 : 0\"\n            [attr.aria-controls]=\"dropdown.panelId\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            (blur)=\"touch.emit()\">\n            @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n                @for (chip of chips(); track chip.date.valueOf()) {\n                    <ap-tag\n                        apOverflowItem\n                        color=\"grey\"\n                        [mini]=\"true\"\n                        [clearable]=\"!disabled()\"\n                        (clear)=\"removeDate(chip)\">\n                        {{ chip.label }}\n                    </ap-tag>\n                }\n                @if (overflow.hiddenCount() > 0) {\n                    <ap-tag\n                        apOverflowCounter\n                        color=\"grey\"\n                        [mini]=\"true\">\n                        +{{ overflow.hiddenCount() }}\n                    </ap-tag>\n                }\n            } @else if (displayed()) {\n                <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n            } @else {\n                <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n            }\n        </div>\n\n        <!--\n            Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n            inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n            stopPropagation() in clear().\n        -->\n        @if (clearable() && hasValue() && !disabled()) {\n            <ap-icon-button\n                class=\"ap-datepicker-select__clear\"\n                type=\"flat\"\n                name=\"datepicker-clear\"\n                symbolId=\"close\"\n                ariaLabel=\"Clear selection\"\n                (click)=\"clear($event)\" />\n        }\n\n        <span class=\"ap-datepicker-select__chevron\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </span>\n    </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n    <div\n        class=\"ap-datepicker-select__timezone\"\n        apTooltipPosition=\"bottom\"\n        [apTooltip]=\"zone\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"clock\"\n            color=\"grey\" />\n        <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n    </div>\n    @if (timeZoneTooltip(); as tooltip) {\n        <ap-symbol\n            class=\"ap-datepicker-select__timezone-info\"\n            size=\"sm\"\n            symbolId=\"info\"\n            color=\"grey-blue\"\n            apTooltipPosition=\"bottom\"\n            [apTooltip]=\"tooltip\" />\n    }\n}\n\n<ap-datepicker-dropdown\n    #dropdown\n    [closeOnSelect]=\"closesOnSelect()\"\n    [dateLimit]=\"maxRangeDays()\"\n    [placement]=\"placement()\"\n    [disabled]=\"disabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [hint]=\"panelHint()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [mode]=\"mode()\"\n    [panelFooter]=\"panelFooter()\"\n    [presets]=\"presets()\"\n    [selectedDate]=\"selectedDate()\"\n    [selectedDates]=\"selectedDates()\"\n    [selectedPeriod]=\"selectedPeriod()\"\n    (closed)=\"onPanelClosed()\"\n    (dateSelected)=\"onDateSelected($event)\"\n    (opened)=\"onPanelOpened()\"\n    (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-input-datepicker', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-select', imports: [
                         DatepickerDropdownComponent,
                         DropdownTriggerDirective,
                         IconButtonComponent,
-                        InputDirective,
                         InputGroupComponent,
+                        OverflowCountDirective,
+                        OverflowCounterDirective,
+                        OverflowItemDirective,
+                        TagComponent,
                         SymbolComponent,
-                        FormFieldComponent,
-                        SymbolComponent,
-                    ], providers: [withSymbols(apCalendar, apChevronDown, apClose)], template: "<ap-form-field>\n    @let vLabel = label();\n    @if (vLabel) {\n        <label for=\"datepicker\">\n            {{ vLabel }}\n        </label>\n    }\n    <ap-input-group\n        [apDropdownTrigger]=\"datepickerDropdown\"\n        symbolPosition=\"left\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"calendar\" />\n        <input\n            apInput\n            id=\"datepicker\"\n            readonly\n            (blur)=\"onTouched()\"\n            [disabled]=\"disabled() || isDisabled()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"displayedDate()\"\n            type=\"text\" />\n        @if (clearable() && displayedDate() && !disabled() && !isDisabled()) {\n            <ap-icon-button\n                class=\"ap-input-datepicker__clear\"\n                type=\"flat\"\n                name=\"datepicker-clear\"\n                symbolId=\"close\"\n                ariaLabel=\"Clear date range\"\n                (click)=\"onClear($event)\" />\n        }\n    </ap-input-group>\n</ap-form-field>\n\n<ap-datepicker-dropdown\n    #datepickerDropdown\n    [placement]=\"placement()\"\n    [disabled]=\"disabled() || isDisabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [i18n]=\"i18n()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [mode]=\"mode()\"\n    [rangesConfig]=\"rangesConfig()\"\n    [selectedDate]=\"selectedDate()\"\n    [selectedDates]=\"selectedDates()\"\n    [selectedPeriod]=\"periodRange()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n    (dateSelected)=\"dateSelected.emit($event)\"\n    (periodSelected)=\"onPeriodSelected($event)\"\n    [showRanges]=\"showRanges()\" />\n", styles: [".ap-input-datepicker__clear ::ng-deep .icon-button:hover:not(.stroked):not(.locked),.ap-input-datepicker__clear ::ng-deep .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-input-datepicker__clear ::ng-deep .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-input-datepicker__clear:hover ::ng-deep .icon-button ap-symbol{color:var(--sys-color-error-text)}:host ::ng-deep .ap-input-group:has(.ap-input-datepicker__clear){padding-right:0}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], periodChanged: [{ type: i0.Output, args: ["periodChanged"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+                        TooltipDirective,
+                    ], providers: [
+                        withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apClose, apInfo),
+                        // The vendored DaterangepickerComponent the panel renders injects LocaleService, and the plain
+                        // NgxDaterangepickerMd module provides none — only its forRoot() does.
+                        { provide: LOCALE_CONFIG, useValue: {} },
+                        LocaleService,
+                    ], host: {
+                        class: 'ap-datepicker-select',
+                        '[class.ap-datepicker-select--open]': 'isOpen()',
+                        '[class.ap-datepicker-select--multiple]': 'mode() === DatepickerMode.Multiple',
+                    }, encapsulation: ViewEncapsulation.None, template: "<!--\n    The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n    own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n    band above, below or beside it fell on nothing. The group is also what the panel should line up\n    with, and `toggle()` anchors the overlay to the trigger.\n\n    Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n    the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n    [apDropdownTrigger]=\"dropdown\"\n    [disabled]=\"disabled()\">\n    <div class=\"ap-datepicker-select__field\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"calendar\" />\n\n        <!--\n            The combobox is this box and not the field around it: ng-select does the same, carrying the\n            role on its inner input so the clear and the arrow stay its siblings rather than its\n            descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n            anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n            bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n        -->\n        <div\n            #overflow=\"apOverflowCount\"\n            class=\"ap-datepicker-select__values\"\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            apOverflowCount\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.tabindex]=\"disabled() ? -1 : 0\"\n            [attr.aria-controls]=\"dropdown.panelId\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            (blur)=\"touch.emit()\">\n            @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n                @for (chip of chips(); track chip.date.valueOf()) {\n                    <ap-tag\n                        apOverflowItem\n                        color=\"grey\"\n                        [mini]=\"true\"\n                        [clearable]=\"!disabled()\"\n                        (clear)=\"removeDate(chip)\">\n                        {{ chip.label }}\n                    </ap-tag>\n                }\n                @if (overflow.hiddenCount() > 0) {\n                    <ap-tag\n                        apOverflowCounter\n                        color=\"grey\"\n                        [mini]=\"true\">\n                        +{{ overflow.hiddenCount() }}\n                    </ap-tag>\n                }\n            } @else if (displayed()) {\n                <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n            } @else {\n                <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n            }\n        </div>\n\n        <!--\n            Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n            inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n            stopPropagation() in clear().\n        -->\n        @if (clearable() && hasValue() && !disabled()) {\n            <ap-icon-button\n                class=\"ap-datepicker-select__clear\"\n                type=\"flat\"\n                name=\"datepicker-clear\"\n                symbolId=\"close\"\n                ariaLabel=\"Clear selection\"\n                (click)=\"clear($event)\" />\n        }\n\n        <span class=\"ap-datepicker-select__chevron\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </span>\n    </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n    <div\n        class=\"ap-datepicker-select__timezone\"\n        apTooltipPosition=\"bottom\"\n        [apTooltip]=\"zone\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"clock\"\n            color=\"grey\" />\n        <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n    </div>\n    @if (timeZoneTooltip(); as tooltip) {\n        <ap-symbol\n            class=\"ap-datepicker-select__timezone-info\"\n            size=\"sm\"\n            symbolId=\"info\"\n            color=\"grey-blue\"\n            apTooltipPosition=\"bottom\"\n            [apTooltip]=\"tooltip\" />\n    }\n}\n\n<ap-datepicker-dropdown\n    #dropdown\n    [closeOnSelect]=\"closesOnSelect()\"\n    [dateLimit]=\"maxRangeDays()\"\n    [placement]=\"placement()\"\n    [disabled]=\"disabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [hint]=\"panelHint()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [mode]=\"mode()\"\n    [panelFooter]=\"panelFooter()\"\n    [presets]=\"presets()\"\n    [selectedDate]=\"selectedDate()\"\n    [selectedDates]=\"selectedDates()\"\n    [selectedPeriod]=\"selectedPeriod()\"\n    (closed)=\"onPanelClosed()\"\n    (dateSelected)=\"onDateSelected($event)\"\n    (opened)=\"onPanelOpened()\"\n    (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, InputDatepickerComponent, RangesConfigPreset, defaultPeriodSelected };
+export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, DatepickerMonthPickerComponent, DatepickerSelectComponent, assertValueMatchesMode, defaultDatepickerPresets, isPeriod };
 //# sourceMappingURL=agorapulse-ui-components-datepicker.mjs.map