@maggioli-design-system/magma 1.11.1 → 1.11.2

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

@@ -74,6 +74,7 @@ export class MdsInputDate {
     handleValue() {
         this.valueChange.emit(this.value);
         this.validateValue();
+        this.internals.setFormValue(this.value);
     }
     validateValue() {
         const date = DateTime.fromISO(this.value);
@@ -120,10 +121,10 @@ export class MdsInputDate {
         this.validateValue();
     }
     render() {
-        return (h(Host, { key: '919d453601a3562de46f9439d3dad1f1eaf3a5e1' }, h("input", { key: '8719aa7ed95ed718ec05dd8d9b52e890696692b0', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && h("mds-button", { key: '82957882c6a88bbc3163d1d0f1cfec0352ce5822', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
+        return (h(Host, { key: '5c8a9e0aa8f76679abfbdaa2c709ae11312ee46d' }, h("input", { key: '1f6dddc1ed8477f8b6160d90f7bf15c6d711ef95', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && h("mds-button", { key: 'caefb1f5d8da17ea06dfc547902e19900cd02abf', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-input-tip", { key: '7fddea55e6476b4d9ed66fcc2d9008b9887d8bd8', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '6dadfde7538194e26a86558fe3f2ed912bd951c3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'b18b6d06a2ece4f74fdaa93081fe3761675c5337', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'b1bc792f3a3a6f3763d6616efccee124025b85ed', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && h("mds-dropdown", { key: 'e8a3ce8caf29684848cf698d58c838bd5ce10e0b', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+            } }), h("mds-input-tip", { key: '3f60d0e56e101776b19c1564d92f361b3f0178d7', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '25a86b26eb2bd743d0291ff1514828274d13ae17', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'c63d2f830dec87f180bc828b16cebd8e8d8a7060', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '2d2e3f021e3e4ef8c99be55132edf4f99be3b900', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && h("mds-dropdown", { key: '370a33a1f273a3eafc045c1e62c84db41ff52c23', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -137,6 +138,7 @@ export class MdsInputDate {
     }
     static get is() { return "mds-input-date"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["mds-input-date.css"]
@@ -172,6 +174,25 @@ export class MdsInputDate {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is needed to reference the form data after the form is submitted"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
             "variant": {
                 "type": "string",
                 "mutable": true,
@@ -427,4 +448,5 @@ export class MdsInputDate {
                 "methodName": "handleValue"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -46,12 +46,15 @@ export class MdsInputDateRange {
         this.delay = 500;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
+        this.initialStartDate = '';
+        this.initialEndDate = '';
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = DateTime.fromISO(this.internalStartDate).isValid;
                 const endValid = DateTime.fromISO(this.internalEndDate).isValid;
                 if (startValid && endValid) {
                     this.validateDateRange();
+                    this.syncFormValue();
                     this.dateRangeSelected.emit({
                         startDate: this.internalStartDate,
                         endDate: this.internalEndDate,
@@ -92,10 +95,18 @@ export class MdsInputDateRange {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    handleStartDateChange(newValue) {
+        this.syncExternalDate('start', newValue);
+    }
+    handleEndDateChange(newValue) {
+        this.syncExternalDate('end', newValue);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         this.internalStartDate = this.startDate;
         this.internalEndDate = this.endDate;
+        this.initialStartDate = this.startDate;
+        this.initialEndDate = this.endDate;
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
             const minDate = DateTime.fromISO(this.min);
@@ -104,6 +115,7 @@ export class MdsInputDateRange {
                 this.max = this.min;
             }
         }
+        this.syncFormValue();
     }
     disconnectedCallback() {
         this.host.removeEventListener('focusout', this.handleFocusOut);
@@ -132,6 +144,7 @@ export class MdsInputDateRange {
             this.internalEndDate = event.start;
         }
         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);
@@ -151,8 +164,35 @@ export class MdsInputDateRange {
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
+        this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
     }
+    formResetCallback() {
+        this.internalStartDate = this.initialStartDate;
+        this.internalEndDate = this.initialEndDate;
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
+    syncExternalDate(slotName, newValue) {
+        const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        if (slotName === 'start') {
+            if (normalizedValue === this.internalStartDate)
+                return;
+            this.internalStartDate = normalizedValue;
+        }
+        else {
+            if (normalizedValue === this.internalEndDate)
+                return;
+            this.internalEndDate = normalizedValue;
+        }
+        this.validateDateRange();
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
     updateInputValue(slotName, newValue) {
         var _a;
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
@@ -184,6 +224,7 @@ export class MdsInputDateRange {
             else {
                 this.internalEndDate = event.detail;
             }
+            this.syncFormValue();
         };
     }
     validateDateRange() {
@@ -216,15 +257,16 @@ export class MdsInputDateRange {
         }
     }
     render() {
-        return (h(Host, { key: '87bc93e3ba8c10014314fe59c88828b177b55987', onClick: this.focusDateInput }, h("div", { key: '2478b4872d46a1d33b599c801aa30873dffd3c25', class: "inputs" }, h("div", { key: '3f72fcd97352cf3888d5b587663800215667872d', class: "input-element" }, h("mds-text", { key: 'ba67d3289b98e14174ffd604ecd54f3b0c6833a5', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'c10c4bd3370718bc0dfb936975cd2dce81f9b7bc', class: "input-wrapper" }, h("slot", { key: 'e6a6b581dc39762dbc0e367210062f4f63c9478b', name: "start" }))), h("div", { key: '8658594956535092337cc51e26cd54993db8443b', class: "input-element" }, h("mds-text", { key: '107a4e93daa542fa29b6fe8f9f3e2e4defc5d56c', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: 'daf6119806dfa6a994decc07a5b1a099a4107718', class: "input-wrapper" }, h("slot", { key: '63a57af7769c024e3db1b94ed30e8f4dd2e481f2', name: "end" })))), h("mds-button", { key: '02257966418bbebcdcfb9bc9193ad04292b72310', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (h(Host, { key: 'a0d2991f2840c21d10410d9a2759bea2140b5fb8', onClick: this.focusDateInput }, h("div", { key: '42a70b643de49c02a1db422e9f7e69c4c16b5df2', class: "inputs" }, h("div", { key: '9aaef7664e161099e93dcf09f70e8a12ac26cba5', class: "input-element" }, h("mds-text", { key: 'd7a2f85dbd2ad2d4f2dbeefcad2d23c7062fa193', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'c430288d5850666258269faf269934c9771b62bf', class: "input-wrapper" }, h("slot", { key: '3cfdeacc1c9b024ce7f5a2a306425eeaa51f1130', name: "start" }))), h("div", { key: 'e8543d95071704939d879f87790f0fc711a34046', class: "input-element" }, h("mds-text", { key: '125cb1e5b7fe872f353624555af070cad0da30b0', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '35884f542a3ebd824dab00a514e3aec69c79ae11', class: "input-wrapper" }, h("slot", { key: '74f1b59daecc34daf576297c93fff43071dccabd', name: "end" })))), h("mds-button", { key: 'be0b0f4af844d95a82211330de00c3545b136da3', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-dropdown", { key: 'fedd04f0c6ded367571785e494c3a7b2cdab72ff', 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 => {
+            } }), h("mds-dropdown", { key: 'd7bd7782dbcb0f7647643d6054b5fec2947e81e9', 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,
@@ -241,10 +283,21 @@ export class MdsInputDateRange {
                 }
             }, onMdsCalendarPreselect: () => {
                 this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: 'b59bd0a9e8ccbdda2f92deeeb6a3a2beaa2df6c2', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: '5afa6af4675eb6cb0da7d95582956852ff28bd69', name: "calendar-preselection" }))))));
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: '5f94b5fef9bdca001020776e18c79875015452c7', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: '58524f199d07343671ffc752be0ed74d21c3f021', name: "calendar-preselection" }))))));
+    }
+    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) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        this.internals.setFormValue(JSON.stringify({ startDate, endDate }));
     }
     static get is() { return "mds-input-date-range"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["mds-input-date-range.css"]
@@ -371,6 +424,25 @@ export class MdsInputDateRange {
                 "attribute": "delay",
                 "reflect": true,
                 "defaultValue": "500"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is needed to reference the form data after the form is submitted"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
             }
         };
     }
@@ -469,4 +541,14 @@ export class MdsInputDateRange {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "startDate",
+                "methodName": "handleStartDateChange"
+            }, {
+                "propName": "endDate",
+                "methodName": "handleEndDateChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -89,7 +89,7 @@ export class MdsInputRange {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8ef3d8e91f513670ded2b54440c2cf59081ad043' }, h("header", { key: '0ae0ae287bd548ef2dd29175ea240e9509ea5e9f', class: "header", part: "header" }, h("mds-text", { key: '14b5aeb1730b78e6ef17926e5f4a155cde3cefc3', class: "label", typography: "label" }, h("slot", { key: '29c45883d11972044d4ff2ff2ea70e01bd168977' })), h("mds-text", { key: '2c65ae671adac27f48e6eef00826a1ef369f685b', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: 'e5fdc71dbb6ba051112cef1ba5b17859754bcb72', class: "range" }, h("div", { key: '2bfc474aca9f677e848593d349c0c5dd052fb0f2', class: "track", part: "track" }, h("div", { key: '61b7bf624ef480a92b44c94733aad57f079ff0c4', class: "contrast-area" }), h("div", { key: '5ae1a21d4d86eae64971430b7cef2564e33ccbf1', class: "track-total" }, h("div", { key: '159bb9337266e815178539a9bdb54a251533549e', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '90848f5d69e23f671250b61468cc8572f99f73cc', 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 }))));
+        return (h(Host, { key: '2d5f241c653b2c34225a94f3c0d782c9a8b34583' }, h("header", { key: 'ac46c16897c7a1d63b9887ca9580a8b33da77bb3', class: "header", part: "header" }, h("mds-text", { key: '0f93eec8872302990d9c42fd9a7f5a8d262f6112', class: "label", typography: "label" }, h("slot", { key: '7762eaa602de8d50af9a8184709fd147d44a38e9' })), h("mds-text", { key: '3f7d37ce1d04675bcf37602636c0ff8c6a8cc4ed', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: 'c1f864c056a9bf9e533cee469fa4b65492c15573', class: "range" }, h("div", { key: '00af079b65bed2f361cc28ebb968c914a841ebe4', class: "track", part: "track" }, h("div", { key: 'de58f9fa9d557ce7878a899eb99f22d5594e30d9', class: "contrast-area" }), h("div", { key: '4a5f74d269710d7bc6e5c17cf5a76608c5d4efa7', class: "track-total" }, h("div", { key: '6622da98d34831538a686d8c08637e52df8a35b2', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '6a41ec9f335ae724811adf9f6b274aa763e2bc0e', 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"; }
@@ -123,6 +123,25 @@ export class MdsInputRange {
                 "getter": false,
                 "setter": false
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is needed to reference the form data after the form is submitted"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
             "max": {
                 "type": "number",
                 "mutable": false,

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

@@ -48,6 +48,7 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
         this.__attachShadow();
         this.dateRangeSelected = createEvent(this, "mdsInputDateRangeSelect", 7);
         this.valueChanged = createEvent(this, "mdsInputDateRangeValueChange", 7);
+        this.internals = this.attachInternals();
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
@@ -85,12 +86,15 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
         this.delay = 500;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
+        this.initialStartDate = '';
+        this.initialEndDate = '';
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = DateTime_1.fromISO(this.internalStartDate).isValid;
                 const endValid = DateTime_1.fromISO(this.internalEndDate).isValid;
                 if (startValid && endValid) {
                     this.validateDateRange();
+                    this.syncFormValue();
                     this.dateRangeSelected.emit({
                         startDate: this.internalStartDate,
                         endDate: this.internalEndDate,
@@ -131,10 +135,18 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    handleStartDateChange(newValue) {
+        this.syncExternalDate('start', newValue);
+    }
+    handleEndDateChange(newValue) {
+        this.syncExternalDate('end', newValue);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         this.internalStartDate = this.startDate;
         this.internalEndDate = this.endDate;
+        this.initialStartDate = this.startDate;
+        this.initialEndDate = this.endDate;
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
             const minDate = DateTime_1.fromISO(this.min);
@@ -143,6 +155,7 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
                 this.max = this.min;
             }
         }
+        this.syncFormValue();
     }
     disconnectedCallback() {
         this.host.removeEventListener('focusout', this.handleFocusOut);
@@ -171,6 +184,7 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
             this.internalEndDate = event.start;
         }
         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);
@@ -190,8 +204,35 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
+        this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
     }
+    formResetCallback() {
+        this.internalStartDate = this.initialStartDate;
+        this.internalEndDate = this.initialEndDate;
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
+    syncExternalDate(slotName, newValue) {
+        const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        if (slotName === 'start') {
+            if (normalizedValue === this.internalStartDate)
+                return;
+            this.internalStartDate = normalizedValue;
+        }
+        else {
+            if (normalizedValue === this.internalEndDate)
+                return;
+            this.internalEndDate = normalizedValue;
+        }
+        this.validateDateRange();
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
     updateInputValue(slotName, newValue) {
         var _a;
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
@@ -223,6 +264,7 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
             else {
                 this.internalEndDate = event.detail;
             }
+            this.syncFormValue();
         };
     }
     validateDateRange() {
@@ -255,15 +297,16 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
         }
     }
     render() {
-        return (h(Host, { key: '87bc93e3ba8c10014314fe59c88828b177b55987', onClick: this.focusDateInput }, h("div", { key: '2478b4872d46a1d33b599c801aa30873dffd3c25', class: "inputs" }, h("div", { key: '3f72fcd97352cf3888d5b587663800215667872d', class: "input-element" }, h("mds-text", { key: 'ba67d3289b98e14174ffd604ecd54f3b0c6833a5', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'c10c4bd3370718bc0dfb936975cd2dce81f9b7bc', class: "input-wrapper" }, h("slot", { key: 'e6a6b581dc39762dbc0e367210062f4f63c9478b', name: "start" }))), h("div", { key: '8658594956535092337cc51e26cd54993db8443b', class: "input-element" }, h("mds-text", { key: '107a4e93daa542fa29b6fe8f9f3e2e4defc5d56c', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: 'daf6119806dfa6a994decc07a5b1a099a4107718', class: "input-wrapper" }, h("slot", { key: '63a57af7769c024e3db1b94ed30e8f4dd2e481f2', name: "end" })))), h("mds-button", { key: '02257966418bbebcdcfb9bc9193ad04292b72310', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (h(Host, { key: 'a0d2991f2840c21d10410d9a2759bea2140b5fb8', onClick: this.focusDateInput }, h("div", { key: '42a70b643de49c02a1db422e9f7e69c4c16b5df2', class: "inputs" }, h("div", { key: '9aaef7664e161099e93dcf09f70e8a12ac26cba5', class: "input-element" }, h("mds-text", { key: 'd7a2f85dbd2ad2d4f2dbeefcad2d23c7062fa193', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'c430288d5850666258269faf269934c9771b62bf', class: "input-wrapper" }, h("slot", { key: '3cfdeacc1c9b024ce7f5a2a306425eeaa51f1130', name: "start" }))), h("div", { key: 'e8543d95071704939d879f87790f0fc711a34046', class: "input-element" }, h("mds-text", { key: '125cb1e5b7fe872f353624555af070cad0da30b0', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '35884f542a3ebd824dab00a514e3aec69c79ae11', class: "input-wrapper" }, h("slot", { key: '74f1b59daecc34daf576297c93fff43071dccabd', name: "end" })))), h("mds-button", { key: 'be0b0f4af844d95a82211330de00c3545b136da3', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-dropdown", { key: 'fedd04f0c6ded367571785e494c3a7b2cdab72ff', 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 => {
+            } }), h("mds-dropdown", { key: 'd7bd7782dbcb0f7647643d6054b5fec2947e81e9', 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,
@@ -280,16 +323,32 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
                 }
             }, onMdsCalendarPreselect: () => {
                 this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: 'b59bd0a9e8ccbdda2f92deeeb6a3a2beaa2df6c2', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: '5afa6af4675eb6cb0da7d95582956852ff28bd69', name: "calendar-preselection" }))))));
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: '5f94b5fef9bdca001020776e18c79875015452c7', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: '58524f199d07343671ffc752be0ed74d21c3f021', name: "calendar-preselection" }))))));
+    }
+    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) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        this.internals.setFormValue(JSON.stringify({ startDate, endDate }));
     }
+    static get formAssociated() { return true; }
     get host() { return this; }
+    static get watchers() { return {
+        "startDate": ["handleStartDateChange"],
+        "endDate": ["handleEndDateChange"]
+    }; }
     static get style() { return MdsInputDateRangeStyle0; }
-}, [1, "mds-input-date-range", {
+}, [65, "mds-input-date-range", {
         "startDate": [513, "start-date"],
         "endDate": [513, "end-date"],
         "min": [513],
         "max": [513],
         "delay": [514],
+        "name": [513],
         "calendarKey": [32],
         "internalStartDate": [32],
         "internalEndDate": [32],
@@ -298,6 +357,9 @@ const MdsInputDateRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDateR
         "language": [32],
         "updateLang": [64],
         "preselect": [64]
+    }, undefined, {
+        "startDate": ["handleStartDateChange"],
+        "endDate": ["handleEndDateChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -20,6 +20,7 @@ const MdsInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDate exten
         this.__registerHost();
         this.__attachShadow();
         this.valueChange = createEvent(this, "mdsInputDateSelect", 7);
+        this.internals = this.attachInternals();
         this.isSlotted = false;
         this.t = new Locale({
             el: {},
@@ -89,6 +90,7 @@ const MdsInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDate exten
     handleValue() {
         this.valueChange.emit(this.value);
         this.validateValue();
+        this.internals.setFormValue(this.value);
     }
     validateValue() {
         const date = DateTime_1.fromISO(this.value);
@@ -135,10 +137,10 @@ const MdsInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDate exten
         this.validateValue();
     }
     render() {
-        return (h(Host, { key: '919d453601a3562de46f9439d3dad1f1eaf3a5e1' }, h("input", { key: '8719aa7ed95ed718ec05dd8d9b52e890696692b0', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && h("mds-button", { key: '82957882c6a88bbc3163d1d0f1cfec0352ce5822', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
+        return (h(Host, { key: '5c8a9e0aa8f76679abfbdaa2c709ae11312ee46d' }, h("input", { key: '1f6dddc1ed8477f8b6160d90f7bf15c6d711ef95', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && h("mds-button", { key: 'caefb1f5d8da17ea06dfc547902e19900cd02abf', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-input-tip", { key: '7fddea55e6476b4d9ed66fcc2d9008b9887d8bd8', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '6dadfde7538194e26a86558fe3f2ed912bd951c3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'b18b6d06a2ece4f74fdaa93081fe3761675c5337', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'b1bc792f3a3a6f3763d6616efccee124025b85ed', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && h("mds-dropdown", { key: 'e8a3ce8caf29684848cf698d58c838bd5ce10e0b', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+            } }), h("mds-input-tip", { key: '3f60d0e56e101776b19c1564d92f361b3f0178d7', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '25a86b26eb2bd743d0291ff1514828274d13ae17', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'c63d2f830dec87f180bc828b16cebd8e8d8a7060', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '2d2e3f021e3e4ef8c99be55132edf4f99be3b900', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && h("mds-dropdown", { key: '370a33a1f273a3eafc045c1e62c84db41ff52c23', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -150,13 +152,15 @@ const MdsInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDate exten
                 }
             }, startDate: this.value }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
     }
+    static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "value": ["handleValue"]
     }; }
     static get style() { return MdsInputDateStyle0; }
-}, [1, "mds-input-date", {
+}, [65, "mds-input-date", {
         "value": [513],
+        "name": [513],
         "variant": [1537],
         "min": [1537],
         "max": [1537],

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

@@ -95,7 +95,7 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
     }
     render() {
         var _a;
-        return (h(Host, { key: '8ef3d8e91f513670ded2b54440c2cf59081ad043' }, h("header", { key: '0ae0ae287bd548ef2dd29175ea240e9509ea5e9f', class: "header", part: "header" }, h("mds-text", { key: '14b5aeb1730b78e6ef17926e5f4a155cde3cefc3', class: "label", typography: "label" }, h("slot", { key: '29c45883d11972044d4ff2ff2ea70e01bd168977' })), h("mds-text", { key: '2c65ae671adac27f48e6eef00826a1ef369f685b', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: 'e5fdc71dbb6ba051112cef1ba5b17859754bcb72', class: "range" }, h("div", { key: '2bfc474aca9f677e848593d349c0c5dd052fb0f2', class: "track", part: "track" }, h("div", { key: '61b7bf624ef480a92b44c94733aad57f079ff0c4', class: "contrast-area" }), h("div", { key: '5ae1a21d4d86eae64971430b7cef2564e33ccbf1', class: "track-total" }, h("div", { key: '159bb9337266e815178539a9bdb54a251533549e', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '90848f5d69e23f671250b61468cc8572f99f73cc', 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 }))));
+        return (h(Host, { key: '2d5f241c653b2c34225a94f3c0d782c9a8b34583' }, h("header", { key: 'ac46c16897c7a1d63b9887ca9580a8b33da77bb3', class: "header", part: "header" }, h("mds-text", { key: '0f93eec8872302990d9c42fd9a7f5a8d262f6112', class: "label", typography: "label" }, h("slot", { key: '7762eaa602de8d50af9a8184709fd147d44a38e9' })), h("mds-text", { key: '3f7d37ce1d04675bcf37602636c0ff8c6a8cc4ed', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: 'c1f864c056a9bf9e533cee469fa4b65492c15573', class: "range" }, h("div", { key: '00af079b65bed2f361cc28ebb968c914a841ebe4', class: "track", part: "track" }, h("div", { key: 'de58f9fa9d557ce7878a899eb99f22d5594e30d9', class: "contrast-area" }), h("div", { key: '4a5f74d269710d7bc6e5c17cf5a76608c5d4efa7', class: "track-total" }, h("div", { key: '6622da98d34831538a686d8c08637e52df8a35b2', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '6a41ec9f335ae724811adf9f6b274aa763e2bc0e', 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 formAssociated() { return true; }
     get element() { return this; }
@@ -109,6 +109,7 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
     static get style() { return MdsInputRangeStyle0; }
 }, [65, "mds-input-range", {
         "formatValue": [16],
+        "name": [513],
         "max": [2],
         "min": [2],
         "step": [2],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-18T18:11:02",
+  "timestamp": "2026-03-24T16:26:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -11424,6 +11424,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "Is needed to reference the form data after the form is submitted",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "readonly",
           "type": "boolean | undefined",
@@ -11871,6 +11897,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "Is needed to reference the form data after the form is submitted",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "startDate",
           "type": "string",
@@ -12553,6 +12605,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "Is needed to reference the form data after the form is submitted",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "step",
           "type": "number",