@mgdis/mg-components 6.20.0 → 6.22.0

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

@@ -1,463 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, i as isValidString, o as dateRegExp, p as dateToString, t as toString } from './index2.js';
-import { l as localeDate, a as localeDatePattern, i as initLocales } from './index3.js';
-import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-const DEFAULT_MAX_DATE = '9999-12-31';
-
-const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}";
-
-const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChange = createEvent(this, "value-change", 7);
-        this.inputValid = createEvent(this, "input-valid", 7);
-        // hasDisplayedError (triggered by blur event)
-        this.hasDisplayedError = false;
-        this.customErrorMessage = { lock: false };
-        /**
-         * Input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if input is required
-         */
-        this.required = false;
-        /**
-         * Define if input is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define input maximum date
-         * format: yyyy-mm-dd
-         */
-        this.max = '9999-12-31'; // Hardcoded value matching DEFAULT_MAX_DATE for documentation
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--date']);
-        /**
-         * Method to validate date pattern string
-         * @param value - value to test
-         * @returns truthy when value match the pattern
-         */
-        this.isValidPattern = (value) => isValidString(value) && dateRegExp.test(value);
-        /**
-         * Format help text to display
-         * @param helpText - help text format
-         * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
-         */
-        this.formatHelpText = (helpText) => {
-            // If the component is in readonly mode, return directly because the message will not be rendered
-            if (this.readonly) {
-                return undefined;
-            }
-            const defaultHelpTextVariable = '{defaultHelpText}';
-            // If a custom helpText is provided, store it but don't return it directly
-            let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
-            // Handle defaultHelpText
-            if (text.includes(defaultHelpTextVariable)) {
-                text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
-            }
-            // Replace pattern and date variables
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
-        };
-        /**
-         * Handle input event
-         */
-        this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
-            this.value = this.input.value;
-        };
-        /**
-         * Handle blur event
-         */
-        this.handleBlur = () => {
-            this.handlerInProgress = 'blur';
-            this.displayError().finally(() => {
-                // reset guard
-                this.handlerInProgress = undefined;
-            });
-        };
-        /**
-         * Handle keydown event
-         * @param event - input keydown event
-         */
-        this.handleKeyDown = (event) => {
-            // bypass the native "Delete" action wich trigger an "input" event with "checkValidty() => false" with a falsy badInput = true,
-            // when we reset the field we need to test a blank value.
-            if (['Delete', 'Backspace'].includes(event.key)) {
-                event.preventDefault();
-                this.value = null;
-                this.checkValidity();
-                if (this.hasDisplayedError) {
-                    this.setErrorMessage();
-                }
-            }
-        };
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
-        };
-        /**
-         * get input error code
-         * @returns error code
-         */
-        this.getInputError = () => {
-            var _a;
-            let error;
-            // bad input or pattern
-            if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
-                error = 'badInput';
-            }
-            // required
-            else if (this.input.validity.valueMissing) {
-                error = 'required';
-            }
-            // min & max
-            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
-                error = 'minMax';
-            }
-            // min
-            else if (this.input.validity.rangeUnderflow) {
-                error = 'min';
-            }
-            // max
-            else if (this.input.validity.rangeOverflow) {
-                error = 'max';
-            }
-            return error;
-        };
-        /**
-         * Check input errors
-         * @param fromSetErrorContext - context come from `setError` method
-         */
-        this.setErrorMessage = (fromSetErrorContext = false) => {
-            // Set error message
-            this.errorMessage = undefined;
-            if (!this.valid) {
-                const inputError = this.getInputError();
-                // Does have a new custom error message OR does have a custom error message locked
-                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
-                    this.errorMessage = this.customErrorMessage.message;
-                }
-                // required
-                else if (inputError === 'required') {
-                    this.errorMessage = this.messages.errors[inputError];
-                }
-                // min, max & minMax
-                else if (['min', 'max', 'minMax'].includes(inputError)) {
-                    this.errorMessage = this.messages.input.date.error[inputError]
-                        .replace('{min}', localeDate(this.min, this.systemLocale))
-                        .replace('{max}', localeDate(this.max, this.systemLocale));
-                }
-                // wrong date format
-                // element.validity.badInput is default error message
-                else {
-                    this.errorMessage = this.messages.input.date.error.badInput
-                        .replace('{pattern}', this.renderPattern())
-                        .replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
-                }
-            }
-        };
-        /**
-         * Render pattern
-         * @returns translated html pattern
-         */
-        this.renderPattern = () => {
-            let patternLocal = localeDatePattern(this.systemLocale);
-            for (const key in this.messages.input.date.pattern) {
-                patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
-            }
-            return `<span aria-hidden="true">${patternLocal}</span><span class="mg-u-visually-hidden">${[...patternLocal].join(' ')}</span>`;
-        };
-    }
-    validateValue(newValue) {
-        // When the input is not fully completed or has been cleared, the value becomes an empty string.
-        if (['', undefined].includes(newValue)) {
-            // need to force value update to `null` to prevent extra render
-            // - `''` is not a valide value
-            // - `undefined` is not allowed in CustomEvent['detail']
-            this.value = null;
-        }
-        else if (newValue && !isValidString(newValue)) {
-            // check value validity
-            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${toString(newValue)}.`);
-        }
-        else if (newValue === null || this.isValidPattern(newValue)) {
-            this.valueChange.emit(newValue);
-        }
-        else {
-            console.error("<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.");
-        }
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    validateMinMax(newValue) {
-        if (newValue && !this.isValidPattern(newValue)) {
-            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    handleValidityChange(newValue, _oldValue, prop) {
-        if (this.input !== undefined) {
-            this.input[prop] = newValue;
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-                this.hasDisplayedError = false;
-            }
-        }
-    }
-    watchDisabled(newValue) {
-        if (newValue)
-            this.classCollection.add(classDisabled);
-        else
-            this.classCollection.delete(classDisabled);
-    }
-    /**
-     * Set focus on input.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                this.hasDisplayedError = this.invalid;
-                resolve();
-            });
-        });
-    }
-    /**
-     * Set an error and display a custom error message.
-     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-     * It must be paired with an error message to display for the given context.
-     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-     * @param valid - value indicating the validity
-     * @param errorMessage - the error message to display
-     * @param errorMessageLock - lock the error message and validity state
-     */
-    async setError(valid, errorMessage, errorMessageLock = false) {
-        if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
-        }
-        else {
-            this.customErrorMessage = {
-                lock: valid ? false : errorMessageLock,
-                message: valid ? undefined : errorMessage,
-            };
-            this.setValidity(valid);
-            this.setErrorMessage(true);
-            this.hasDisplayedError = this.invalid;
-        }
-    }
-    /**
-     * Reset value, validity and error state
-     */
-    async reset() {
-        if (!this.readonly) {
-            this.value = null;
-            // Use `Promise` as requested for stencil method
-            // Use `requestAnimationFrame` to ensure:
-            // - DOM is fully updated before validation
-            // - Async operations are completed
-            // - No timing issues with Stencil's render cycle
-            // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
-                requestAnimationFrame(() => {
-                    // unlock validity check by reseting customErrorMessage
-                    this.customErrorMessage = { lock: false };
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
-                    resolve();
-                });
-            });
-        }
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValue = this.valid;
-        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
-            this.valid = newValue;
-        }
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
-            this.inputValid.emit(this.valid);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     * @returns timeout
-     */
-    componentWillLoad() {
-        // Get locales
-        const locales = initLocales(this.element);
-        this.locale = locales.locale;
-        this.messages = locales.messages;
-        // as a native input use the OS locale to define the date pattern
-        // we need to get this locale to define the displayed pattern
-        this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
-        // Validate
-        this.validateValue(this.value);
-        this.validateMinMax(this.min);
-        this.validateMinMax(this.max);
-        this.watchReadonly(this.readonly);
-        this.watchDisabled(this.disabled);
-        // Check validity when component is ready
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            this.checkValidity();
-        }, 0);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("mg-input", { key: '1428f0f9f11d829ec8d3ed507c8690d63839ff17', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
-                if (el !== null)
-                    this.input = el;
-            } }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["validateValue"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "min": ["validateMinMax", "handleValidityChange"],
-        "max": ["validateMinMax", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "watchDisabled"]
-    }; }
-    static get style() { return mgInputDateCss; }
-}, [257, "mg-input-date", {
-        "value": [1537],
-        "identifier": [1],
-        "name": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "required": [4],
-        "readonly": [4],
-        "min": [1],
-        "max": [1],
-        "disabled": [4],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "helpText": [1, "help-text"],
-        "valid": [1028],
-        "invalid": [1028],
-        "classCollection": [32],
-        "errorMessage": [32],
-        "setFocus": [64],
-        "displayError": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["validateValue"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "min": ["validateMinMax", "handleValidityChange"],
-        "max": ["validateMinMax", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "watchDisabled"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-date", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-date":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputDate$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgInputDate = MgInputDate$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputDate, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{C as n,i as o,o as r,p as h,t as l}from"./index2.js";import{a as m,b as d,i as p}from"./index3.js";import{c as u,b as c}from"./mg-input.conf.js";import{d as g}from"./mg-icon2.js";import{d as b}from"./mg-input2.js";import{d as v}from"./mg-input-title2.js";import{d as f}from"./mg-tooltip2.js";import{d as y}from"./mg-tooltip-content2.js";const x=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.max="9999-12-31",this.disabled=!1,this.tooltipPosition="input",this.classCollection=new n(["mg-c-input--date"]),this.isValidPattern=t=>o(t)&&r.test(t),this.formatHelpText=t=>{if(this.readonly)return;const i="{defaultHelpText}";let e=o(t)?t:this.messages.input.date.helpText.expectedFormat;return e.includes(i)&&(e=e.replace(i,this.formatHelpText(this.messages.input.date.helpText.expectedFormat))),e.replace("{pattern}",this.renderPattern()).replace("{date}",m(h(new Date("2025-12-24")),this.systemLocale))},this.handleInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.handleKeyDown=t=>{["Delete","Backspace"].includes(t.key)&&(t.preventDefault(),this.value=null,this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage())},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity()&&(null===this.value||this.isValidPattern(this.value)))},this.getInputError=()=>{var t;let i;return this.input.validity.badInput||this.value&&!this.isValidPattern(this.value)?i="badInput":this.input.validity.valueMissing?i="required":(this.input.validity.rangeUnderflow||this.input.validity.rangeOverflow)&&(null===(t=this.min)||void 0===t?void 0:t.length)>0&&"9999-12-31"!==this.max?i="minMax":this.input.validity.rangeUnderflow?i="min":this.input.validity.rangeOverflow&&(i="max"),i},this.setErrorMessage=(t=!1)=>{if(this.errorMessage=void 0,!this.valid){const i=this.getInputError();this.errorMessage=t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.customErrorMessage.message:"required"===i?this.messages.errors[i]:["min","max","minMax"].includes(i)?this.messages.input.date.error[i].replace("{min}",m(this.min,this.systemLocale)).replace("{max}",m(this.max,this.systemLocale)):this.messages.input.date.error.badInput.replace("{pattern}",this.renderPattern()).replace("{date}",m(h(new Date("2025-12-24")),this.systemLocale))}},this.renderPattern=()=>{let t=d(this.systemLocale);for(const i in this.messages.input.date.pattern)t=t.replace(i,this.messages.input.date.pattern[i]);return`<span aria-hidden="true">${t}</span><span class="mg-u-visually-hidden">${[...t].join(" ")}</span>`}}validateValue(t){if(["",void 0].includes(t))this.value=null;else{if(t&&!o(t))throw Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${l(t)}.`);null===t||this.isValidPattern(t)?this.valueChange.emit(t):console.error("<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.")}}watchReadonly(t){t?this.classCollection.add(u):this.classCollection.delete(u)}validateMinMax(t){if(t&&!this.isValidPattern(t))throw Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${l(t)}.`)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!o(i))throw Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value=null,new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){const t=p(this.element);return this.locale=t.locale,this.messages=t.messages,this.systemLocale=Intl.DateTimeFormat().resolvedOptions().locale,this.validateValue(this.value),this.validateMinMax(this.min),this.validateMinMax(this.max),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"53d23a27355884d3b3ac996188f619ad325d58b6",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&null===this.value?"label":this.tooltipPosition,helpText:this.formatHelpText(this.helpText),errorMessage:this.errorMessage},this.readonly?this.value&&a("b",{class:"mg-c-input__readonly-value"},m(this.value,this.locale)):a("input",{type:"date",class:"mg-c-input__box",min:this.min,max:this.max,value:this.value,id:this.identifier,name:this.name,disabled:this.disabled,required:this.required,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:t=>{null!==t&&(this.input=t)}}))}get element(){return this}static get watchers(){return{value:[{validateValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],min:[{validateMinMax:0},{handleValidityChange:0}],max:[{validateMinMax:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}"}},[1,"mg-input-date",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],required:[4],readonly:[4],min:[1],max:[1],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{validateValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],min:[{validateMinMax:0},{handleValidityChange:0}],max:[{validateMinMax:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-date","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-date":customElements.get(t(i))||customElements.define(t(i),x);break;case"mg-icon":customElements.get(t(i))||g();break;case"mg-input":customElements.get(t(i))||b();break;case"mg-input-title":customElements.get(t(i))||v();break;case"mg-tooltip":customElements.get(t(i))||f();break;case"mg-tooltip-content":customElements.get(t(i))||y()}}))}w();const _=x,E=w;export{_ as MgInputDate,E as defineCustomElement}

package/dist/components/mg-input-file.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgInputFile extends Components.MgInputFile, HTMLElement {}
+export const MgInputFile: {
+    prototype: MgInputFile;
+    new (): MgInputFile;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-input-file.js

@@ -0,0 +1 @@
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o}from"@stencil/core/internal/client";import{C as a,d as r,t as n,i as l,k as h}from"./index2.js";import{l as m,i as c}from"./index3.js";import{b as p}from"./mg-input.conf.js";import{d as u}from"./mg-button2.js";import{d as g}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as b}from"./mg-input-title2.js";import{d as f}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const _=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new a(["mg-c-input--file"]),this.files=[],this.setValidity=t=>{const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)},this.handleInputChange=t=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.files=Array.from(t.target.files),this.fileButtonElement.focus()},this.handleInputFocus=()=>{this.fileButtonElement.dataset.focusVisible=""},this.handleInputBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})),delete this.fileButtonElement.dataset.focusVisible},this.handleButtonBlur=()=>{this.inputElement.blur()},this.handleButtonClick=()=>{this.inputElement.click()},this.checkValidity=()=>{this.setValidity(this.disabled||!this.isMaxSizeExceeded()&&this.inputElement.checkValidity())},this.handleDeleteFileClick=()=>{this.files=[],this.fileButtonElement.focus()},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.isMaxSizeExceeded()?this.errorMessage=this.messages.input.file.errors.maxSize.replace("{{maxSize}}",m(this.maxSize,this.locale)):this.inputElement.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.isMaxSizeExceeded=()=>this.maxSize>=0&&this.files.some((t=>t.size>this.maxSize)),this.renderFiles=()=>{const t=this.identifier+"-file-list",i=t=>o("span",{class:"mg-c-input__file-item-name"},t.name,t.size>0?o("span",{class:"mg-c-input__file-item-size"}," "+m(t.size,this.locale)):void 0),e=()=>o("mg-button",{variant:"flat",class:"mg-c-input__file-delete-button","is-icon":!0,label:this.messages.input.file.deleteButton,type:"button",disabled:this.disabled,"aria-controls":[this.identifier,t].join(" "),onClick:this.handleDeleteFileClick},o("mg-icon",{icon:"cross"}));return 0===this.files.length?null:1===this.files.length?o("div",{class:"mg-c-input__file-item"},i(this.files[0]),e()):o("div",{class:"mg-c-input__file-list-container"},o("ul",{role:"list",class:"mg-c-input__file-list",id:t},Array.from(this.files).map(((t,e)=>o("li",{class:"mg-c-input__file-item",key:`${t.name}-${e}`},i(t))))),e())}}watchValue(t){if(r(t))this.files=this.value.map((t=>new File([],t)));else if((t=>Array.isArray(t)&&t.every((t=>h(t)&&"string"==typeof t.name&&"number"==typeof t.size)))(t))this.files=this.value;else{if(void 0!==t)throw Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${n(t)}.`);this.files=[]}this.valueChange.emit(t)}watchMultiple(){if(!1===this.multiple&&this.files.length>1)throw Error('<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.')}watchAccept(t){if(void 0!==t&&!l(t))throw Error('<mg-input-file> prop "accept" must be a valid string.')}handleValidityChange(t,i,e){void 0!==this.inputElement&&(this.inputElement[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}watchHelpText(){if(!l(this.helpText)){const t=[];void 0!==this.maxSize&&t.push(this.messages.input.file.helpText.maxSize.replace("{{maxSize}}",m(this.maxSize,this.locale))),void 0!==this.accept&&t.push(this.messages.input.file.helpText.accept.replace("{{accept}}",this.accept)),this.helpText=t.join(". ")}}watchFiles(t,i){n(t)!==n(i)&&(this.value=t.length>0?t:void 0)}async setFocus(){this.fileButtonElement.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!l(i))throw Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){return this.files=[],new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}componentWillLoad(){const t=c(this.element);return this.locale=t.locale,this.messages=t.messages,this.watchValue(this.value),this.watchDisabled(this.disabled),this.watchHelpText(),this.watchAccept(this.accept),this.watchMultiple(),setTimeout((()=>{this.checkValidity()}),0)}render(){return o("mg-input",{key:"48337d8e0a059dbea60c4bfa152468429b37b897",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},o("div",{key:"b0a67412ce2a054ce84f001efe01156bfce001a1",class:"mg-c-input__file-container"},o("input",{key:"0585b37ac4da8e5b29b94c04a298cfd8451016c9",name:this.name,id:this.identifier,class:"mg-u-visually-hidden",type:"file",multiple:!0===this.multiple,capture:this.capture,accept:this.accept,disabled:this.disabled,required:0===this.files.length&&this.required,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-invalid":""+(!0===this.invalid),ref:t=>{this.inputElement=t}}),o("mg-button",{key:"0c71ea34375f60a357ad2aa38353c7acafc1091a",variant:"secondary",class:"mg-c-input__file-button",type:"button",disabled:this.disabled,onClick:this.handleButtonClick,onBlur:this.handleButtonBlur,tabindex:"-1",ref:t=>{this.fileButtonElement=t}},this.messages.input.file.browse),this.renderFiles()))}get element(){return this}static get watchers(){return{value:[{watchValue:0},{watchMultiple:0}],multiple:[{watchMultiple:0}],accept:[{watchAccept:0},{watchHelpText:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],helpText:[{watchHelpText:0}],maxSize:[{watchHelpText:0}],files:[{watchFiles:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__file-container{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input__file-item{display:inline-flex;min-height:var(--mg-b-size-min-height);align-items:center;padding-left:var(--mg-b-size-8);background-color:var(--mg-b-color-neutral-10);font-weight:600;gap:var(--mg-b-size-8)}.mg-c-input__file-item-name{word-break:break-all}.mg-c-input__file-item-size{color:var(--mg-b-color-neutral-90);font-weight:400;word-break:normal}.mg-c-input__file-delete-button{align-self:flex-start}.mg-c-input__file-list{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input__file-list .mg-c-input__file-item{min-height:unset;padding:var(--mg-b-size-8)}.mg-c-input__file-list-container{position:relative;padding:var(--mg-b-size-8) calc(var(--mg-b-size-8) + var(--mg-b-size-min-height)) var(--mg-b-size-8) var(--mg-b-size-8);border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-4)}.mg-c-input__file-list-container .mg-c-input__file-delete-button{position:absolute;top:0;right:0}"}},[1,"mg-input-file",{value:[1032],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],multiple:[4],accept:[1],maxSize:[2,"max-size"],capture:[1],required:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1025,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],files:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0},{watchMultiple:0}],multiple:[{watchMultiple:0}],accept:[{watchAccept:0},{watchHelpText:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],helpText:[{watchHelpText:0}],maxSize:[{watchHelpText:0}],files:[{watchFiles:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-file","mg-button","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-file":customElements.get(t(i))||customElements.define(t(i),_);break;case"mg-button":customElements.get(t(i))||u();break;case"mg-icon":customElements.get(t(i))||g();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||f();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const y=_,x=w;export{y as MgInputFile,x as defineCustomElement}