@swisspost/design-system-components 10.0.0-next.75 → 10.0.0

package/dist/collection/components/post-date-picker/post-date-picker.js

@@ -8,13 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { BUDDHIST_CALENDAR_LOCALES, BUDDHIST_CALENDAR_YEAR_OFFSET, DateValue, FALLBACK_LANGUAGE_CODE, getLocaleTextDirection, IsoDate, isValidLocale, Required, Type, UNICODE_BIDI, } from "../../utils/index";
+import { getNativeValue, NativeInputMaskElement, } from "./native-mask-element";
+import { BUDDHIST_CALENDAR_LOCALES, DateValue, FALLBACK_LANGUAGE_CODE, getLocaleTextDirection, IsoDate, isValidLocale, Required, Type, UNICODE_BIDI, } from "../../utils/index";
 import { version } from "../../../../package";
-import { Build, h, Host, } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import AirDatepicker from "air-datepicker";
 import IMask from "imask";
+import { mergeRenderCellResults, renderCellAccessibility } from "./accessibility-utils";
 import { airDatepickerLocales } from "./air-locales";
-import { DATE_FORMAT_KEYS, DATE_FORMAT_KEYS_REGEX, DATE_FORMAT_MAP, DATE_FORMAT_RANGE_SEPARATOR, DATE_FORMAT_SEPARATOR_REGEX, DATE_FORMAT_STRING_OPTIONS, TEXT_DIRECTION_MARKERS_REGEX, } from "./constants";
+import { DATE_FORMAT_MAP, DATE_FORMAT_RANGE_SEPARATOR, DATE_FORMAT_SEPARATOR_REGEX, } from "./constants";
+import { dateToIso, dateToString, getDateFormat, isoToDate, isValidDate, padIsoDate, stringToDate, } from "./date-utils";
 export class PostDatePicker {
     constructor() {
         /**
@@ -35,22 +38,23 @@ export class PostDatePicker {
         this.today = new Date();
         this.startDate = new Date();
         this.currentViewType = 'days';
+        this._isInternalUpdate = false;
+        this._lastInputValue = null;
         this.skipOnSelectCount = 0;
         this.skipFocusOnNextRender = false;
         this.handleInputBlur = () => {
             if (this.range) {
-                const dates = this.inputMask.value.split(this.dateFormatRangeSeparator);
-                const start = this.stringToDate(dates[0]);
-                const end = this.stringToDate(dates[1]);
-                const startValid = this.isValidDate(start);
-                const endValid = this.isValidDate(end);
+                const parts = this.inputMask.value.split(this.dateFormatRangeSeparator);
+                const start = this.stringToDate(parts[0]);
+                const end = this.stringToDate(parts[1]);
+                const startValid = isValidDate(start);
+                const endValid = isValidDate(end);
                 if (startValid && endValid) {
                     // Check if user entered dates in wrong order
                     const reversed = start > end;
                     this.skipOnSelectCount = reversed ? 0 : 2; // don't skip if reversed
                     this.dpInstance.selectDate([start, end]);
                     this.dpInstance.setViewDate(start);
-                    this.postUpdateDates.emit([this.dateToIso(start), this.dateToIso(end)]);
                 }
                 else if (startValid && !endValid) {
                     this.dpInstance.clear();
@@ -63,16 +67,16 @@ export class PostDatePicker {
             }
             else {
                 const date = this.stringToDate(this.inputMask.value);
-                if (this.isValidDate(date)) {
+                if (isValidDate(date)) {
                     this.skipOnSelectCount = 1;
                     this.dpInstance.selectDate(date);
                     this.dpInstance.setViewDate(date);
-                    this.postUpdateDates.emit(this.dateToIso(date));
                 }
                 else {
                     this.resetSelection();
                 }
             }
+            this.emitInputEvents();
         };
         this.handlePrevNextClick = () => {
             this.skipFocusOnNextRender = true;
@@ -188,6 +192,17 @@ export class PostDatePicker {
                 this.setActiveCell(newDate, true);
             }
         };
+        // Suppress native input events fired while typing when the ISO value hasn't actually changed
+        this.handleInputEvent = (e) => {
+            if (this.maskElement.allowEvents)
+                return;
+            const currentValue = this.serializeIsoValue();
+            if (currentValue === this._lastInputValue) {
+                e.stopImmediatePropagation();
+                return;
+            }
+            this._lastInputValue = currentValue;
+        };
         // Skip the month view and go directly to year selection
         this.forceTitleClickToYear = () => {
             if (this.dpInstance) {
@@ -211,12 +226,25 @@ export class PostDatePicker {
     }
     updateRange() {
         this.dpInstance?.update({ range: this.range });
-        this.handleSelectedDates();
         this.updateMask();
+        if (this.range && this.dpInstance?.selectedDates.length > 0) {
+            const startDate = this.dpInstance.selectedDates[0];
+            this.dpInstance.clear();
+            this.dpInstance.selectDate(startDate);
+        }
+        else {
+            this.syncInputToDp();
+        }
+    }
+    updateMin() {
+        this.dpInstance?.update({ minDate: this.min ? isoToDate(this.min) : false });
+    }
+    updateMax() {
+        this.dpInstance?.update({ maxDate: this.max ? isoToDate(this.max) : false });
     }
     validateInline() {
-        if (!this.inline && !this.dpInput) {
-            console.error('A non-inline date picker should contain one input');
+        if (!this.dpInput) {
+            console.error('The date picker must contain one input element');
         }
     }
     /**
@@ -224,6 +252,7 @@ export class PostDatePicker {
      */
     async show() {
         if (this.popoverRef) {
+            this.dpInstance?.setCurrentView('days');
             await this.popoverRef.show(this.dpInput);
             this.enhanceAccessibility();
             this.host.shadowRoot.removeEventListener('keydown', this.handleTab, true); // remove before adding
@@ -251,7 +280,8 @@ export class PostDatePicker {
     get systemLocale() {
         if (Build.isServer)
             return FALLBACK_LANGUAGE_CODE;
-        return this.host.closest('[lang]')?.getAttribute('lang') ?? FALLBACK_LANGUAGE_CODE;
+        const closestLang = this.host.closest('[lang]')?.getAttribute('lang');
+        return closestLang ?? navigator.language ?? FALLBACK_LANGUAGE_CODE;
     }
     /**
      * Get the locale code to use for the date picker, ensuring it is valid and applying fallback if necessary.
@@ -271,17 +301,7 @@ export class PostDatePicker {
      * with format keys (y, m, d). For example, it will return "dd.mm.yyyy" for "de-CH" locale and "mm/dd/yyyy" for "en-US" locale.
      */
     get dateFormat() {
-        const date = new Date(Object.values(DATE_FORMAT_MAP).join('-'));
-        // get the locale date format e.g. `22.11.3333` for `de-CH` or `11/22/3333` for `en-US`
-        let localeDateString = date.toLocaleDateString(this.localeCode, DATE_FORMAT_STRING_OPTIONS);
-        // replace the date parts (3333, 11, 22) with the corresponding format keys (y, m, d)
-        for (const [key, value] of Object.entries(DATE_FORMAT_MAP)) {
-            // for Thai locale, the year is in Buddhist calendar which is 543 years ahead of Gregorian calendar, so we need to adjust the year value accordingly
-            localeDateString = localeDateString.replace(this.isBuddhistCalendar && value.length === 4
-                ? (Number(value) + BUDDHIST_CALENDAR_YEAR_OFFSET).toString()
-                : value, key);
-        }
-        return localeDateString;
+        return getDateFormat(this.localeCode, this.isBuddhistCalendar);
     }
     /**
      * Determine the text direction (ltr or rtl) based on the language code, to apply the correct styles and layout to the date picker.
@@ -315,70 +335,16 @@ export class PostDatePicker {
         return module.default;
     }
     /**
-     * Convert a date object to a localized date string and vice versa.
-     * @param date A localtime date object.
-     * @returns A localized date string, depending on the given `localeCode` and the given `options`.
+     * Convert a date object to a localized date string, bound to the current locale.
      */
     dateToString(date) {
-        const dateString = date.toLocaleDateString(this.localeCode, DATE_FORMAT_STRING_OPTIONS);
-        const yearString = date.getFullYear().toString();
-        if (yearString.length < 4) {
-            return dateString.replace(yearString, yearString.padStart(4, '0'));
-        }
-        return dateString;
+        return dateToString(date, this.localeCode);
     }
     /**
-     * Convert a localized date string to a date object.
-     * The date string should be in the same format as the date picker's `dateFormat`, which depends on the given `localeCode`.
-     * @param localeDateString A localized date string.
-     * @returns A localtime date object.
+     * Convert a localized date string to a date object, bound to the current locale and format.
      */
     stringToDate(localeDateString) {
-        // Match the separator chars in the date format (e.g. "." for "dd.mm.yyyy", etc.).
-        const dateSeparator = this.dateFormat.match(DATE_FORMAT_SEPARATOR_REGEX)[0];
-        // Remove the text direction markers, split the date string into its parts (e.g. ["31", "01", "2026"], etc.)
-        // and make sure its values only contains digits (e.g. for "bg-BG", etc.).
-        const dateParts = localeDateString
-            .replace(TEXT_DIRECTION_MARKERS_REGEX, '')
-            .split(dateSeparator)
-            .map(p => p.replaceAll(/[^\d]/g, ''));
-        // Split the dateFormat into its parts to get the year, month, day order (e.g. ["d", "m", "y"], etc.).
-        // Removing everything else but the DATE_FORMAT_KEYS is necessary to support date formats with additional chars (e.g. "d.m.y г.", etc.).
-        const formatParts = this.dateFormat.replace(DATE_FORMAT_KEYS_REGEX, '').split('');
-        // Map the datePart values to their corresponding keys (e.g. y, m, d),
-        // to construct an ISO date string (e.g. "2026-01-31") that can be parsed by the Date constructor.
-        // This is necessary because different locale date formats may have different orders (e.g. "ymd", "dmy", "mdy", etc.).
-        const { y, m, d } = DATE_FORMAT_KEYS.reduce((parts, key) => ({
-            ...parts,
-            [key]: dateParts[formatParts.indexOf(key)],
-        }), {});
-        // Adjust for Thai Buddhist calendar
-        const year = this.isBuddhistCalendar
-            ? (Number(y) - BUDDHIST_CALENDAR_YEAR_OFFSET).toString()
-            : y;
-        return this.isoToDate([year, m, d].join('-'));
-    }
-    /**
-     * Convert a date object to an ISO 8601 formatted date string (YYYY-MM-DD) and vice versa.
-     * @param date A localtime date object.
-     * @returns An iso formatted, localtime date string.
-     */
-    dateToIso(date) {
-        // The swedish locale (`sv`) happens to format the date in the exact ISO format (YYYY-MM-DD),
-        // so we can use it as a shortcut instead of manually constructing the string from the date parts.
-        return date.toLocaleDateString('sv', DATE_FORMAT_STRING_OPTIONS);
-    }
-    /**
-     * Convert an ISO 8601 formatted date string (YYYY-MM-DD) to a localtime date object.
-     * @param isoDateString An iso formatted, localtime date string.
-     * @returns A localtime date object.
-     */
-    isoToDate(isoDateString) {
-        return new Date(`${this.padIsoDate(isoDateString)}T00:00`);
-    }
-    padIsoDate(isoDateString) {
-        const valueParts = isoDateString.split('-');
-        return `${valueParts[0].padStart(4, '0')}-${valueParts[1]}-${valueParts[2]}`;
+        return stringToDate(localeDateString, this.dateFormat, this.isBuddhistCalendar);
     }
     setupInputObserver() {
         if (typeof MutationObserver === 'undefined')
@@ -518,7 +484,9 @@ export class PostDatePicker {
         });
         body.removeEventListener('keydown', this.handleGridKeydown);
         body.addEventListener('keydown', this.handleGridKeydown);
-        this.setActiveCell((this.selectedStartDate && this.isoToDate(this.selectedStartDate)) || this.today, focusOnDate);
+        const dates = this.getIsoDates();
+        const selectedDate = dates[0] ? isoToDate(dates[0]) : null;
+        this.setActiveCell(selectedDate || this.today, focusOnDate);
     }
     /**
      * Set up the masks on the inputs to reflect the date pickers
@@ -526,7 +494,7 @@ export class PostDatePicker {
     setUpMask() {
         // WARNING: using the DATE_FORMAT_SEPARATOR_REGEX is mandatory here,
         // because `this.dateFormat` can possibly contain unicode bidi characters!
-        const maskPattern = this.dateFormat; //.replace(DATE_FORMAT_SEPARATOR_REGEX, m => `${m}\``);
+        const maskPattern = this.dateFormat.replace(DATE_FORMAT_SEPARATOR_REGEX, m => `${m}\``);
         const baseMaskOptions = {
             mask: Date,
             pattern: maskPattern,
@@ -535,7 +503,7 @@ export class PostDatePicker {
             blocks: {
                 y: {
                     mask: IMask.MaskedRange,
-                    from: 101, // dates from 0100-01-31 and earlier are causing issues in air-datepicker
+                    from: 1000,
                     to: 9999,
                     maxLength: 4,
                     placeholderChar: Object.keys(DATE_FORMAT_MAP)[0],
@@ -553,8 +521,10 @@ export class PostDatePicker {
                     placeholderChar: Object.keys(DATE_FORMAT_MAP)[2],
                 },
             },
-            min: this.min ? new Date(`${this.padIsoDate(this.min)}T00:00`) : null,
-            max: this.max ? new Date(`${this.padIsoDate(this.max)}T00:00`) : null,
+            min: this.min ? new Date(`${padIsoDate(this.min)}T00:00`) : null,
+            max: this.max ? new Date(`${padIsoDate(this.max)}T00:00`) : null,
+            autofix: true,
+            eager: true,
         };
         const singleMaskOptions = {
             ...baseMaskOptions,
@@ -562,7 +532,7 @@ export class PostDatePicker {
             overwrite: true,
         };
         const rangeMaskOptions = {
-            mask: `from${this.dateFormatRangeSeparator}to`,
+            mask: `from\`${this.dateFormatRangeSeparator}to`,
             blocks: {
                 from: { ...baseMaskOptions },
                 to: { ...baseMaskOptions },
@@ -570,29 +540,109 @@ export class PostDatePicker {
             lazy: false,
             overwrite: true,
         };
-        this.inputMask = IMask(this.dpInput, this.range ? rangeMaskOptions : singleMaskOptions);
+        this.maskElement = new NativeInputMaskElement(this.dpInput);
+        this.inputMask = IMask(this.maskElement, this.range ? rangeMaskOptions : singleMaskOptions);
     }
     updateMask() {
         if (!this.inline) {
             this.inputMask.destroy();
             this.setUpMask();
+            this.setupValueOverride();
             if (this.dpInstance.selectedDates.length > 0) {
-                if (this.range) {
-                    this.inputMask.value = this.dpInstance.selectedDates
-                        .map(d => this.dateToString(d))
-                        .join(this.dateFormatRangeSeparator);
-                }
-                else {
-                    this.inputMask.value = this.dateToString(this.dpInstance.selectedDates[0]);
-                }
+                this.inputMask.value = this.formatDatesForMask(this.dpInstance.selectedDates);
             }
         }
     }
+    // Override input.value so external consumers get ISO strings
+    // while iMask continues to work with locale-formatted display text via NativeInputMaskElement
+    setupValueOverride() {
+        if (!this.dpInput)
+            return;
+        Object.defineProperty(this.dpInput, 'value', {
+            get: this.getInputIsoValue.bind(this),
+            set: this.setInputIsoValue.bind(this),
+            configurable: true,
+            enumerable: true,
+        });
+    }
+    getIsoDates() {
+        const nativeVal = getNativeValue(this.dpInput);
+        const DIGITS_PER_DATE = 8; // dd(2) + mm(2) + yyyy(4)
+        if (!this.range) {
+            const digits = nativeVal?.replaceAll(/\D/g, '') ?? '';
+            if (digits.length < DIGITS_PER_DATE)
+                return [];
+            const date = this.stringToDate(nativeVal);
+            return date && isValidDate(date) ? [dateToIso(date)] : [];
+        }
+        const parts = nativeVal?.split(this.dateFormatRangeSeparator) ?? [];
+        const startDigits = parts[0]?.replaceAll(/\D/g, '') ?? '';
+        const endDigits = parts[1]?.replaceAll(/\D/g, '') ?? '';
+        const start = startDigits.length >= DIGITS_PER_DATE ? this.stringToDate(parts[0]) : null;
+        const end = endDigits.length >= DIGITS_PER_DATE ? this.stringToDate(parts[1]) : null;
+        const result = [];
+        if (start && isValidDate(start))
+            result.push(dateToIso(start));
+        if (end && isValidDate(end))
+            result.push(dateToIso(end));
+        return result;
+    }
+    getInputIsoValue() {
+        const dates = this.getIsoDates();
+        if (!this.range) {
+            return dates[0] ?? '';
+        }
+        return dates;
+    }
+    serializeIsoValue() {
+        return JSON.stringify(this.getIsoDates());
+    }
+    setInputIsoValue(val) {
+        if (this._isInternalUpdate)
+            return;
+        this._isInternalUpdate = true;
+        try {
+            let isoValues;
+            if (Array.isArray(val)) {
+                isoValues = val;
+            }
+            else {
+                isoValues = val ? val.split(',').map(s => s.trim()) : [];
+            }
+            const dates = isoValues
+                .filter(Boolean)
+                .map(iso => isoToDate(iso))
+                .filter(d => d && isValidDate(d));
+            if (dates.length === 0) {
+                this.inputMask.value = '';
+                this.dpInstance?.clear();
+                return;
+            }
+            this.inputMask.value = this.formatDatesForMask(dates);
+            this.dpInstance?.clear();
+            this.dpInstance?.selectDate(this.range ? dates : dates[0]);
+            this.dpInstance?.setViewDate(dates[0]);
+        }
+        finally {
+            this._isInternalUpdate = false;
+        }
+    }
     async configDatePicker() {
         const locale = await this.airLocale();
-        if (!this.inline) {
-            this.dpInput = this.host.querySelector('input');
-            this.setUpMask();
+        this.dpInput = this.host.querySelector('input');
+        if (!this.dpInput) {
+            console.error('The post-date-picker component requires a slotted <input> element.');
+            return;
+        }
+        this.dpInput.type = this.inline ? 'hidden' : 'text';
+        // Capture and clear initial value before mask setup, since iMask would
+        // interpret an ISO string as locale-formatted text and garble it
+        const initialValue = this.dpInput.value;
+        this.dpInput.value = '';
+        this.setUpMask();
+        this.setupValueOverride();
+        if (initialValue) {
+            this.setInputIsoValue(initialValue);
         }
         this.dpContainer = this.host.shadowRoot.querySelector('.datepicker-container');
         if (this.dpContainer) {
@@ -611,8 +661,8 @@ export class PostDatePicker {
                 showOtherMonths: false,
                 moveToOtherMonthsOnSelect: true,
                 startDate: this.startDate,
-                minDate: this.min,
-                maxDate: this.max,
+                minDate: this.min ? isoToDate(this.min) : undefined,
+                maxDate: this.max ? isoToDate(this.max) : undefined,
                 locale: locale,
                 dateFormat: locale.dateFormat,
                 firstDay: locale.firstDay,
@@ -629,8 +679,14 @@ export class PostDatePicker {
                     this.updateNavigationButtonLabels();
                 },
                 onSelect: ({ date }) => {
-                    if (!date || (Array.isArray(date) && date.length === 0))
+                    // Handle deselection (clicking the same date again)
+                    if (!date || (Array.isArray(date) && date.length === 0)) {
+                        if (this._isInternalUpdate)
+                            return;
+                        this.inputMask.value = '';
+                        this.emitInputEvents();
                         return;
+                    }
                     this.getCells().forEach(c => {
                         c.setAttribute('aria-selected', c.classList.contains('-selected-') ? 'true' : 'false');
                     });
@@ -639,33 +695,19 @@ export class PostDatePicker {
                         this.skipOnSelectCount--;
                         return;
                     }
-                    // update props
-                    if (Array.isArray(date) && date.length === 2) {
-                        this.selectedStartDate = this.dateToIso(date[0]);
-                        this.selectedEndDate = this.dateToIso(date[1]);
-                    }
-                    else if (!Array.isArray(date)) {
-                        this.selectedStartDate = this.dateToIso(date);
-                        this.selectedEndDate = undefined;
+                    // If this selection was triggered by the value setter, don't re-emit
+                    if (this._isInternalUpdate)
+                        return;
+                    const dates = Array.isArray(date) ? date : [date];
+                    const isPartialRange = this.range && dates.length === 1;
+                    // Update the input mask value and emit events
+                    this.inputMask.value = this.formatDatesForMask(dates);
+                    this.emitInputEvents();
+                    // If range & only one date has been selected, user should stay in the DP
+                    if (isPartialRange) {
+                        return;
                     }
-                    this.postUpdateDates.emit(Array.isArray(date) ? date.map(d => this.dateToIso(d)) : this.dateToIso(date));
-                    // Assign value to the input, close the popover and focus on the input
-                    if (this.dpInput) {
-                        if (Array.isArray(date)) {
-                            this.inputMask.value = date
-                                .map(d => this.dateToString(d))
-                                .join(this.dateFormatRangeSeparator);
-                            this.updateInputValue();
-                        }
-                        else if (date) {
-                            // If there is a date, set it to the input. No date = same date as before
-                            this.inputMask.value = this.dateToString(date);
-                            this.updateInputValue();
-                        }
-                        // If range & only one date has been selected, user should stay in the DP
-                        if (this.range && Array.isArray(date) && date.length === 1) {
-                            return;
-                        }
+                    if (!this.inline) {
                         this.popoverRef?.hide();
                         requestAnimationFrame(() => this.dpTrigger.focus());
                     }
@@ -674,41 +716,46 @@ export class PostDatePicker {
                     this.enhanceAccessibility();
                 },
                 onRenderCell: data => {
-                    const internal = this.internalOnRenderCell(data);
-                    const custom = this.renderCellCallback?.(data);
-                    return this.mergeRenderCellResults(internal, custom);
+                    const internal = renderCellAccessibility(data, this.localeCode);
+                    const custom = this.cellConfig?.(data.date, data.cellType);
+                    return mergeRenderCellResults(internal, custom);
                 },
             };
             this.dpInstance = new AirDatepicker(this.dpContainer, options);
             this.reorderNavigation();
             this.prevBtn?.addEventListener('click', this.handlePrevNextClick);
             this.nextBtn?.addEventListener('click', this.handlePrevNextClick);
-            this.handleSelectedDates();
+            this.syncInputToDp();
         }
     }
-    updateInputValue() {
+    emitInputEvents() {
         this.inputMask.updateValue();
-        // Emit the native input and change events
+        const currentValue = this.serializeIsoValue();
+        if (currentValue === this._lastInputValue) {
+            return;
+        }
+        this._lastInputValue = currentValue;
+        this.maskElement.allowEvents = true;
         this.dpInput.dispatchEvent(new InputEvent('input', { bubbles: true }));
         this.dpInput.dispatchEvent(new InputEvent('change', { bubbles: true }));
+        this.maskElement.allowEvents = false;
     }
-    handleSelectedDates() {
+    formatDatesForMask(dates) {
+        if (dates.length === 0)
+            return '';
         if (this.range) {
-            if ((this.selectedStartDate && !this.selectedEndDate) ||
-                (!this.selectedStartDate && this.selectedEndDate)) {
-                console.error('The range date picker expects either no selected dates or both of them defined.');
-            }
-            else if (this.selectedStartDate && this.selectedEndDate) {
-                this.dpInstance.selectDate([
-                    this.isoToDate(this.selectedStartDate),
-                    this.isoToDate(this.selectedEndDate),
-                ]);
-            }
+            return dates.map(d => this.dateToString(d)).join(this.dateFormatRangeSeparator);
         }
-        else {
-            if (this.selectedStartDate && this.isoToDate(this.selectedStartDate)) {
-                this.dpInstance.selectDate(this.isoToDate(this.selectedStartDate));
-            }
+        return this.dateToString(dates[0]);
+    }
+    syncInputToDp() {
+        const isoDates = this.getIsoDates();
+        if (isoDates.length === 0)
+            return;
+        const dates = isoDates.map(iso => isoToDate(iso)).filter(d => d && isValidDate(d));
+        if (dates.length > 0) {
+            this.dpInstance.selectDate(this.range ? dates : dates[0]);
+            this.dpInstance.setViewDate(dates[0]);
         }
     }
     attachTitleBtnListener() {
@@ -720,67 +767,6 @@ export class PostDatePicker {
             this.titleBtn.addEventListener('click', this.forceTitleClickToYear, { capture: true });
         });
     }
-    /**
-     * Add role and aria-label to each grid cell
-     */
-    internalOnRenderCell({ date, cellType }) {
-        if (cellType === 'day') {
-            return {
-                attrs: {
-                    'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(this.localeCode, {
-                        weekday: 'long',
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
-                    }),
-                },
-            };
-        }
-        else if (cellType === 'month') {
-            return {
-                attrs: {
-                    'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(this.localeCode, {
-                        year: 'numeric',
-                        month: 'long',
-                    }),
-                },
-            };
-        }
-        else if (cellType === 'year') {
-            return {
-                attrs: {
-                    'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(this.localeCode, {
-                        year: 'numeric',
-                    }),
-                },
-            };
-        }
-    }
-    /**
-     * Merge the internal render cell (adding of role + aria-label attributes) and the user's render cell (disabling dates, etc.)
-     * @param base Internal render cell
-     * @param custom User render cell
-     * @returns Merged render cell
-     */
-    mergeRenderCellResults(base, custom) {
-        if (!base)
-            return custom;
-        if (!custom)
-            return base;
-        return {
-            ...base,
-            ...custom,
-            attrs: {
-                ...(base.attrs ?? {}),
-                ...(custom.attrs ?? {}),
-            },
-            classes: [base.classes, custom.classes].filter(Boolean).join(' '),
-            disabled: base.disabled || custom.disabled,
-        };
-    }
     setupNavObserver() {
         if (typeof MutationObserver === 'undefined')
             return;
@@ -826,17 +812,16 @@ export class PostDatePicker {
         });
     }
     addInputListener() {
-        this.dpInput.addEventListener('blur', this.handleInputBlur);
+        this._lastInputValue = this.serializeIsoValue();
+        if (!this.inline) {
+            this.dpInput.addEventListener('blur', this.handleInputBlur);
+        }
+        this.dpInput.addEventListener('input', this.handleInputEvent);
     }
     resetSelection() {
         this.skipOnSelectCount = 0;
         this.dpInstance.clear();
         this.dpInstance.setViewDate(this.today);
-        this.selectedStartDate = undefined;
-        this.selectedEndDate = undefined;
-    }
-    isValidDate(date) {
-        return date instanceof Date && !Number.isNaN(date.getTime());
     }
     syncDatePickerState() {
         this.inputDisabled = this.dpInput.disabled;
@@ -848,15 +833,11 @@ export class PostDatePicker {
         this.setupInputObserver();
         this.validateLocale();
         this.validateInline();
+        this.addInputListener();
+        this.syncDatePickerState();
         if (this.inline) {
             requestAnimationFrame(() => this.enhanceAccessibility(false));
         }
-        else {
-            this.addInputListener();
-            requestAnimationFrame(() => {
-                this.syncDatePickerState();
-            });
-        }
     }
     disconnectedCallback() {
         this.host.shadowRoot?.removeEventListener('keydown', this.handleTab, true);
@@ -866,6 +847,7 @@ export class PostDatePicker {
         this.prevBtn?.removeEventListener('click', this.handlePrevNextClick);
         this.nextBtn?.removeEventListener('click', this.handlePrevNextClick);
         this.dpInput?.removeEventListener('blur', this.handleInputBlur);
+        this.dpInput?.removeEventListener('input', this.handleInputEvent);
         this.gridObserver?.disconnect();
         this.navObserver?.disconnect();
         this.inputObserver?.disconnect();
@@ -875,11 +857,11 @@ export class PostDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: 'c4cc0eb142d566fa9ba70272cd9ff21c433c4137', "data-version": version }, this.inline && h("div", { key: '8611e4dcfc77187799261e6187304ac1cf46b7c2', class: "datepicker-container", dir: this.textDirection }), !this.inline && (h("div", { key: '5581acfe5acf7ae1d1e445c53870b235f4b18646', dir: this.textDirection }, h("div", { key: 'e24d9772613c92916b6d38e79352fef2c81d9511', class: {
+        return (h(Host, { key: 'e5eeee8c1cb2cc1f63bdf74077a23410e7fdc8e9', "data-version": version }, this.inline && (h("div", { key: '9518bcce6cfd31747c03fb46f8c27ebc58f3dbfc', dir: this.textDirection }, h("slot", { key: '4cf06d1fc9ff12d8f471860166a4561218e3a8c3' }), h("div", { key: '79b7a64d5f4f0ed1ec8e484f93f985da7f060ec2', class: "datepicker-container" }))), !this.inline && (h("div", { key: '2c579c73dcbfab1fc3ba207a97638415815f317d', dir: this.textDirection }, h("div", { key: '80969517b53c43a6c94e2452220f344f3ab49e34', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, h("slot", { key: 'c844d9615f779430969e5d794a903aa30f06f24c' }), h("button", { key: 'cae3200ceb21aa35b3dd443c19875af4cbdc82a4', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: 'c6c51b1021aee6726bb01c24ec0fd532e4a41e49', name: "calendar" }))), h("post-popovercontainer", { key: '1c4bccada0ae38c80fa20ae7602510bd0c841757', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '8dcf519dbf39b8312275ade1b267dc9660c0ffb4', class: "datepicker-container" }))))));
+            } }, h("slot", { key: 'a52d67dd7a762f7811c574c54a5e04864a6d7d66' }), h("button", { key: '68f891aa03c93ef515430cb7849184eba54bd03e', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: '5d9544388a2017906575e1dba8186641a556d09f', name: "calendar" }))), h("post-popovercontainer", { key: '646481b281bb1df3e856fab125fad3eb6bcc3f6d', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '3482284992582511e01ac60832ca119f54905b56', class: "datepicker-container" }))))));
     }
     static get is() { return "post-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -935,44 +917,6 @@ export class PostDatePicker {
                 "attribute": "range",
                 "defaultValue": "false"
             },
-            "selectedStartDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The date picker's selected date. If in range mode, the selected start date.\nMust be a valid date in ISO 8601 format (YYYY-MM-DD)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-start-date"
-            },
-            "selectedEndDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The date picker's selected end date (for range date picker only).\nMust be a valid date in ISO 8601 format (YYYY-MM-DD)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-end-date"
-            },
             "min": {
                 "type": "string",
                 "mutable": false,
@@ -985,7 +929,7 @@ export class PostDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Minimun possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD)."
+                    "text": "Minimum possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1011,17 +955,16 @@ export class PostDatePicker {
                 "reflect": false,
                 "attribute": "max"
             },
-            "renderCellCallback": {
+            "cellConfig": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "AirDatepickerCustomOptions['onRenderCell']",
-                    "resolved": "(data: { date: Date; cellType: AirDatepickerViewsSingle; datepicker: AirDatepicker<HTMLDivElement>; }) => void",
+                    "original": "(\n    date: Date,\n    cellType: 'day' | 'month' | 'year',\n  ) => { disabled?: boolean; classes?: string } | void",
+                    "resolved": "(date: Date, cellType: \"day\" | \"month\" | \"year\") => void | { disabled?: boolean; classes?: string; }",
                     "references": {
-                        "AirDatepickerCustomOptions": {
-                            "location": "local",
-                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-date-picker/post-date-picker.tsx",
-                            "id": "src/components/post-date-picker/post-date-picker.tsx::AirDatepickerCustomOptions"
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
                         }
                     }
                 },
@@ -1029,7 +972,7 @@ export class PostDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Used to extend the existing on render cell to disable dates."
+                    "text": "A callback to customize individual calendar cells, e.g. to disable specific dates or add CSS classes."
                 },
                 "getter": false,
                 "setter": false
@@ -1199,7 +1142,7 @@ export class PostDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Label for the toggle button that opens the calendar.\nIt is only needed when the calendar is connected to the input."
+                    "text": "Label for the toggle button that opens the calendar.\nIt is only needed when the calendar is not inline."
                 },
                 "getter": false,
                 "setter": false,
@@ -1215,24 +1158,6 @@ export class PostDatePicker {
             "startDate": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "postUpdateDates",
-                "name": "postUpdateDates",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "An event emitted when a date or a range of dates have been selected."
-                },
-                "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "show": {
@@ -1282,6 +1207,12 @@ export class PostDatePicker {
             }, {
                 "propName": "range",
                 "methodName": "updateRange"
+            }, {
+                "propName": "min",
+                "methodName": "updateMin"
+            }, {
+                "propName": "max",
+                "methodName": "updateMax"
             }, {
                 "propName": "inline",
                 "methodName": "validateInline"
@@ -1289,14 +1220,6 @@ export class PostDatePicker {
     }
 }
 PostDatePicker.FLYOUT_OFFSET = 4;
-__decorate([
-    DateValue(),
-    IsoDate()
-], PostDatePicker.prototype, "selectedStartDate", void 0);
-__decorate([
-    DateValue(),
-    IsoDate()
-], PostDatePicker.prototype, "selectedEndDate", void 0);
 __decorate([
     DateValue(),
     IsoDate()