@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/collection/components/mds-input-date-range/mds-input-date-range.js

@@ -7,11 +7,17 @@ import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
+/**
+ * @slot calendar-preselection - Add `HTML elements` or `components` to this slot.
+ * @slot start - Add `HTML elements` or `components` to this slot.
+ * @slot end - Add `HTML elements` or `components` to this slot.
+ */
 export class MdsInputDateRange {
     constructor() {
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
+        this.visibleCalendarDate = '';
         this.hasPreselection = false;
         this.t = new Locale({
             el: localeEl,
@@ -44,10 +50,16 @@ export class MdsInputDateRange {
          * @description Default is 500
          */
         this.delay = 500;
+        /**
+         * Enables the linked dual-calendar range picker behavior.
+         */
+        this.dualCalendar = false;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
         this.initialStartDate = '';
         this.initialEndDate = '';
+        this.hoveredCalendarDate = null;
+        this.syncingInputSlots = new Set();
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = DateTime.fromISO(this.internalStartDate).isValid;
@@ -55,20 +67,8 @@ export class MdsInputDateRange {
                 if (startValid && endValid) {
                     this.validateDateRange();
                     this.syncFormValue();
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
                     this.checkPreselections();
-                }
-                if (this.internalStartDate !== this.lastEmittedStartDate ||
-                    this.internalEndDate !== this.lastEmittedEndDate) {
-                    this.valueChanged.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    this.lastEmittedStartDate = this.internalStartDate;
-                    this.lastEmittedEndDate = this.internalEndDate;
+                    this.emitValueChanged();
                 }
             }
         };
@@ -91,10 +91,155 @@ export class MdsInputDateRange {
             ev.stopPropagation();
             this.focusInput(this.host.querySelector('mds-input-date[slot="end"]'));
         };
+        this.handleCalendarHover = (ev) => {
+            if (this.internalStartDate === '' || this.internalEndDate !== '') {
+                this.clearHoverPreview();
+                return;
+            }
+            const nextHoverDate = ev.detail.hoverDate;
+            if (this.hoveredCalendarDate === nextHoverDate)
+                return;
+            this.hoveredCalendarDate = nextHoverDate;
+            this.syncCalendarsHoverAttributes();
+        };
+        this.handleCalendarChange = (ev) => {
+            this.clearHoverPreview();
+            this.internalStartDate = ev.detail.startDate;
+            this.updateInputValue('start', this.internalStartDate);
+            if (ev.detail.endDate !== undefined && ev.detail.endDate !== '') {
+                this.internalEndDate = ev.detail.endDate;
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            else {
+                this.internalEndDate = '';
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            this.syncFormValue();
+            this.syncCalendarsSelectionAttributes();
+            if (this.internalStartDate !== '' && this.internalEndDate !== '') {
+                this.emitValueChanged();
+                this.closeDropdownAfterSelection();
+            }
+        };
+        this.handleCalendarNavigate = (ev) => {
+            if (!this.dualCalendar)
+                return;
+            const calendars = this.getCalendars();
+            const calendarIndex = calendars.indexOf(ev.target);
+            const currentDate = DateTime.fromISO(ev.detail.currentDate);
+            if (!currentDate.isValid)
+                return;
+            this.visibleCalendarDate = currentDate
+                .minus({ months: calendarIndex === 1 ? 1 : 0 })
+                .startOf('month')
+                .toISODate();
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    getCalendars() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar')) !== null && _b !== void 0 ? _b : []);
+    }
+    resolveVisibleCalendarDate(startDate, endDate) {
+        var _a;
+        const initialDates = [startDate, endDate]
+            .map((value) => DateTime.fromISO(value !== null && value !== void 0 ? value : ''))
+            .filter((date) => date.isValid);
+        const initialVisibleDate = (_a = initialDates[0]) !== null && _a !== void 0 ? _a : DateTime.now();
+        return initialVisibleDate.startOf('month').toISODate();
+    }
+    getCalendarViewDate(monthOffset = 0) {
+        const visibleCalendarDate = DateTime.fromISO(this.visibleCalendarDate);
+        const startDate = DateTime.fromISO(this.internalStartDate);
+        let baseDate = DateTime.now();
+        if (visibleCalendarDate.isValid) {
+            baseDate = visibleCalendarDate;
+        }
+        else if (startDate.isValid) {
+            baseDate = startDate;
+        }
+        return baseDate.startOf('month').plus({ months: monthOffset }).toISODate();
+    }
+    setVisibleCalendarDate(date) {
+        const visibleCalendarDate = DateTime.fromISO(date);
+        if (visibleCalendarDate.isValid) {
+            this.visibleCalendarDate = visibleCalendarDate.startOf('month').toISODate();
+        }
+    }
+    closeDropdownAfterSelection() {
+        if (this.delay === 0)
+            return;
+        const { dropdownRef } = this;
+        if (dropdownRef) {
+            setTimeout(() => {
+                dropdownRef.visible = false;
+            }, this.delay);
+        }
+    }
+    syncCalendarsSelectionAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach((calendar) => {
+            if (this.internalStartDate !== '') {
+                calendar.setAttribute('start-date', this.internalStartDate);
+            }
+            else {
+                calendar.removeAttribute('start-date');
+            }
+            if (this.internalEndDate !== '') {
+                calendar.setAttribute('end-date', this.internalEndDate);
+            }
+            else {
+                calendar.removeAttribute('end-date');
+            }
+        });
+        this.syncCalendarsHoverAttributes();
+    }
+    syncCalendarsHoverAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach((calendar) => {
+            if (this.hoveredCalendarDate !== null && this.hoveredCalendarDate !== '') {
+                calendar.setAttribute('hover-date', this.hoveredCalendarDate);
+            }
+            else {
+                calendar.removeAttribute('hover-date');
+            }
+        });
+    }
+    clearHoverPreview() {
+        if (this.hoveredCalendarDate === null)
+            return;
+        this.hoveredCalendarDate = null;
+        this.syncCalendarsHoverAttributes();
+    }
+    getEmittableDateRangeDetail() {
+        const startDate = DateTime.fromISO(this.internalStartDate);
+        const endDate = DateTime.fromISO(this.internalEndDate);
+        if (!startDate.isValid || !endDate.isValid) {
+            return null;
+        }
+        return {
+            startDate: this.internalStartDate,
+            endDate: this.internalEndDate,
+        };
+    }
+    emitValueChanged() {
+        const detail = this.getEmittableDateRangeDetail();
+        if (!detail)
+            return false;
+        if (detail.startDate === this.lastEmittedStartDate &&
+            detail.endDate === this.lastEmittedEndDate) {
+            return false;
+        }
+        this.valueChanged.emit(detail);
+        this.lastEmittedStartDate = detail.startDate;
+        this.lastEmittedEndDate = detail.endDate;
+        return true;
+    }
     handleStartDateChange(newValue) {
         this.syncExternalDate('start', newValue);
     }
@@ -107,8 +252,9 @@ export class MdsInputDateRange {
         this.internalEndDate = this.endDate;
         this.initialStartDate = this.startDate;
         this.initialEndDate = this.endDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.internalStartDate, this.internalEndDate);
         // Se max è precedente a min, imposto max uguale a min
-        if (this.min && this.max) {
+        if (this.min !== null && this.min !== '' && this.max !== null && this.max !== '') {
             const minDate = DateTime.fromISO(this.min);
             const maxDate = DateTime.fromISO(this.max);
             if (maxDate < minDate) {
@@ -118,20 +264,27 @@ export class MdsInputDateRange {
         this.syncFormValue();
     }
     disconnectedCallback() {
+        var _a;
         this.host.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
+    /**
+     * Applies the given preselection range to the input.
+     * @param event the preselection range to apply
+     */
     async preselect(event) {
-        var _a, _b;
-        if (!this.togglePreselection) {
+        if (this.togglePreselection == null) {
             this.togglePreselection = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
         }
         this.togglePreselection.forEach((element) => {
             element.selected = false;
         });
         event.caller.selected = true;
+        this.clearHoverPreview();
         const startDate = DateTime.fromISO(event.start);
         if (startDate.isValid) {
             this.internalStartDate = event.start;
+            this.setVisibleCalendarDate(this.internalStartDate);
             this.updateInputValue('start', this.internalStartDate);
         }
         if (event.end !== undefined) {
@@ -145,34 +298,28 @@ export class MdsInputDateRange {
         }
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
-        const calendar = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mds-calendar');
-        if (calendar) {
-            await calendar.updateCurrentDate(this.internalStartDate);
-            if (this.delay === 0)
-                return;
-            const { dropdownRef } = this;
-            if (dropdownRef) {
-                setTimeout(() => {
-                    dropdownRef.visible = false;
-                }, this.delay);
-            }
+        const calendars = this.getCalendars();
+        if (calendars.length !== 0) {
+            await Promise.all(calendars.map((calendar, index) => calendar.updateCurrentDate(this.getCalendarViewDate(index))));
+            this.closeDropdownAfterSelection();
         }
-        this.dateRangeSelected.emit({
-            startDate: this.internalStartDate,
-            endDate: this.internalEndDate,
-        });
+        this.emitValueChanged();
         return Promise.resolve();
     }
     componentDidLoad() {
+        var _a;
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     formResetCallback() {
+        this.clearHoverPreview();
         this.internalStartDate = this.initialStartDate;
         this.internalEndDate = this.initialEndDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.initialStartDate, this.initialEndDate);
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.checkPreselections();
@@ -180,10 +327,12 @@ export class MdsInputDateRange {
     }
     syncExternalDate(slotName, newValue) {
         const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        this.clearHoverPreview();
         if (slotName === 'start') {
             if (normalizedValue === this.internalStartDate)
                 return;
             this.internalStartDate = normalizedValue;
+            this.setVisibleCalendarDate(this.internalStartDate);
         }
         else {
             if (normalizedValue === this.internalEndDate)
@@ -200,8 +349,13 @@ export class MdsInputDateRange {
         var _a;
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
         const input = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0];
-        if (input) {
-            input.setValue(newValue);
+        if (input != null) {
+            this.syncingInputSlots.add(slotName);
+            input.setValue(newValue).finally(() => {
+                requestAnimationFrame(() => {
+                    this.syncingInputSlots.delete(slotName);
+                });
+            });
         }
     }
     updateInputListeners() {
@@ -209,20 +363,25 @@ export class MdsInputDateRange {
         const startSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
         const endSlot = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="end"]');
         this.hasPreselection = this.host.querySelector('mds-input-date-range-preselection') !== null;
-        if (startSlot) {
+        if (startSlot != null) {
             const input = startSlot.assignedElements()[0];
             input.addEventListener('mdsInputDateSelect', this.createFocusoutListener('start'));
         }
-        if (endSlot) {
+        if (endSlot != null) {
             const input = endSlot.assignedElements()[0];
             input.addEventListener('mdsInputDateSelect', this.createFocusoutListener('end'));
         }
     }
     createFocusoutListener(slotName) {
         return (ev) => {
+            if (this.syncingInputSlots.has(slotName)) {
+                return;
+            }
             const event = ev;
+            this.clearHoverPreview();
             if (slotName === 'start') {
                 this.internalStartDate = event.detail;
+                this.setVisibleCalendarDate(this.internalStartDate);
             }
             else {
                 this.internalEndDate = event.detail;
@@ -231,7 +390,7 @@ export class MdsInputDateRange {
         };
     }
     validateDateRange() {
-        if (this.internalStartDate && this.internalEndDate) {
+        if (this.internalStartDate !== '' && this.internalEndDate !== '') {
             const start = DateTime.fromISO(this.internalStartDate);
             const end = DateTime.fromISO(this.internalEndDate);
             if (end < start) {
@@ -242,7 +401,7 @@ export class MdsInputDateRange {
     }
     checkPreselections() {
         const preselections = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
-        if (preselections) {
+        if (preselections != null) {
             preselections.forEach((element) => {
                 const preselection = element;
                 const isSameRange = preselection.start === this.internalStartDate &&
@@ -259,40 +418,33 @@ export class MdsInputDateRange {
             });
         }
     }
+    renderCalendarPreselectionPanel() {
+        if (!this.hasPreselection)
+            return null;
+        return (h("div", { class: "calendar-preselection-panel" }, h("div", { class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { name: "calendar-preselection" }))));
+    }
+    renderSingleCalendar() {
+        return (h("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+    }
+    renderDualCalendars() {
+        return (h("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {}))), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+    }
     render() {
-        return (h(Host, { key: '4aef8d318b0cab17f4ad1d7c276cbd0db2d2038d', onClick: this.focusDateInput }, h("div", { key: '8cc6be57143826af84c01a617fe4e2f47f45b63d', class: "inputs" }, h("div", { key: 'b79ce756d5064394cc2a3920ff72beb30e01ceb1', class: "input-element" }, h("mds-text", { key: '29825a813f7b8fb553c7ffce9db377e1884409fe', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: '829e272b2e59be82c1e7d46e1c7f219965ed9645', class: "input-wrapper" }, h("slot", { key: '9dce89ebb990e417772dfd22f3773e34e0372087', name: "start" }))), h("div", { key: '7d1c88dac297479bbb7ac19d29bdc2a61878c9ec', class: "input-element" }, h("mds-text", { key: 'ed4e0bf4f145127142cb4b093aadc8e065259395', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '41c3ec52338798b32eb5439c6c429785405fb17d', class: "input-wrapper" }, h("slot", { key: '9d2c09367d5aa5e4f53dfbfb46ddab6695372cbb', name: "end" })))), h("div", { key: '6a3d364492b926fc9ff36173acc973b4a2f5d549', class: "action-open-calendar-wrapper" }, h("mds-button", { key: '1542474a4fd9d8f293511daa0021105d995d59a2', class: "action-open-calendar", variant: "dark", tone: "text", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (h(Host, { key: '13d9a565316927ca4ec2586f82e2f25f7d04ae25', onClick: this.focusDateInput }, h("div", { key: '71bda796783e6ead96c24ad4ed84ac79265291e8', class: "inputs" }, h("div", { key: 'c06b73facc486130eb89e857b782b15581cfba20', class: "input-element" }, h("mds-text", { key: '340fa48ce0a88bd6445cfc874c27ec70e2426feb', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'b82416e3ffa442ee84004d20e298b859ca5543a8', class: "input-wrapper" }, h("slot", { key: '9b8741fecf76c4503e58b044222b4ccb6bb889e0', name: "start" }))), h("div", { key: 'fcd38e4e5d5a065001c712a960dd5bcae1dd5e79', class: "input-element" }, h("mds-text", { key: '269cdf295bfefe625a3cf98f1aaf7fb021b688d4', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: 'ee917dba0a0af805e1ebe5b69fb997b492e044ba', class: "input-wrapper" }, h("slot", { key: 'dd22c8a98be387b76aa6b355f6b025db1a8fdbb6', name: "end" })))), h("div", { key: 'ca651a85e149d23e4eafdf66c121ffa3d5685dca', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'ff5e89aec57614f98890f52859bc2f10e33bc85d', class: "action-open-calendar", variant: "dark", tone: "text", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } })), h("mds-dropdown", { key: 'aaa26eeab22f16125384fcfcc35ea7b1e6daf8cf', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: (ev) => {
-                this.internalStartDate = ev.detail.startDate;
-                this.updateInputValue('start', this.internalStartDate);
-                if (ev.detail.endDate) {
-                    this.internalEndDate = ev.detail.endDate;
-                    this.updateInputValue('end', this.internalEndDate);
-                }
-                this.syncFormValue();
-                if (this.internalStartDate && this.internalEndDate) {
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    if (this.delay === 0)
-                        return;
-                    const { dropdownRef } = this;
-                    if (dropdownRef) {
-                        setTimeout(() => {
-                            dropdownRef.visible = false;
-                        }, this.delay);
-                    }
-                }
-            }, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: '906707dd59ff68bb46a411aae205d74cb61113bf', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: 'e96a49b3797994bb00f66f5f9e88d4c7435e91cb', name: "calendar-preselection" }))))));
+            } })), h("mds-dropdown", { key: '30609e1d1eb75209b5e17444758b1b9b2ac19bce', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
     }
     syncFormValue() {
         var _a, _b, _c, _d;
         const startDate = (_b = (_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
         const endDate = (_d = (_c = this.internalEndDate) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
-        if (!startDate && !endDate) {
+        if (startDate === '' && endDate === '') {
             this.internals.setFormValue(null);
             return;
         }
@@ -428,6 +580,26 @@ export class MdsInputDateRange {
                 "attribute": "delay",
                 "defaultValue": "500"
             },
+            "dualCalendar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the linked dual-calendar range picker behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dual-calendar",
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -454,6 +626,7 @@ export class MdsInputDateRange {
             "calendarKey": {},
             "internalStartDate": {},
             "internalEndDate": {},
+            "visibleCalendarDate": {},
             "dropdownRef": {},
             "hasPreselection": {},
             "language": {}
@@ -461,21 +634,6 @@ export class MdsInputDateRange {
     }
     static get events() {
         return [{
-                "method": "dateRangeSelected",
-                "name": "mdsInputDateRangeSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{\n    startDate: string;\n    endDate: string;\n  }",
-                    "resolved": "{ startDate: string; endDate: string; }",
-                    "references": {}
-                }
-            }, {
                 "method": "valueChanged",
                 "name": "mdsInputDateRangeValueChange",
                 "bubbles": true,
@@ -483,7 +641,7 @@ export class MdsInputDateRange {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the selected start or end date changes."
                 },
                 "complexType": {
                     "original": "{\n    startDate: string;\n    endDate: string;\n  }",
@@ -507,7 +665,7 @@ export class MdsInputDateRange {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },
@@ -517,7 +675,7 @@ export class MdsInputDateRange {
                     "parameters": [{
                             "name": "event",
                             "type": "EventDate",
-                            "docs": ""
+                            "docs": "the preselection range to apply"
                         }],
                     "references": {
                         "Promise": {
@@ -537,8 +695,11 @@ export class MdsInputDateRange {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Applies the given preselection range to the input.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "event the preselection range to apply"
+                        }]
                 }
             }
         };

package/dist/collection/components/mds-input-date-range/test/mds-input-date-range.stories.js

@@ -22,6 +22,10 @@ export default {
             type: { name: 'string' },
             description: 'Specifies the max date of the range, user cannot set dates after this date',
         },
+        'dual-calendar': {
+            type: { name: 'boolean' },
+            description: 'Enables the linked dual-calendar range picker behavior',
+        },
     },
 };
 const formatDate = (date = new Date()) => {
@@ -97,3 +101,9 @@ export const MinMax = {
 export const Preselection = {
     render: TemplatePreselection,
 };
+export const DualCalendar = {
+    render: Template,
+    args: {
+        'dual-calendar': true,
+    },
+};

package/dist/collection/components/mds-input-date-range-preselection/mds-input-date-range-preselection.js

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsInputDateRangePreselection {
     constructor() {
         this.onClick = (event) => {
@@ -12,7 +15,7 @@ export class MdsInputDateRangePreselection {
         };
     }
     render() {
-        return (h(Host, { key: '8fa6eff199d4eb92067407c1efd132a4185caf71', slot: "calendar-preselection" }, h("mds-button", { key: 'c44190a71d6fc70321dbbf987c09d0b5e7398515', onClick: this.onClick, class: "action", variant: "primary", tone: "strong" }, h("slot", { key: '61050bd14f48b266a8db2dc120e51c40aa2ebadc' }))));
+        return (h(Host, { key: 'e5571b251d0b86eccf975c07af016fd0e25387d3', slot: "calendar-preselection" }, h("mds-button", { key: '95b8be91464b8e283c623c191514f7c293b941af', onClick: this.onClick, class: "action", variant: "primary", tone: "strong" }, h("slot", { key: '6a96b556f736d867ab858ffba7307c45fb15dd65' }))));
     }
     static get is() { return "mds-input-date-range-preselection"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-input-field/mds-input-field.js

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add the native input `HTML element` to this slot.
+ */
 export class MdsInputField {
     constructor() {
         /**
@@ -10,12 +13,12 @@ export class MdsInputField {
         // mdsInput.hasValidator().then(hasValidator => {
         // if (!hasValidator) return
         mdsInput.getErrors().then((errors) => {
-            if (errors) {
+            if (errors != null) {
                 this.variant = 'error';
                 const messages = Object.entries(errors)
                     .map((v) => v[1])
                     .filter((v) => v);
-                this.message = messages.length ? messages.join(';') : undefined;
+                this.message = messages.length !== 0 ? messages.join(';') : undefined;
                 return;
             }
             this.variant = 'success';
@@ -25,13 +28,13 @@ export class MdsInputField {
     }
     componentDidLoad() {
         const [mdsInput] = this.slotInput.assignedElements();
-        if (!mdsInput)
+        if (mdsInput == null)
             throw new Error('Mds input not found');
         mdsInput.addEventListener('mdsInputValidation', () => this.handleValidation(mdsInput));
     }
     render() {
         var _a;
-        return (h(Host, { key: '07a3f00c463755ed5699415bda96b8a6ab0088e8' }, h("mds-text", { key: 'a76488419fd68dd54fbb814bd464445f963ff20d', class: "label", typography: "label" }, this.label), h("div", { key: '288d029bde16c91ace57a906abd4bff5a6a2b26d', class: "message-window" }, h("div", { key: 'b9a8bc1f7967741b91f09b7f944c7b598cba86e9', class: "content", part: "content" }, h("slot", { key: 'cb260b91c2dccb8161a76043bd7257eed51b275d', ref: (i) => (this.slotInput = i) })), h("div", { key: '9be6a675440795d75cd580f22f19d45db01840fa', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (h("mds-text", { typography: "caption", key: i }, m)))))));
+        return (h(Host, { key: '7d2b6e591f2da90402eef9c453b6b229d04f56f8' }, h("mds-text", { key: '6058dec040f453a65f5d34c8d16ddf786ade620f', class: "label", typography: "label" }, this.label), h("div", { key: 'dda1efd3aed92889c8aa28d5958630d304f81f9e', class: "message-window" }, h("div", { key: '66196e8f4f024dbbd2c59dc6c8d00b46b4997ff4', class: "content", part: "content" }, h("slot", { key: 'ba8af714da43300a70833acbd281bfe19c5d3e4b', ref: (i) => (this.slotInput = i) })), h("div", { key: 'dbc5d405bb47cd7f3d730d3732e2ef0c49d9bfc6', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (h("mds-text", { typography: "caption", key: i }, m)))))));
     }
     static get is() { return "mds-input-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-input-otp/mds-input-otp.js

@@ -45,7 +45,7 @@ export class MdsInputOtp {
             const currentInput = e.target;
             this.setOtpDigit(currentInput, e.key);
             const nextInput = currentInput.nextElementSibling;
-            if (nextInput) {
+            if (nextInput != null) {
                 nextInput.setFocus();
             }
             else {
@@ -64,7 +64,7 @@ export class MdsInputOtp {
             for (const currentDigit of digits) {
                 this.setOtpDigit(currentInput, currentDigit);
                 currentInput = currentInput.nextElementSibling;
-                if (currentInput) {
+                if (currentInput != null) {
                     currentInput.setFocus();
                 }
                 else {
@@ -75,7 +75,7 @@ export class MdsInputOtp {
         };
     }
     render() {
-        return (h(Host, { key: '1d8ade99b72505aea4f74022b3b1e1de4b84a82b' }, Array.from({ length: this.length }).map(() => (h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
+        return (h(Host, { key: 'b8ed6443032efcace51ea84c5dbae2533796a7f7' }, Array.from({ length: this.length }).map(() => (h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
     }
     static get is() { return "mds-input-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-input-range/mds-input-range.js

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 /**
  * @part header - The element containing the labels displayed over the input element
  * @part track - The element containing the track of the input range
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsInputRange {
     constructor() {
@@ -93,7 +94,7 @@ export class MdsInputRange {
     }
     render() {
         var _a;
-        return (h(Host, { key: '78e82c801e70cf992bc5deabaa9e808316213e1f' }, h("header", { key: '0f7e2c943c28ae1674a5a530647e77f9303540fa', class: "header", part: "header" }, h("mds-text", { key: '5fafac003285baa5d6d7cc62e9d4e4960b2e6a4b', class: "label", typography: "label" }, h("slot", { key: 'a8ed6b9ed62609a2f308e205419ccb822c5d330a' })), h("mds-text", { key: '0a2d6f18a4b0ed1efe8a7268aad848841d4291bb', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '3686881a383b073db00887c011e8dc1c7324c77f', class: "range" }, h("div", { key: '6acdd16108a2d21ced425bcde5dedaafb56729b9', class: "track", part: "track" }, h("div", { key: 'ac2ec72946c8971764189c987762700786e782b8', class: "contrast-area" }), h("div", { key: 'dd3336b85af882a8d2e97d856a1ac4c585dc8cd9', class: "track-total" }, h("div", { key: '2d2689cc0696a679726b353ccc8284cb80dd6ef7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '38cfab4ef130022b6e8d0673431174801c6beac5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'a200a0ed9cc3735eab347999773ca856c8d2ded1' }, h("header", { key: 'b52c4601e16f356d76bffcb2018bc8cd66d2dbab', class: "header", part: "header" }, h("mds-text", { key: '7af7d0c88bb393bd1cad2c5a40a56fd26930e4fc', class: "label", typography: "label" }, h("slot", { key: '7f1482ea2b4f1ea553691f7613b9180e3447cc64' })), h("mds-text", { key: 'e8246bdc6dbeb8b5efaf3f2170e32cf725fb1462', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '1b8ee03cf6ad4213d9370bae15b3db0bb4e3bec3', class: "range" }, h("div", { key: 'e01ea5fb7bb7217c6e94a4f606ab3567bf6946c3', class: "track", part: "track" }, h("div", { key: 'a5b33522f8605dad0e07a02749e8905cbe23e689', class: "contrast-area" }), h("div", { key: '14699dffa17f50a13e008bae4c79b507cf1454dd', class: "track-total" }, h("div", { key: 'b601caf89612bb39ac586b77e14d7e86730098b7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: 'ea2948160dce05d3bdebbcf2f76adf01fb5159e5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }