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

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

@@ -3,15 +3,22 @@ import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import clsx from "clsx";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 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 +51,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 +68,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 +92,161 @@ 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();
+        };
+        this.handleCalendarPreselect = () => {
+            this.checkPreselections();
+        };
+        this.handleOpenCalendarClick = () => {
+            this.calendarKey += 1;
+        };
     }
+    /**
+     * 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 +259,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) {
@@ -117,21 +270,46 @@ export class MdsInputDateRange {
         }
         this.syncFormValue();
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     disconnectedCallback() {
+        var _a, _b, _c, _d, _e;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
         this.host.removeEventListener('focusout', this.handleFocusOut);
+        (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.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 +323,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 +352,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 +374,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 +388,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 +415,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 +426,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 +443,25 @@ 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.handleCalendarPreselect, 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.handleCalendarPreselect, 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.handleCalendarPreselect, 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: () => {
-                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" }))))));
+        return (h(Host, { key: '70d713a2ba286fe3ee69feb5b804e043c0357166', onClick: this.focusDateInput, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '35518a0ed132cd6977c0a557a2f45438c7a9db6b', class: "inputs" }, h("div", { key: 'befa6ce8026d0f02451c5bda8f174252214a3457', class: "input-element" }, h("mds-text", { key: '7919fc8583f940b6a7ab46f6da35067c245f1c4e', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: '9a9d1e950e8523423fba228b66b99d63722ae3f3', class: "input-wrapper" }, h("slot", { key: 'a4c7031eb4db25ebe766650676475a1b70c7a27f', name: "start" }))), h("div", { key: 'c033efadef102cac6d615505e1b8cd476e4bd911', class: "input-element" }, h("mds-text", { key: 'fe5cbbbb85d2f4895236de71c79b3850c076fbac', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '64e5392cb8d476e099d3efcd4b86958f2601986f', class: "input-wrapper" }, h("slot", { key: 'c2ff17f4e61a42a8afe50488847ccd3b71c670cf', name: "end" })))), h("div", { key: '8e3d4fecf6eca2c7cfc90aa3cec5835626a33cbc', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'c12b6fcbe2a7e233ba45a224620a26f37200e097', class: "action-open-calendar", variant: "dark", tone: "text", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: this.handleOpenCalendarClick })), h("mds-dropdown", { key: 'eb088ba8ec6c6c82373efa9f5dad8cae23c63604', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "disable-auto-placement": true, 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 +597,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,
@@ -451,9 +640,14 @@ export class MdsInputDateRange {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "calendarKey": {},
             "internalStartDate": {},
             "internalEndDate": {},
+            "visibleCalendarDate": {},
             "dropdownRef": {},
             "hasPreselection": {},
             "language": {}
@@ -461,21 +655,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 +662,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 +686,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 +696,7 @@ export class MdsInputDateRange {
                     "parameters": [{
                             "name": "event",
                             "type": "EventDate",
-                            "docs": ""
+                            "docs": "the preselection range to apply"
                         }],
                     "references": {
                         "Promise": {
@@ -537,8 +716,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.css

@@ -129,3 +129,51 @@ mds-text {
   --mds-input-field-message-background: rgb(var(--status-error-09, 135 0 14));
 }
 
+/* Propagate the field variant to the slotted input from the parent via
+ * ::slotted, instead of the input reading its field. Cross-browser (no
+ * :host-context); ::slotted (outer tree) wins over the input's own variant. */
+
+:host([variant='info']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-info-04, 159 216 241));
+  --mds-input-tip-background: rgb(var(--status-info-05, 112 198 234));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='info']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-info-05, 112 198 234));
+  --mds-input-variant-color-rgb: var(--status-info-04, 159 216 241);
+}
+
+:host([variant='warning']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-warning-04, 255 200 33));
+  --mds-input-tip-background: rgb(var(--status-warning-05, 237 177 0));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='warning']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-warning-05, 237 177 0));
+  --mds-input-variant-color-rgb: var(--status-warning-04, 255 200 33);
+}
+
+:host([variant='success']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-success-04, 158 222 181));
+  --mds-input-tip-background: rgb(var(--status-success-05, 107 206 147));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='success']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-success-05, 107 206 147));
+  --mds-input-variant-color-rgb: var(--status-success-04, 158 222 181);
+}
+
+:host([variant='error']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-error-04, 254 193 189));
+  --mds-input-tip-background: rgb(var(--status-error-05, 250 165 160));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='error']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-error-05, 250 165 160));
+  --mds-input-variant-color-rgb: var(--status-error-04, 254 193 189);
+}
+