npm - @swisspost/design-system-components - Versions diffs - 10.0.0-next.68 → 10.0.0-next.69 - Mend

@swisspost/design-system-components 10.0.0-next.68 → 10.0.0-next.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (462) hide show

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

@@ -1,12 +1,17 @@
-import { h, Host, Build, } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
+import { version } from "../../../../package";
 import AirDatepicker from "air-datepicker";
+import { airDatepickerLocales } from "./air-locales";
 import IMask from "imask";
-import { localesMap } from "./locales";
-import { checkEmptyOrDate, checkRequiredAndType, checkIsoDate, isIsoDate } from "../../utils/index";
+import { checkEmptyOrDate, checkRequiredAndType, checkIsoDate, getLocaleTextDirection, isValidLocale, BUDDHIST_CALENDAR_YEAR_OFFSET, BUDDHIST_CALENDAR_LOCALES, UNICODE_BIDI, FALLBACK_LANGUAGE_CODE, } from "../../utils/index";
+import { TEXT_DIRECTION_MARKERS_REGEX, DATE_FORMAT_RANGE_SEPARATOR, DATE_FORMAT_MAP, DATE_FORMAT_KEYS, DATE_FORMAT_KEYS_REGEX, DATE_FORMAT_SEPARATOR_REGEX, DATE_FORMAT_STRING_OPTIONS, } from "./constants";
 export class PostDatePicker {
     constructor() {
-        this.today = new Date();
-        this.inputDisabled = false;
+        /**
+         * The date pickers locale (e.g. "it", "it-CH", etc.), which specifies the date format and language.
+         * <post-banner type="info" data-size="sm"><span>If not set, it defaults to either the closest ancestor with a `lang` attribute (e.g. \<html lang="de"\>), or falls back to English.</span></post-banner>
+         */
+        this.locale = this.systemLocale;
         /**
          * Whether the date picker expects a range selection or a single date selection.
          *
@@ -16,17 +21,17 @@ export class PostDatePicker {
          * Whether the calendar is inline in the page (not showing in a popover when input clicked).
          */
         this.inline = false;
+        this.inputDisabled = false;
+        this.today = new Date();
         this.startDate = new Date();
-        this.locale = Build.isBrowser ? document.documentElement.lang : 'en';
         this.currentViewType = 'days';
-        this.euFormat = true;
         this.skipOnSelectCount = 0;
         this.skipFocusOnNextRender = false;
         this.handleInputBlur = () => {
             if (this.range) {
-                const dates = this.splitRangeDates(this.inputMask.value);
-                const start = this.dateStrToDate(dates[0]);
-                const end = this.dateStrToDate(dates[1]);
+                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);
                 if (startValid && endValid) {
@@ -35,6 +40,7 @@ export class PostDatePicker {
                     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();
@@ -46,11 +52,12 @@ export class PostDatePicker {
                 }
             }
             else {
-                const date = this.dateStrToDate(this.inputMask.value);
+                const date = this.stringToDate(this.inputMask.value);
                 if (this.isValidDate(date)) {
                     this.skipOnSelectCount = 1;
                     this.dpInstance.selectDate(date);
                     this.dpInstance.setViewDate(date);
+                    this.postUpdateDates.emit(this.dateToIso(date));
                 }
                 else {
                     this.resetSelection();
@@ -178,6 +185,25 @@ export class PostDatePicker {
             }
         };
     }
+    validateLocale() {
+        if (!isValidLocale(this.locale)) {
+            console.error('The prop `locale` of the `post-date-picker` component must be a valid localeCode (e.g. `en`, `en-GB`, etc.), based on <a href="https://www.rfc-editor.org/info/bcp47">BCP 47 (RFC 5646)</a> standard.');
+        }
+    }
+    async updateLocale() {
+        const locale = await this.airLocale();
+        this.dpInstance?.update({
+            locale: locale,
+            dateFormat: locale.dateFormat,
+            firstDay: locale.firstDay,
+        });
+        this.updateMask();
+    }
+    updateRange() {
+        this.dpInstance?.update({ range: this.range });
+        this.handleSelectedDates();
+        this.updateMask();
+    }
     validateSelectedStartDate() {
         checkEmptyOrDate(this, 'selectedStartDate');
         checkIsoDate(this, 'selectedStartDate');
@@ -250,6 +276,142 @@ export class PostDatePicker {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    /**
+     * Get the system locale (e.g.`en`, etc.) from the closest parent with a `lang` attribute,
+     * or fallback to a default language code if not found or in server environment.
+     */
+    get systemLocale() {
+        if (Build.isServer)
+            return FALLBACK_LANGUAGE_CODE;
+        return this.host.closest('[lang]')?.getAttribute('lang') ?? FALLBACK_LANGUAGE_CODE;
+    }
+    /**
+     * Get the locale code to use for the date picker, ensuring it is valid and applying fallback if necessary.
+     * @info Use `this.localeCode` or `this.languageCode`, instead of `this.locale` when you need to get the
+     * locale for the date picker, to ensure you get a valid locale code with fallback applied.
+     * `this.locale` can still be used when you want to get the exact value of the `locale` prop without fallback or validation.
+     */
+    get localeCode() {
+        const locale = this.locale ?? FALLBACK_LANGUAGE_CODE;
+        return isValidLocale(locale) ? locale : FALLBACK_LANGUAGE_CODE;
+    }
+    get languageCode() {
+        return this.localeCode.split('-')[0];
+    }
+    /**
+     * Get the date format string for the current locale, by formatting a sample date and replacing the date parts
+     * 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;
+    }
+    /**
+     * Determine the text direction (ltr or rtl) based on the language code, to apply the correct styles and layout to the date picker.
+     * Use `new Locale(this.localeCode).getTextInfo().direction` as soon as it becomes baseline:
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
+     */
+    get textDirection() {
+        return getLocaleTextDirection(this.localeCode);
+    }
+    get dateFormatRangeSeparator() {
+        return this.textDirection === 'rtl'
+            ? `${UNICODE_BIDI.rtl}${DATE_FORMAT_RANGE_SEPARATOR}${UNICODE_BIDI.pop}`
+            : DATE_FORMAT_RANGE_SEPARATOR;
+    }
+    get isBuddhistCalendar() {
+        return BUDDHIST_CALENDAR_LOCALES.includes(this.localeCode);
+    }
+    /**
+     * Dynamically load the appropriate locale module for the date picker.
+     * @returns The locale module for the Air date picker.
+     */
+    async airLocale() {
+        let localeName = FALLBACK_LANGUAGE_CODE;
+        if (airDatepickerLocales[this.languageCode]) {
+            localeName = this.languageCode;
+        }
+        else {
+            console.warn(`Post Date Picker: Locale module "${this.localeCode}" not found! Falling back to "${FALLBACK_LANGUAGE_CODE}".`);
+        }
+        const module = await airDatepickerLocales[localeName]?.();
+        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`.
+     */
+    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;
+    }
+    /**
+     * 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.
+     */
+    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]}`;
+    }
     setupInputObserver() {
         if (typeof MutationObserver === 'undefined')
             return;
@@ -388,78 +550,80 @@ export class PostDatePicker {
         });
         body.removeEventListener('keydown', this.handleGridKeydown);
         body.addEventListener('keydown', this.handleGridKeydown);
-        this.setActiveCell(this.isoToDate(this.selectedStartDate) || this.today, focusOnDate);
+        this.setActiveCell((this.selectedStartDate && this.isoToDate(this.selectedStartDate)) || this.today, focusOnDate);
     }
     /**
      * Set up the masks on the inputs to reflect the date pickers
      */
     setUpMask() {
-        const usBlockOpts = {
-            pattern: 'm{/}`d{/}`Y',
-            format: (date) => {
-                if (!date)
-                    return '';
-                const day = String(date.getDate()).padStart(2, '0');
-                const month = String(date.getMonth() + 1).padStart(2, '0');
-                const year = date.getFullYear();
-                return [month, day, year].join('/');
-            },
-            parse: (str) => {
-                const [month, day, year] = str.split('/').map(Number);
-                return new Date(year, month - 1, day);
+        // 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 baseMaskOptions = {
+            mask: Date,
+            pattern: maskPattern,
+            format: this.dateToString.bind(this),
+            parse: this.stringToDate.bind(this),
+            blocks: {
+                y: {
+                    mask: IMask.MaskedRange,
+                    from: 101, // dates from 0100-01-31 and earlier are causing issues in air-datepicker
+                    to: 9999,
+                    maxLength: 4,
+                    placeholderChar: Object.keys(DATE_FORMAT_MAP)[0],
+                },
+                m: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    placeholderChar: Object.keys(DATE_FORMAT_MAP)[1],
+                },
+                d: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    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,
         };
-        const baseDateOpts = {
-            mask: Date,
-            min: this.min ? new Date(this.min) : null,
-            max: this.max ? new Date(this.max) : null,
+        const singleMaskOptions = {
+            ...baseMaskOptions,
+            lazy: false,
+            overwrite: true,
         };
-        if (this.range) {
-            const baseRangeOpts = {
-                mask: 'from - to',
-                lazy: false,
-                overwrite: true,
-            };
-            if (this.euFormat) {
-                const options = {
-                    ...baseRangeOpts,
-                    blocks: { from: baseDateOpts, to: baseDateOpts },
-                };
-                this.inputMask = IMask(this.dpInput, options);
-            }
-            else {
-                const options = {
-                    ...baseRangeOpts,
-                    blocks: {
-                        from: { ...baseDateOpts, ...usBlockOpts },
-                        to: { ...baseDateOpts, ...usBlockOpts },
-                    },
-                };
-                this.inputMask = IMask(this.dpInput, options);
-            }
-        }
-        else {
-            const baseSingleOpts = {
-                ...baseDateOpts,
-                lazy: false,
-                overwrite: true,
-            };
-            if (this.euFormat) {
-                const options = baseSingleOpts;
-                this.inputMask = IMask(this.dpInput, options);
-            }
-            else {
-                const options = { ...baseSingleOpts, ...usBlockOpts };
-                this.inputMask = IMask(this.dpInput, options);
+        const rangeMaskOptions = {
+            mask: `from${this.dateFormatRangeSeparator}to`,
+            blocks: {
+                from: { ...baseMaskOptions },
+                to: { ...baseMaskOptions },
+            },
+            lazy: false,
+            overwrite: true,
+        };
+        this.inputMask = IMask(this.dpInput, this.range ? rangeMaskOptions : singleMaskOptions);
+    }
+    updateMask() {
+        if (!this.inline) {
+            this.inputMask.destroy();
+            this.setUpMask();
+            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]);
+                }
             }
         }
     }
-    configDatePicker() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const assignedNodes = slot && slot.assignedElements();
-        const locale = localesMap[this.locale] || localesMap.en;
+    async configDatePicker() {
+        const locale = await this.airLocale();
         if (!this.inline) {
-            this.dpInput = assignedNodes?.find(el => el.tagName === 'INPUT');
+            this.dpInput = this.host.querySelector('input');
             this.setUpMask();
         }
         this.dpContainer = this.host.shadowRoot.querySelector('.datepicker-container');
@@ -478,12 +642,12 @@ export class PostDatePicker {
                 selectOtherYears: true,
                 showOtherMonths: false,
                 moveToOtherMonthsOnSelect: true,
-                firstDay: 1,
                 startDate: this.startDate,
                 minDate: this.min,
                 maxDate: this.max,
                 locale: locale,
-                dateFormat: (localesMap[this.locale] || localesMap.en).dateFormat,
+                dateFormat: locale.dateFormat,
+                firstDay: locale.firstDay,
                 view: 'days',
                 onChangeView: view => {
                     this.currentViewType = view;
@@ -520,13 +684,14 @@ export class PostDatePicker {
                     // Assign value to the input, close the popover and focus on the input
                     if (this.dpInput) {
                         if (Array.isArray(date)) {
-                            const dates = date.map(d => this.dateToDateStr(d));
-                            this.inputMask.value = dates.join(' - ');
+                            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.dateToDateStr(date);
+                            this.inputMask.value = this.dateToString(date);
                             this.updateInputValue();
                         }
                         // If range & only one date has been selected, user should stay in the DP
@@ -534,7 +699,7 @@ export class PostDatePicker {
                             return;
                         }
                         this.popoverRef?.hide();
-                        requestAnimationFrame(() => this.dpInput.focus());
+                        requestAnimationFrame(() => this.dpTrigger.focus());
                     }
                 },
                 onShow: () => {
@@ -587,48 +752,15 @@ export class PostDatePicker {
             this.titleBtn.addEventListener('click', this.forceTitleClickToYear, { capture: true });
         });
     }
-    splitRangeDates(rangeStr) {
-        return rangeStr.split(' - ');
-    }
-    isoToDate(iso) {
-        if (!isIsoDate(iso))
-            return null;
-        const [y, m, d] = iso.split('-').map(Number);
-        return new Date(y, m - 1, d);
-    }
-    dateToIso(date) {
-        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-    }
-    dateStrToDate(dateStr) {
-        return this.euFormat ? this.euDateStrToDate(dateStr) : this.usDateStrToDate(dateStr);
-    }
-    euDateStrToDate(dateStr) {
-        const [d, m, y] = dateStr.split('.');
-        return new Date(+y, +m - 1, +d);
-    }
-    usDateStrToDate(dateStr) {
-        const [m, d, y] = dateStr.split('/');
-        return new Date(+y, +m - 1, +d);
-    }
-    dateToDateStr(date) {
-        return this.euFormat ? this.dateToEuDateStr(date) : this.dateToUSDateStr(date);
-    }
-    dateToEuDateStr(date) {
-        return `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
-    }
-    dateToUSDateStr(date) {
-        return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;
-    }
     /**
      * Add role and aria-label to each grid cell
      */
     internalOnRenderCell({ date, cellType }) {
-        const safeLocale = this.locale || 'en';
         if (cellType === 'day') {
             return {
                 attrs: {
                     'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(safeLocale, {
+                    'aria-label': date.toLocaleDateString(this.localeCode, {
                         weekday: 'long',
                         year: 'numeric',
                         month: 'long',
@@ -641,7 +773,7 @@ export class PostDatePicker {
             return {
                 attrs: {
                     'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(safeLocale, {
+                    'aria-label': date.toLocaleDateString(this.localeCode, {
                         year: 'numeric',
                         month: 'long',
                     }),
@@ -652,7 +784,7 @@ export class PostDatePicker {
             return {
                 attrs: {
                     'role': 'gridcell',
-                    'aria-label': date.toLocaleDateString(safeLocale, {
+                    'aria-label': date.toLocaleDateString(this.localeCode, {
                         year: 'numeric',
                     }),
                 },
@@ -742,11 +874,11 @@ export class PostDatePicker {
         this.inputDisabled = this.dpInput.disabled;
     }
     async componentDidLoad() {
-        this.euFormat = document.documentElement.lang !== 'en-US';
-        this.configDatePicker();
+        await this.configDatePicker();
         this.setupGridObserver();
         this.setupNavObserver();
         this.setupInputObserver();
+        this.validateLocale();
         this.validateSelectedStartDate();
         this.validateSelectedEndDate();
         this.validateMin();
@@ -787,11 +919,11 @@ export class PostDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: 'b721b731d9ad4ff3c6d80c995a3c471786b6425a' }, this.inline && h("div", { key: '9dc37bf0ab23a5ce611139d0efd7f3fca4f6e6e2', class: "datepicker-container" }), !this.inline && (h("div", { key: 'f2e0376510e5e26a98e29703fbf11c0be90266bb' }, h("div", { key: '52e05c2f28a725c5336fca16842e97ce21a36b42', class: {
+        return (h(Host, { key: 'c1203edb0b72d93a5e936c595a891dd8e46b671f', "data-version": version }, this.inline && h("div", { key: 'f327dd6dff018d8ce332c519bcd94f2a5a1e91d4', class: "datepicker-container" }), !this.inline && (h("div", { key: '1156f8c3f539d99ed273e1ccfdb2c63660d9a11b', dir: this.textDirection }, h("div", { key: 'bd0a9fc399f9fdb943887ab5881ad363e3de7b5f', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, h("slot", { key: '11147329e23c51b3bf7c5fa2925cbf97d26c9da2' }), h("button", { key: 'c57f2450bd8ce1976876a8bc11f7d238300ca687', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled }, h("post-icon", { key: 'd6a37bfc1471a8eabbf3e0450c3010da8e7ef28e', name: "calendar" }))), h("post-popovercontainer", { key: 'fd4259c066d92c5bbf1066940da72f74a58bdfe8', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '0ba6ef3f33a003317ab70728e1c67fc8c1d726a9', class: "datepicker-container" }))))));
+            } }, h("slot", { key: '5e13d9746d5e95cfa0cbcffffecad62eb8e666af' }), h("button", { key: '5b0133694198472b31f666c69b56ffd90d8fcc84', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: '2b68084d2b9bdff3c9ffe5de9fb4eee8e8d5f6b5', name: "calendar" }))), h("post-popovercontainer", { key: '6f71be7bba17e6fdaca9ae5238291faaea7fa1ad', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '5497f1f9128f15f4f229f99d0b445abfabc8a2ae', class: "datepicker-container" }))))));
     }
     static get is() { return "post-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -807,9 +939,9 @@ export class PostDatePicker {
     }
     static get properties() {
         return {
-            "selectedStartDate": {
+            "locale": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -819,14 +951,35 @@ export class PostDatePicker {
                 "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)."
+                    "text": "The date pickers locale (e.g. \"it\", \"it-CH\", etc.), which specifies the date format and language.\n<post-banner type=\"info\" data-size=\"sm\"><span>If not set, it defaults to either the closest ancestor with a `lang` attribute (e.g. \\<html lang=\"de\"\\>), or falls back to English.</span></post-banner>"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selected-start-date"
+                "attribute": "locale",
+                "defaultValue": "this.systemLocale"
             },
-            "selectedEndDate": {
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker expects a range selection or a single date selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "selectedStartDate": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -838,32 +991,31 @@ export class PostDatePicker {
                 "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)."
+                    "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-end-date"
+                "attribute": "selected-start-date"
             },
-            "range": {
-                "type": "boolean",
-                "mutable": false,
+            "selectedEndDate": {
+                "type": "string",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the date picker expects a range selection or a single date selection."
+                    "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": "range",
-                "defaultValue": "false"
+                "attribute": "selected-end-date"
             },
             "min": {
                 "type": "string",
@@ -1102,10 +1254,9 @@ export class PostDatePicker {
     }
     static get states() {
         return {
-            "today": {},
             "inputDisabled": {},
-            "startDate": {},
-            "locale": {}
+            "today": {},
+            "startDate": {}
         };
     }
     static get events() {
@@ -1167,6 +1318,15 @@ export class PostDatePicker {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "validateLocale"
+            }, {
+                "propName": "locale",
+                "methodName": "updateLocale"
+            }, {
+                "propName": "range",
+                "methodName": "updateRange"
+            }, {
                 "propName": "selectedStartDate",
                 "methodName": "validateSelectedStartDate"
             }, {

package/dist/collection/components/post-footer/post-footer.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class PostFooter {
         return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: 'b144591b02f0e8010d9e4bbba34841151ba6b3b9', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '1f83f8ecf0e07ebd05f4ed9c45f6d2f6fe141422' }, h("h2", { key: 'fdfc10c2be686d97c2a994fd069109ec46444626', class: "visually-hidden" }, this.textFooter), h("div", { key: 'a89e56546788b71790747c8ee57b4d2fe5d8ae1f', class: "footer-container" }, h("div", { key: '407518b583499c90002de8baa1cd955e8e123daa', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '9c46b21064994229a1132b77432d9193a58e1dd4', class: "footer-column" }, h("div", { key: 'f2686c80b116869255a2ae5087d5c0a72f5b57f3', class: "footer-socialmedia" }, h("slot", { key: 'a3120b829237f2e82a7fb6ed897bc4ad8fc0ab44', name: "socialmedia" })), h("div", { key: '3f868a04bc8a9952ca13041e630433ba4c4012c4', class: "footer-app" }, h("slot", { key: '9325886b54b36bcc0dafa6b683fa9415b55590ce', name: "app" }))), h("div", { key: '9b1382957dbe4eb9e2fb7a717b528fc76f18c1f6', class: "footer-businesssectors" }, h("slot", { key: 'a38e36aeca86bd27c062624456bde8fa92349af9', name: "businesssectors" })), h("div", { key: '65f1e95887a715de194420ace838695cfafed7ac', class: "footer-meta" }, h("slot", { key: 'bbb052400f6f65853784c5e3f7ecfbaa9b87e8cb', name: "meta" })), h("div", { key: '98a70e130ac05af4d9d5d3aaefb8ac473056c339', class: "footer-copyright" }, h("slot", { key: 'ed7ac57a7862a32050d0481fa6d5cad45cd02677', name: "copyright" }))))));
+        return (h(Host, { key: '09861845febd1bff02333f80f0abf78e3254926c', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '356ced9b17a9e46db52a18834b41b3463bc1abac' }, h("h2", { key: 'da914976a9f50a06f8d79cb1c2c33251922e31ea', class: "visually-hidden" }, this.textFooter), h("div", { key: '4b9b6b45bf6784110603e632502c5470c93f3252', class: "footer-container" }, h("div", { key: 'bdac516b970b710128a25a9e42bc8ef19176c75c', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'c1304673455570f5a19e05c141e12113dde30a36', class: "footer-column" }, h("div", { key: 'b1f8ac3ea1083713e4a380fe3f172ba078195e4f', class: "footer-socialmedia" }, h("slot", { key: '1efa03d1c601dedc974214628488009872829109', name: "socialmedia" })), h("div", { key: '90efd1be2cb94f96e5932cc8fa7faff279d83146', class: "footer-app" }, h("slot", { key: '89a3b05f64d766c5d519b8e2af6c7a18ed260eb4', name: "app" }))), h("div", { key: '48cf8edf63633769e2c41e9b606c0b398cea9fdc', class: "footer-businesssectors" }, h("slot", { key: '2bf2e29c9922b5e1a8343dd72e2ce905c813858f', name: "businesssectors" })), h("div", { key: '78d93e0c518811340660a5c5050dc075ff9933a9', class: "footer-meta" }, h("slot", { key: '1c42433f304a8443ad57484fbe06b6ac870dfcfa', name: "meta" })), h("div", { key: '0508d5d02307b317572038e3de0c6a21372dd072', class: "footer-copyright" }, h("slot", { key: 'ea38c93ef2f43d39a0669b764a89c9f78fc1d10a', name: "copyright" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }