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

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

@@ -2,10 +2,12 @@ import { Host, h, } from "@stencil/core";
 import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 // TODO add input validation manager for error message
 export class MdsInputDate {
     constructor() {
         this.isSlotted = false;
+        this.empty = undefined;
         this.t = new Locale({
             el: {},
             en: {},
@@ -55,14 +57,15 @@ export class MdsInputDate {
             const input = event.target;
             this.touched = true;
             // manage case when i insert 0 on date and default input behavior change in 01 instead of resetting all date
-            if (input.value)
+            if (input.value !== '')
                 this.value = input.value;
-            this.validateValue();
+            this.validateValue(input.validity.badInput);
         };
         this.onBlur = (ev) => {
             const input = ev.target;
             this.hasFocus = false;
             this.value = input.value;
+            this.validateValue(input.validity.badInput);
         };
         this.onFocus = (ev) => {
             const input = ev.target;
@@ -75,7 +78,24 @@ export class MdsInputDate {
                 }, 10);
             }
         };
+        this.handleOpenCalendarClick = () => {
+            this.calendarKey += 1;
+        };
+        this.handleCalendarChange = (ev) => {
+            this.value = ev.detail.startDate;
+            if (this.delay === 0)
+                return;
+            const { dropdownRef } = this;
+            if (dropdownRef) {
+                setTimeout(() => {
+                    dropdownRef.visible = false;
+                }, this.delay);
+            }
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -83,45 +103,82 @@ export class MdsInputDate {
         this.valueChange.emit(this.value);
         this.validateValue();
     }
-    validateValue() {
+    validateValue(hasBadInput = false) {
         const date = DateTime.fromISO(this.value);
-        const isInvalidDate = date.invalid;
-        const outOfRange = (this.max && DateTime.fromISO(this.max) < date) ||
-            (this.min && DateTime.fromISO(this.min) > date);
-        if ((isInvalidDate && this.required) || outOfRange) {
+        const hasValue = Boolean(this.value);
+        const hasInvalidValue = hasValue && !date.isValid;
+        const isMissingRequiredValue = this.required && !hasValue;
+        const outOfRange = date.isValid &&
+            ((this.max && DateTime.fromISO(this.max) < date) ||
+                (this.min && DateTime.fromISO(this.min) > date));
+        if (hasBadInput || hasInvalidValue || isMissingRequiredValue || outOfRange) {
             this.isValid = false;
             this.variant = 'error';
             this.internals.setFormValue(null);
+            this.empty = hasBadInput || hasInvalidValue ? true : undefined;
         }
         else {
             this.isValid = true;
             this.variant = 'primary';
             this.internals.setFormValue(this.value);
+            this.empty = undefined;
         }
         this.validationEvent.emit(this.isValid);
     }
+    /**
+     * Sets focus on the underlying input element.
+     */
     async focusInput() {
         var _a;
         const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input');
         input.focus();
     }
+    /**
+     * Sets the input value.
+     * @param value the value to set, in ISO format (YYYY-MM-DD)
+     */
     async setValue(value) {
         this.value = value;
         this.validateValue();
         return Promise.resolve();
     }
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     async getErrors() {
         return Promise.resolve(this.isValid ? null : { error: '' });
     }
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    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;
+        (_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);
+    }
     componentWillLoad() {
-        this.isSlotted = !!this.host.getAttribute('slot');
+        this.isSlotted = !(this.host.getAttribute('slot') === null || this.host.getAttribute('slot') === '');
         this.value = this.value || '';
         this.language = this.t.lang(this.host);
         // 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) {
@@ -131,19 +188,7 @@ export class MdsInputDate {
         this.validateValue();
     }
     render() {
-        return (h(Host, { key: '8efaa64794d705ab057db7b0b7743b588e35a3e7' }, h("input", { key: '1e109892c36eae01e91d2aa5860b446c5d983006', 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("div", { key: '3e9fb074efbfc12022587a627ea4815ec1428d31', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'd4cd21ec69ea8b30cf8fcd95b4052b401e1435a2', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: miBaselineCalendarToday, onClick: () => {
-                this.calendarKey += 1;
-            } }))), h("mds-input-tip", { key: '472adce47e2ad731fc1c742919ed2b6b32504558', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '108c1310e84fce62fe49b7c19662e73535720807', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'bcbc3b4374824307b4e8b473a4a8b4d62a1bfd30', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'e9bea14210b583a0a16c353ad402520df436f957', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (h("mds-dropdown", { key: 'a567e5b0e1ce481d9829b0438d235c87f77153ef', 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;
-                const { dropdownRef } = this;
-                if (dropdownRef) {
-                    setTimeout(() => {
-                        dropdownRef.visible = false;
-                    }, this.delay);
-                }
-            }, startDate: this.value }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))))));
+        return (h(Host, { key: '4d896aae88a4637f371861ee251e2337530baded', empty: this.empty, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("input", { key: '5e58df1c7b4e43e9c31c2660d31180efd2ac813e', 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("div", { key: 'bd68590ff1bbbc0a3a744e44e88d6a3bca11fdca', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'f3bd3316bce646eb4df4eb368a952096397447e7', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: miBaselineCalendarToday, onClick: this.handleOpenCalendarClick }))), h("mds-input-tip", { key: '9f4264859de66046a3761ec96083c09c53bdced9', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '8be9f58f10be7407d6c76d5e7b79e2faaa6aaa86', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '144bce0f9a1a67593be23decd4a59e34c342b359', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'efcafab1b01ddb3983299273dbddae86af6f621d', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (h("mds-dropdown", { key: 'df129e18751e4312509dc60ea4538fb4797071ff', placement: "bottom-end", "disable-auto-placement": true, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: this.handleCalendarChange, startDate: this.value }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))))));
     }
     static get is() { return "mds-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -362,6 +407,11 @@ export class MdsInputDate {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
+            "empty": {},
             "isValid": {},
             "language": {},
             "touched": {},
@@ -394,7 +444,7 @@ export class MdsInputDate {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the selected date value changes."
                 },
                 "complexType": {
                     "original": "string",
@@ -418,7 +468,7 @@ export class MdsInputDate {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },
@@ -439,7 +489,7 @@ export class MdsInputDate {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Sets focus on the underlying input element.",
                     "tags": []
                 }
             },
@@ -449,7 +499,7 @@ export class MdsInputDate {
                     "parameters": [{
                             "name": "value",
                             "type": "string",
-                            "docs": ""
+                            "docs": "the value to set, in ISO format (YYYY-MM-DD)"
                         }],
                     "references": {
                         "Promise": {
@@ -460,8 +510,11 @@ export class MdsInputDate {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Sets the input value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value the value to set, in ISO format (YYYY-MM-DD)"
+                        }]
                 }
             },
             "getErrors": {
@@ -483,8 +536,11 @@ export class MdsInputDate {
                     "return": "Promise<MdsValidationErrors | null>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Returns the current validation errors, or `null` if the value is valid.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "the validation errors, or `null` when valid"
+                        }]
                 }
             }
         };

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

@@ -15,6 +15,7 @@ mds-text {
 
 /**
  * @prop --mds-input-date-range-background: Sets the background-color of the component
+ * @prop --mds-input-date-range-calendar-width: Sets the width of each calendar shown in the dropdown
  * @prop --mds-input-date-range-fields-firefox-justify-content: Sets the justify-content of the component in Firefox
  * @prop --mds-input-date-range-fields-gap: Sets the gap between the fields of the component
  * @prop --mds-input-date-range-icon-color: Sets the icon color of the component
@@ -29,6 +30,12 @@ mds-text {
   syntax: '<color>';
 }
 
+@property --mds-input-date-range-calendar-width {
+  inherits: false;
+  initial-value: 22rem;
+  syntax: '<length>';
+}
+
 @property --mds-input-date-range-fields-firefox-justify-content {
   inherits: false;
   initial-value: start;
@@ -69,6 +76,7 @@ mds-text {
 
 :host {
   --mds-input-date-range-background: rgb(var(--tone-neutral, 0 0 0));
+  --mds-input-date-range-calendar-width: 22rem;
   --mds-input-date-range-fields-firefox-justify-content: start;
   --mds-input-date-range-fields-gap: 0 --spacing(200);
   --mds-input-date-range-icon-color: rgb(var(--variant-primary-03, 211 226 255));
@@ -77,6 +85,10 @@ mds-text {
     0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb, 0 0 0) / 0.1),
     0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb, 0 0 0) / 0.06);
   --mds-input-date-range-variant-color-rgb: 0 0 0;
+  --mds-input-date-range-transition-duration: var(--duration-300, 300ms);
+
+  /* private */
+  --private-input-date-range-transition-duration: var(--mds-input-date-range-transition-duration);
 
   @apply text-info-detail;
 
@@ -116,7 +128,7 @@ mds-text {
   padding-left: --spacing(400);
   padding-right: --spacing(1200);
   text-overflow: ellipsis;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-date-range-transition-duration);
   transition-property:
     background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
@@ -160,10 +172,38 @@ mds-text {
   margin-left: 0;
 }
 
-mds-calendar {
+.calendars {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: --spacing(200);
+  min-width: max-content;
+}
+
+.calendar-preselection-panel {
+  align-content: start;
+  background-color: rgb(var(--tone-neutral-09, 76 76 76));
+  border-radius: var(--radius-lg, 16px);
+  box-sizing: border-box;
+  display: grid;
+  min-inline-size: max-content;
+  padding: --spacing(400);
+}
+
+.calendar-single {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: --spacing(200);
   min-width: max-content;
 }
 
+.calendar-single mds-calendar,
+.calendars mds-calendar {
+  flex: 0 0 var(--mds-input-date-range-calendar-width, 22rem);
+  inline-size: var(--mds-input-date-range-calendar-width, 22rem);
+  max-inline-size: var(--mds-input-date-range-calendar-width, 22rem);
+  min-inline-size: var(--mds-input-date-range-calendar-width, 22rem);
+}
+
 .action-open-calendar-wrapper {
   align-items: center;
   aspect-ratio: 1;
@@ -183,20 +223,31 @@ mds-dropdown {
   padding: 0;
 }
 
-:host-context(:root.pref-animation-reduce) .input {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-input-date-range-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .input {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-date-range-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-input-date-range-ring: var(--shadow-outline-50);
   --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -207,8 +258,8 @@ mds-dropdown {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-input-date-range-ring: var(--shadow-outline-50);
     --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -219,7 +270,12 @@ mds-dropdown {
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   --mds-input-date-range-ring: var(--shadow-outline-strong-50);
   --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));
@@ -230,8 +286,8 @@ mds-dropdown {
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     --mds-input-date-range-ring: var(--shadow-outline-strong-50);
     --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));