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

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

@@ -1,257 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineCalendarToday } from './calendar-today.js';
-import { D as DateTime, d as defineCustomElement$9 } from './mds-calendar2.js';
-import { L as Locale } from './locale.js';
-import { d as defineCustomElement$a } from './mds-button2.js';
-import { d as defineCustomElement$8 } from './mds-calendar-cell2.js';
-import { d as defineCustomElement$7 } from './mds-dropdown2.js';
-import { d as defineCustomElement$6 } from './mds-icon2.js';
-import { d as defineCustomElement$5 } from './mds-input-tip2.js';
-import { d as defineCustomElement$4 } from './mds-input-tip-item2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsInputDateCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-variant-color-rgb:0 0 0;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-input-date-variant-color-rgb{syntax:\"<integer>+\";inherits:false;initial-value:0 0 0}:host{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-variant-color-rgb:0 0 0}.input::-webkit-calendar-picker-indicator{appearance:textfield;display:none}.input{font-family:var(--font-code,\"Roboto Mono\",\"Courier New\",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:inherit;box-sizing:border-box;color:inherit;corner-shape:inherit;background-color:#0000;border:0;margin:0;overflow:hidden;text-overflow:ellipsis;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty,rgb(var(--status-error-10,115 0 0)));color:var(--mds-input-date-field-color-empty,rgb(var(--status-error-06,239 108 105)))}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{background-color:var(--mds-input-date-background,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);min-height:3rem;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);padding-top:calc(var(--spacing,.0025rem)*300);width:100%}:host(:focus-within) .input{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::placeholder{color:rgb(var(--tone-neutral-04,218 218 218))}.input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-04,218 218 218))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}.input:disabled{background-color:rgb(var(--tone-neutral-10,60 60 60))}.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled:-ms-placeholder-shown{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-icon-color,rgb(var(--variant-primary-03,211 226 255)))}:host([disabled]:not([disabled=false])) .action-open-calendar{-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}mds-calendar{min-width:max-content}mds-dropdown{padding:0}mds-input-tip{--mds-input-tip-horizontal-offset:inherit;--mds-input-tip-horizontal-offset-focused:inherit;--mds-input-tip-vertical-offset:inherit;--mds-input-tip-background:inherit}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-input-tip,mds-input-tip-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}:host-context(:root.pref-contrast-more){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host-context(:root.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus){--mds-input-date-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-date-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-date-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-date-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-date-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-date-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .input{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}}";
-
-const MdsInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputDate extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.validationEvent = createEvent(this, "mdsInputValidation", 7);
-        this.valueChange = createEvent(this, "mdsInputDateSelect", 7);
-        this.internals = this.attachInternals();
-        this.isSlotted = false;
-        this.t = new Locale({
-            el: {},
-            en: {},
-            es: {},
-            it: {},
-        });
-        this.touched = false;
-        /**
-         * Specifies the value of the input
-         * @description It's in ISO format (YYYY-MM-DD).
-         */
-        this.value = '';
-        /**
-         * Sets the variant of the input field
-         */
-        this.variant = 'primary';
-        /**
-         * Specifies the min date of the range, user cannot set dates before this date
-         * @description It's in ISO format (YYYY-MM-DD).
-         */
-        this.min = null;
-        /**
-         * Specifies the max date of the range, user cannot set dates after this date
-         * @description It's in ISO format (YYYY-MM-DD).
-         */
-        this.max = null;
-        /**
-         * Specifies the delay in milliseconds before closing the calendar dropdown, if the value is 0 the dropdown will not close
-         * @description Default is 500
-         */
-        this.delay = 500;
-        /**
-         * If true, the element is displayed as disabled
-         */
-        this.disabled = false;
-        /**
-         * Specifies that the element is read-only
-         */
-        this.readonly = false;
-        /**
-         * Specifies that the element must be filled out before submitting the form
-         */
-        this.required = false;
-        this.calendarKey = 0;
-        this.hasFocus = false;
-        this.handleChange = (event) => {
-            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)
-                this.value = input.value;
-            this.validateValue();
-        };
-        this.onBlur = (ev) => {
-            const input = ev.target;
-            this.hasFocus = false;
-            this.value = input.value;
-        };
-        this.onFocus = (ev) => {
-            const input = ev.target;
-            this.hasFocus = true;
-            if (this.readonly) {
-                // setTimeout to avoid Safari 14.1.2
-                // to unselect text when mouse is clicked slowly
-                setTimeout(() => {
-                    input.select();
-                }, 10);
-            }
-        };
-    }
-    async updateLang() {
-        this.language = this.t.lang(this.host);
-    }
-    handleValue() {
-        this.valueChange.emit(this.value);
-        this.validateValue();
-    }
-    validateValue() {
-        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) {
-            this.isValid = false;
-            this.variant = 'error';
-            this.internals.setFormValue(null);
-        }
-        else {
-            this.isValid = true;
-            this.variant = 'primary';
-            this.internals.setFormValue(this.value);
-        }
-        this.validationEvent.emit(this.isValid);
-    }
-    async focusInput() {
-        var _a;
-        const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input');
-        input.focus();
-    }
-    async setValue(value) {
-        this.value = value;
-        this.validateValue();
-        return Promise.resolve();
-    }
-    async getErrors() {
-        return Promise.resolve(this.isValid ? null : { error: '' });
-    }
-    formResetCallback() {
-        this.internals.setFormValue('');
-    }
-    componentWillLoad() {
-        this.isSlotted = !!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) {
-            const minDate = DateTime.fromISO(this.min);
-            const maxDate = DateTime.fromISO(this.max);
-            if (maxDate < minDate) {
-                this.max = this.min;
-            }
-        }
-        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 } : {})))))));
-    }
-    static get formAssociated() { return true; }
-    get host() { return this; }
-    static get watchers() { return {
-        "value": ["handleValue"]
-    }; }
-    static get style() { return mdsInputDateCss; }
-}, [321, "mds-input-date", {
-        "value": [513],
-        "name": [513],
-        "variant": [1537],
-        "min": [1537],
-        "max": [1537],
-        "delay": [514],
-        "disabled": [516],
-        "readonly": [516],
-        "required": [516],
-        "isValid": [32],
-        "language": [32],
-        "touched": [32],
-        "calendarKey": [32],
-        "dropdownRef": [32],
-        "hasFocus": [32],
-        "updateLang": [64],
-        "focusInput": [64],
-        "setValue": [64],
-        "getErrors": [64]
-    }, undefined, {
-        "value": ["handleValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-input-date", "mds-button", "mds-calendar", "mds-calendar-cell", "mds-dropdown", "mds-icon", "mds-input-tip", "mds-input-tip-item", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-input-date":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsInputDate$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "mds-calendar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "mds-calendar-cell":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mds-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mds-input-tip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-input-tip-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsInputDate = MdsInputDate$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsInputDate, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as a,Host as i,transformTag as o}from"@stencil/core/internal/client";import{m as n}from"./calendar-today.js";import{D as s,d}from"./mds-calendar2.js";import{L as c}from"./locale.js";import{d as l}from"./mds-button2.js";import{d as p}from"./mds-calendar-cell2.js";import{d as u}from"./mds-dropdown2.js";import{d as m}from"./mds-icon2.js";import{d as h}from"./mds-input-tip2.js";import{d as b}from"./mds-input-tip-item2.js";import{d as g}from"./mds-spinner2.js";import{d as v}from"./mds-text2.js";const f=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.validationEvent=e(this,"mdsInputValidation",7),this.valueChange=e(this,"mdsInputDateSelect",7),this.internals=this.attachInternals(),this.isSlotted=!1,this.empty=void 0,this.t=new c({el:{},en:{},es:{},it:{}}),this.touched=!1,this.value="",this.variant="primary",this.min=null,this.max=null,this.delay=500,this.disabled=!1,this.readonly=!1,this.required=!1,this.calendarKey=0,this.hasFocus=!1,this.handleChange=t=>{const r=t.target;this.touched=!0,""!==r.value&&(this.value=r.value),this.validateValue(r.validity.badInput)},this.onBlur=t=>{const r=t.target;this.hasFocus=!1,this.value=r.value,this.validateValue(r.validity.badInput)},this.onFocus=t=>{const r=t.target;this.hasFocus=!0,this.readonly&&setTimeout((()=>{r.select()}),10)}}async updateLang(){this.language=this.t.lang(this.host)}handleValue(){this.valueChange.emit(this.value),this.validateValue()}validateValue(t=!1){const r=s.fromISO(this.value),e=!!this.value,a=e&&!r.isValid,i=this.required&&!e,o=r.isValid&&(this.max&&s.fromISO(this.max)<r||this.min&&s.fromISO(this.min)>r);t||a||i||o?(this.isValid=!1,this.variant="error",this.internals.setFormValue(null),this.empty=!(!t&&!a)||void 0):(this.isValid=!0,this.variant="primary",this.internals.setFormValue(this.value),this.empty=void 0),this.validationEvent.emit(this.isValid)}async focusInput(){var t;(null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".input")).focus()}async setValue(t){return this.value=t,this.validateValue(),Promise.resolve()}async getErrors(){return Promise.resolve(this.isValid?null:{error:""})}formResetCallback(){this.internals.setFormValue("")}componentWillLoad(){if(this.isSlotted=!(null===this.host.getAttribute("slot")||""===this.host.getAttribute("slot")),this.value=this.value||"",this.language=this.t.lang(this.host),null!==this.min&&""!==this.min&&null!==this.max&&""!==this.max){const t=s.fromISO(this.min);s.fromISO(this.max)<t&&(this.max=this.min)}this.validateValue()}render(){return a(i,{key:"1c3f9c46a1a1bc77e6639135ffe9615b91754289",empty:this.empty},a("input",{key:"e8867ce0ccc07885b616cd0c898859d4d378d70c",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&&a("div",{key:"82e8e07567fceed4f0a589f8ceac9057c9aaa324",class:"action-open-calendar-wrapper"},a("mds-button",{key:"9c22475d725089ae3ccfe4c39aac26149726e8ff",id:"calendar-dropdown",class:"action-open-calendar",disabled:this.disabled,variant:"dark",tone:"text",icon:n,onClick:()=>{this.calendarKey+=1}})),a("mds-input-tip",{key:"3b4a5d49acf05f853839b7317a2e8bfe8d7d487d",lang:this.language,position:"top",active:this.hasFocus},this.disabled&&a("mds-input-tip-item",{key:"987565a2df5bcaf1a538f3bf276cd6f7a12811a9",expanded:!0,variant:"disabled"}),this.readonly&&a("mds-input-tip-item",{key:"b51c192d654c65279fb2bdb0eb43952cc51e02e0",expanded:!0,variant:"readonly"}),this.required&&a("mds-input-tip-item",{key:"acd20e717f7abab93a5750f7125f06f55d618da8",expanded:this.hasFocus,variant:this.isValid?"required-success":"required"})),!this.isSlotted&&a("mds-dropdown",{key:"9c2d0e843d019c530509f30cd37e890f5ab351a8",placement:"bottom-end","auto-placement":!1,ref:t=>this.dropdownRef=t,target:"#calendar-dropdown"},a("mds-calendar",Object.assign({key:this.calendarKey,rangePicker:!1,lang:this.language,onMdsCalendarChange:t=>{if(this.value=t.detail.startDate,0===this.delay)return;const{dropdownRef:r}=this;r&&setTimeout((()=>{r.visible=!1}),this.delay)},startDate:this.value},null!==this.min&&""!==this.min?{min:this.min}:{},null!==this.max&&""!==this.max?{max:this.max}:{}))))}static get formAssociated(){return!0}get host(){return this}static get watchers(){return{value:[{handleValue:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-variant-color-rgb:0 0 0;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-input-date-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}:host{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-variant-color-rgb:0 0 0}.input::-webkit-calendar-picker-indicator{appearance:textfield;display:none}.input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:inherit;box-sizing:border-box;color:inherit;corner-shape:inherit;background-color:#0000;border:0;margin:0;overflow:hidden;text-overflow:ellipsis;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty,rgb(var(--status-error-10,115 0 0)));color:var(--mds-input-date-field-color-empty,rgb(var(--status-error-06,239 108 105)))}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{background-color:var(--mds-input-date-background,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);min-height:3rem;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);padding-top:calc(var(--spacing,.0025rem)*300);width:100%}:host(:focus-within) .input{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::placeholder{color:rgb(var(--tone-neutral-04,218 218 218))}.input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-04,218 218 218))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}.input:disabled{background-color:rgb(var(--tone-neutral-10,60 60 60))}.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled:-ms-placeholder-shown{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-icon-color,rgb(var(--variant-primary-03,211 226 255)))}:host([disabled]:not([disabled=false])) .action-open-calendar{-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}mds-calendar{min-width:max-content}mds-dropdown{padding:0}mds-input-tip{--mds-input-tip-horizontal-offset:inherit;--mds-input-tip-horizontal-offset-focused:inherit;--mds-input-tip-vertical-offset:inherit;--mds-input-tip-background:inherit}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-input-tip,mds-input-tip-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}:host-context(:root.pref-contrast-more){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host-context(:root.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus){--mds-input-date-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-date-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-date-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-date-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-date-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-date-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .input{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}}'}},[65,"mds-input-date",{value:[513],name:[513],variant:[1537],min:[1537],max:[1537],delay:[514],disabled:[516],readonly:[516],required:[516],empty:[32],isValid:[32],language:[32],touched:[32],calendarKey:[32],dropdownRef:[32],hasFocus:[32],updateLang:[64],focusInput:[64],setValue:[64],getErrors:[64]},void 0,{value:[{handleValue:0}]}]),y=f,x=function(){"undefined"!=typeof customElements&&["mds-input-date","mds-button","mds-calendar","mds-calendar-cell","mds-dropdown","mds-icon","mds-input-tip","mds-input-tip-item","mds-spinner","mds-text"].forEach((t=>{switch(t){case"mds-input-date":customElements.get(o(t))||customElements.define(o(t),f);break;case"mds-button":customElements.get(o(t))||l();break;case"mds-calendar":customElements.get(o(t))||d();break;case"mds-calendar-cell":customElements.get(o(t))||p();break;case"mds-dropdown":customElements.get(o(t))||u();break;case"mds-icon":customElements.get(o(t))||m();break;case"mds-input-tip":customElements.get(o(t))||h();break;case"mds-input-tip-item":customElements.get(o(t))||b();break;case"mds-spinner":customElements.get(o(t))||g();break;case"mds-text":customElements.get(o(t))||v()}}))};export{y as MdsInputDate,x as defineCustomElement}

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

@@ -1,75 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsInputFieldCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-input-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60));color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);display:grid;gap:calc(var(--spacing,.0025rem)*300)}.message-window{border-radius:var(--radius-2xl,24px);color:var(--mds-input-field-message-color,rgb(var(--tone-neutral-03,233 233 233)));corner-shape:inherit;background-color:#0000;display:grid;gap:0;padding:0;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,color,gap,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.message-window:has(.message:not(:empty)){background-color:var(--mds-input-field-message-background,rgb(var(--tone-neutral-10,60 60 60)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.message{interpolate-size:allow-keywords;display:flex;flex-direction:column;height:auto;padding:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:height,margin-top,opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.message:empty{height:0;max-height:0;opacity:0;padding:0}.label:empty{display:none}.content{container:content/inline-size;display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200)}::slotted(:first-child){flex-grow:1}::slotted(:not(:first-child)){flex-shrink:0}@container content (max-width:300px){::slotted(*){flex-grow:1;min-width:100%}}:host([variant=ai]){--mds-input-field-message-color:rgb(var(--variant-ai-02,242 235 254));--mds-input-field-message-background:rgb(var(--variant-ai-09,75 8 189))}:host([variant=info]){--mds-input-field-message-color:rgb(var(--status-info-02,222 242 250));--mds-input-field-message-background:rgb(var(--status-info-09,0 73 116))}:host([variant=success]){--mds-input-field-message-color:rgb(var(--status-success-02,222 244 228));--mds-input-field-message-background:rgb(var(--status-success-09,0 82 9))}:host([variant=warning]){--mds-input-field-message-color:rgb(var(--status-warning-02,255 237 185));--mds-input-field-message-background:rgb(var(--status-warning-09,90 67 0))}:host([variant=error]){--mds-input-field-message-color:rgb(var(--status-error-02,255 234 231));--mds-input-field-message-background:rgb(var(--status-error-09,135 0 14))}";
-
-const MdsInputField$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputField extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Display the variant of a message at the bottom of the input text field
-         */
-        this.variant = 'primary';
-    }
-    handleValidation(mdsInput) {
-        // mdsInput.hasValidator().then(hasValidator => {
-        // if (!hasValidator) return
-        mdsInput.getErrors().then((errors) => {
-            if (errors) {
-                this.variant = 'error';
-                const messages = Object.entries(errors)
-                    .map((v) => v[1])
-                    .filter((v) => v);
-                this.message = messages.length ? messages.join(';') : undefined;
-                return;
-            }
-            this.variant = 'success';
-            this.message = undefined;
-        });
-        // })
-    }
-    componentDidLoad() {
-        const [mdsInput] = this.slotInput.assignedElements();
-        if (!mdsInput)
-            throw new Error('Mds input not found');
-        mdsInput.addEventListener('mdsInputValidation', () => this.handleValidation(mdsInput));
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: '07a3f00c463755ed5699415bda96b8a6ab0088e8' }, h("mds-text", { key: 'a76488419fd68dd54fbb814bd464445f963ff20d', class: "label", typography: "label" }, this.label), h("div", { key: '288d029bde16c91ace57a906abd4bff5a6a2b26d', class: "message-window" }, h("div", { key: 'b9a8bc1f7967741b91f09b7f944c7b598cba86e9', class: "content", part: "content" }, h("slot", { key: 'cb260b91c2dccb8161a76043bd7257eed51b275d', ref: (i) => (this.slotInput = i) })), h("div", { key: '9be6a675440795d75cd580f22f19d45db01840fa', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (h("mds-text", { typography: "caption", key: i }, m)))))));
-    }
-    static get formAssociated() { return true; }
-    get host() { return this; }
-    static get style() { return mdsInputFieldCss; }
-}, [321, "mds-input-field", {
-        "label": [1025],
-        "message": [1025],
-        "variant": [1537]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-input-field", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-input-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsInputField$1);
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsInputField = MdsInputField$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsInputField, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as r,transformTag as i}from"@stencil/core/internal/client";import{d as s}from"./mds-text2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.variant="primary"}handleValidation(e){e.getErrors().then((e=>{if(null==e)this.variant="success",this.message=void 0;else{this.variant="error";const t=Object.entries(e).map((e=>e[1])).filter((e=>e));this.message=0!==t.length?t.join(";"):void 0}}))}componentDidLoad(){const[e]=this.slotInput.assignedElements();if(null==e)throw Error("Mds input not found");e.addEventListener("mdsInputValidation",(()=>this.handleValidation(e)))}render(){var e;return a(r,{key:"7d2b6e591f2da90402eef9c453b6b229d04f56f8"},a("mds-text",{key:"6058dec040f453a65f5d34c8d16ddf786ade620f",class:"label",typography:"label"},this.label),a("div",{key:"dda1efd3aed92889c8aa28d5958630d304f81f9e",class:"message-window"},a("div",{key:"66196e8f4f024dbbd2c59dc6c8d00b46b4997ff4",class:"content",part:"content"},a("slot",{key:"ba8af714da43300a70833acbd281bfe19c5d3e4b",ref:e=>this.slotInput=e})),a("div",{key:"dbc5d405bb47cd7f3d730d3732e2ef0c49d9bfc6",class:"message"},null===(e=this.message)||void 0===e?void 0:e.split(";").map(((e,t)=>a("mds-text",{typography:"caption",key:t},e))))))}static get formAssociated(){return!0}get host(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-input-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60));color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);display:grid;gap:calc(var(--spacing,.0025rem)*300)}.message-window{border-radius:var(--radius-2xl,24px);color:var(--mds-input-field-message-color,rgb(var(--tone-neutral-03,233 233 233)));corner-shape:inherit;background-color:#0000;display:grid;gap:0;padding:0;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,color,gap,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.message-window:has(.message:not(:empty)){background-color:var(--mds-input-field-message-background,rgb(var(--tone-neutral-10,60 60 60)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.message{interpolate-size:allow-keywords;display:flex;flex-direction:column;height:auto;padding:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:height,margin-top,opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.message:empty{height:0;max-height:0;opacity:0;padding:0}.label:empty{display:none}.content{container:content/inline-size;display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200)}::slotted(:first-child){flex-grow:1}::slotted(:not(:first-child)){flex-shrink:0}@container content (max-width:300px){::slotted(*){flex-grow:1;min-width:100%}}:host([variant=ai]){--mds-input-field-message-color:rgb(var(--variant-ai-02,242 235 254));--mds-input-field-message-background:rgb(var(--variant-ai-09,75 8 189))}:host([variant=info]){--mds-input-field-message-color:rgb(var(--status-info-02,222 242 250));--mds-input-field-message-background:rgb(var(--status-info-09,0 73 116))}:host([variant=success]){--mds-input-field-message-color:rgb(var(--status-success-02,222 244 228));--mds-input-field-message-background:rgb(var(--status-success-09,0 82 9))}:host([variant=warning]){--mds-input-field-message-color:rgb(var(--status-warning-02,255 237 185));--mds-input-field-message-background:rgb(var(--status-warning-09,90 67 0))}:host([variant=error]){--mds-input-field-message-color:rgb(var(--status-error-02,255 234 231));--mds-input-field-message-background:rgb(var(--status-error-09,135 0 14))}"}},[321,"mds-input-field",{label:[1025],message:[1025],variant:[1537]}]),o=n,d=function(){"undefined"!=typeof customElements&&["mds-input-field","mds-text"].forEach((e=>{switch(e){case"mds-input-field":customElements.get(i(e))||customElements.define(i(e),n);break;case"mds-text":customElements.get(i(e))||s()}}))};export{o as MdsInputField,d as defineCustomElement}

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

@@ -1,156 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './mds-button2.js';
-import { d as defineCustomElement$7 } from './mds-icon2.js';
-import { d as defineCustomElement$6 } from './mds-input2.js';
-import { d as defineCustomElement$5 } from './mds-input-tip2.js';
-import { d as defineCustomElement$4 } from './mds-input-tip-item2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsInputOtpCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host{display:inline-flex;gap:calc(var(--spacing,.0025rem)*400)}.input{width:calc(var(--spacing,.0025rem)*1200)}.input::part(field){text-align:center}.input::part(tip-count){display:none}";
-
-const MdsInputOtp$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputOtp extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.internals = this.attachInternals();
-        /**
-         * Number of digits in the OTP code
-         */
-        this.length = 6;
-        /**
-         * Automatically submits the form when the OTP code is complete
-         */
-        this.autosubmit = false;
-        /**
-         * The current value of the OTP code
-         */
-        this.value = '';
-        this.getOtpCode = () => {
-            const inputs = Array.from(this.element.shadowRoot.querySelectorAll('mds-input'));
-            const otpCode = inputs.map((input) => input.value).join('');
-            return otpCode;
-        };
-        this.setOtpDigit = (currentInput, digit) => {
-            currentInput.value = digit;
-            const otpCode = this.getOtpCode();
-            this.value = otpCode;
-            this.internals.setFormValue(otpCode);
-        };
-        this.submit = (currentInput) => {
-            var _a;
-            const isOtpCompleted = this.getOtpCode().length === this.length;
-            currentInput.blur();
-            if (this.autosubmit && isOtpCompleted) {
-                (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
-            }
-        };
-        this.handleKeyDown = (e) => {
-            if (e.ctrlKey) {
-                return;
-            }
-            // e.preventDefault() must be called *outside* the ctrlKey check,
-            // otherwise the onPaste event won't be triggered correctly
-            e.preventDefault();
-            if (isNaN(Number(e.key))) {
-                return;
-            }
-            const currentInput = e.target;
-            this.setOtpDigit(currentInput, e.key);
-            const nextInput = currentInput.nextElementSibling;
-            if (nextInput) {
-                nextInput.setFocus();
-            }
-            else {
-                this.submit(currentInput);
-            }
-        };
-        this.handlePaste = (e) => {
-            var _a, _b;
-            e.preventDefault();
-            const pastedText = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
-            if (isNaN(Number(pastedText))) {
-                return;
-            }
-            const digits = (_b = pastedText === null || pastedText === void 0 ? void 0 : pastedText.split('')) !== null && _b !== void 0 ? _b : [];
-            let currentInput = e.target;
-            for (const currentDigit of digits) {
-                this.setOtpDigit(currentInput, currentDigit);
-                currentInput = currentInput.nextElementSibling;
-                if (currentInput) {
-                    currentInput.setFocus();
-                }
-                else {
-                    this.submit(currentInput);
-                    return;
-                }
-            }
-        };
-    }
-    render() {
-        return (h(Host, { key: '1d8ade99b72505aea4f74022b3b1e1de4b84a82b' }, Array.from({ length: this.length }).map(() => (h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
-    }
-    static get formAssociated() { return true; }
-    get element() { return this; }
-    static get style() { return mdsInputOtpCss; }
-}, [321, "mds-input-otp", {
-        "length": [2],
-        "autosubmit": [516],
-        "value": [1537]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-input-otp", "mds-button", "mds-icon", "mds-input", "mds-input-tip", "mds-input-tip-item", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-input-otp":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsInputOtp$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mds-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mds-input-tip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-input-tip-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsInputOtp = MdsInputOtp$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsInputOtp, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./mds-button2.js";import{d as o}from"./mds-icon2.js";import{d as m}from"./mds-input2.js";import{d as a}from"./mds-input-tip2.js";import{d as u}from"./mds-input-tip-item2.js";import{d as c}from"./mds-spinner2.js";import{d as l}from"./mds-text2.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.internals=this.attachInternals(),this.length=6,this.autosubmit=!1,this.value="",this.getOtpCode=()=>Array.from(this.element.shadowRoot.querySelectorAll("mds-input")).map((t=>t.value)).join(""),this.setOtpDigit=(t,e)=>{t.value=e;const s=this.getOtpCode();this.value=s,this.internals.setFormValue(s)},this.submit=t=>{var e;const s=this.getOtpCode().length===this.length;t.blur(),this.autosubmit&&s&&(null===(e=this.internals.form)||void 0===e||e.requestSubmit())},this.handleKeyDown=t=>{if(t.ctrlKey)return;if(t.preventDefault(),isNaN(Number(t.key)))return;const e=t.target;this.setOtpDigit(e,t.key);const s=e.nextElementSibling;null!=s?s.setFocus():this.submit(e)},this.handlePaste=t=>{var e,s;t.preventDefault();const i=null===(e=t.clipboardData)||void 0===e?void 0:e.getData("text");if(isNaN(Number(i)))return;const n=null!==(s=null==i?void 0:i.split(""))&&void 0!==s?s:[];let r=t.target;for(const t of n){if(this.setOtpDigit(r,t),r=r.nextElementSibling,null==r)return void this.submit(r);r.setFocus()}}}render(){return s(i,{key:"b8ed6443032efcace51ea84c5dbae2533796a7f7"},Array.from({length:this.length}).map((()=>s("mds-input",{class:"input",maxlength:1,onKeyDown:this.handleKeyDown,onPaste:this.handlePaste}))))}static get formAssociated(){return!0}get element(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host{display:inline-flex;gap:calc(var(--spacing,.0025rem)*400)}.input{width:calc(var(--spacing,.0025rem)*1200)}.input::part(field){text-align:center}.input::part(tip-count){display:none}"}},[65,"mds-input-otp",{length:[2],autosubmit:[516],value:[1537]}]),p=d,h=function(){"undefined"!=typeof customElements&&["mds-input-otp","mds-button","mds-icon","mds-input","mds-input-tip","mds-input-tip-item","mds-spinner","mds-text"].forEach((t=>{switch(t){case"mds-input-otp":customElements.get(n(t))||customElements.define(n(t),d);break;case"mds-button":customElements.get(n(t))||r();break;case"mds-icon":customElements.get(n(t))||o();break;case"mds-input":customElements.get(n(t))||m();break;case"mds-input-tip":customElements.get(n(t))||a();break;case"mds-input-tip-item":customElements.get(n(t))||u();break;case"mds-spinner":customElements.get(n(t))||c();break;case"mds-text":customElements.get(n(t))||l()}}))};export{p as MdsInputOtp,h as defineCustomElement}