@mgdis/mg-components 6.20.0 → 6.22.0

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

@@ -1,412 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, i as isValidString, t as toString } from './index2.js';
-import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths, e as classDisplayCharacterLeft } from './mg-input2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$7 } from './mg-character-left2.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 mgInputTextareaCss = ".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-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-4)/2 - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
-
-const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea 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;
-        /**
-         * Input max length
-         */
-        this.maxlength = 4000;
-        /**
-         * Define if input is required
-         */
-        this.required = false;
-        /**
-         * Define if input is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define input width
-         */
-        this.mgWidth = 'full';
-        /**
-         * Define the number of visible text lines for the control
-         */
-        this.rows = 3;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Define if component should display character left
-         */
-        this.characterLeftHide = false;
-        /**
-         * Define if input is resizable
-         */
-        this.resizable = 'none';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--textarea']);
-        /**
-         * Handle input event
-         */
-        this.handleInput = () => {
-            if (this.hasDisplayedError) {
-                this.checkValidity();
-                this.setErrorMessage();
-            }
-            this.value = this.input.value;
-        };
-        /**
-         * Handle blur event
-         */
-        this.handleBlur = () => {
-            // Display Error
-            this.handlerInProgress = 'blur';
-            this.displayError().finally(() => {
-                // reset guard
-                this.handlerInProgress = undefined;
-            });
-        };
-        /**
-         * Get pattern validity
-         * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-         * @returns is pattern valid
-         */
-        this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && this.getPatternValidity()));
-        };
-        /**
-         * Set input error message
-         * @param fromSetErrorContext - context come from `setError` method
-         */
-        this.setErrorMessage = (fromSetErrorContext = false) => {
-            // Set error message
-            this.errorMessage = undefined;
-            // Does have a new custom error message
-            if (!this.valid) {
-                // 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;
-                }
-                else if (!this.getPatternValidity()) {
-                    this.errorMessage = this.patternErrorMessage;
-                }
-                // required
-                else if (this.input.validity.valueMissing) {
-                    this.errorMessage = this.messages.errors.required;
-                }
-            }
-        };
-    }
-    handleValue(newValue) {
-        this.checkValidity();
-        this.valueChange.emit(newValue);
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    handleValidityChange(newValue, _oldValue, prop) {
-        if (this.input !== undefined) {
-            this.input[prop] = newValue;
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-                this.hasDisplayedError = false;
-            }
-        }
-    }
-    validateDisabled(newValue) {
-        if (newValue)
-            this.classCollection.add(classDisabled);
-        else
-            this.classCollection.delete(classDisabled);
-    }
-    watchMgWidth(newValue) {
-        // reset width class
-        widths.forEach(width => {
-            this.classCollection.delete(`mg-c-input--width-${width}`);
-        });
-        // apply new width
-        if (newValue !== undefined)
-            this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
-    }
-    validatePattern(newValue) {
-        if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${toString(this.pattern)}'" and "patternErrorMessage='${toString(this.patternErrorMessage)}'".`);
-        }
-    }
-    validatecharacterLeftHide(newValue) {
-        if (newValue) {
-            this.classCollection.delete(classDisplayCharacterLeft);
-        }
-        else {
-            this.classCollection.add(classDisplayCharacterLeft);
-        }
-    }
-    /**
-     * 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-textarea> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-textarea> 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 = '';
-            // 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
-        this.messages = initLocales(this.element).messages;
-        this.characterLeftId = `${this.identifier}-character-left`;
-        // Validate
-        this.validatecharacterLeftHide(this.characterLeftHide);
-        this.validatePattern(this.pattern);
-        this.validatePattern(this.patternErrorMessage);
-        this.watchMgWidth(this.mgWidth);
-        this.watchReadonly(this.readonly);
-        this.validateDisabled(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: 'a43b8b1572249e31fb6ea5bd9244639698629218', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
-                'mg-c-input__box': true,
-                'mg-c-input__box--width': true,
-                'mg-c-input__box--resizable': this.resizable === 'both',
-                'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
-                'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',
-            }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
-                if (el !== null)
-                    this.input = el;
-            } }), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["handleValue"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "validateDisabled"],
-        "mgWidth": ["watchMgWidth"],
-        "pattern": ["validatePattern"],
-        "patternErrorMessage": ["validatePattern"],
-        "characterLeftHide": ["validatecharacterLeftHide"]
-    }; }
-    static get style() { return mgInputTextareaCss; }
-}, [257, "mg-input-textarea", {
-        "value": [1537],
-        "identifier": [1],
-        "name": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "placeholder": [1],
-        "maxlength": [2],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "mgWidth": [8, "mg-width"],
-        "pattern": [1],
-        "patternErrorMessage": [1, "pattern-error-message"],
-        "rows": [2],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "characterLeftHide": [4, "character-left-hide"],
-        "helpText": [1, "help-text"],
-        "resizable": [1],
-        "valid": [1028],
-        "invalid": [1028],
-        "classCollection": [32],
-        "errorMessage": [32],
-        "setFocus": [64],
-        "displayError": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["handleValue"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "validateDisabled"],
-        "mgWidth": ["watchMgWidth"],
-        "pattern": ["validatePattern"],
-        "patternErrorMessage": ["validatePattern"],
-        "characterLeftHide": ["validatecharacterLeftHide"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-textarea", "mg-character-left", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputTextarea$1);
-            }
-            break;
-        case "mg-character-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            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 MgInputTextarea = MgInputTextarea$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputTextarea, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a}from"@stencil/core/internal/client";import{C as n,i as s,t as o}from"./index2.js";import{c,b as p,w as m,e as h}from"./mg-input.conf.js";import{i as l}from"./index3.js";import{d as g}from"./mg-character-left2.js";import{d as u}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=r(this,"value-change",7),this.inputValid=r(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.maxlength=4e3,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.rows=3,this.tooltipPosition="input",this.characterLeftHide=!1,this.resizable="none",this.classCollection=new n(["mg-c-input--textarea"]),this.handleInput=()=>{this.hasDisplayedError&&(this.checkValidity(),this.setErrorMessage()),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.getPatternValidity=()=>void 0===this.pattern||RegExp(`^${this.pattern}$`,"u").test(this.value),this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity()&&this.getPatternValidity())},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.getPatternValidity()?this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required):this.errorMessage=this.patternErrorMessage)}}handleValue(t){this.checkValidity(),this.valueChange.emit(t)}watchReadonly(t){t?this.classCollection.add(c):this.classCollection.delete(c)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}validateDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth)}validatePattern(t){if(!(void 0===t||s(this.pattern)&&s(this.patternErrorMessage)))throw Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${o(this.pattern)}'" and "patternErrorMessage='${o(this.patternErrorMessage)}'".`)}validatecharacterLeftHide(t){t?this.classCollection.delete(h):this.classCollection.add(h)}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-textarea> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!s(i))throw Error('<mg-input-textarea> 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="",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(){return this.messages=l(this.element).messages,this.characterLeftId=this.identifier+"-character-left",this.validatecharacterLeftHide(this.characterLeftHide),this.validatePattern(this.pattern),this.validatePattern(this.patternErrorMessage),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.validateDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"68f259138df7207d7ba16a8f36f3b45e8fb143d0",label:this.label,identifier:this.identifier,class:this.classCollection.join(),ariaDescribedbyIDs:this.characterLeftId,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.value&&a("b",{class:"mg-c-input__readonly-value"},this.value):a("div",{class:"mg-c-input__input-group-container"},a("textarea",{class:{"mg-c-input__box":!0,"mg-c-input__box--width":!0,"mg-c-input__box--resizable":"both"===this.resizable,"mg-c-input__box--resizable-horizontal":"horizontal"===this.resizable,"mg-c-input__box--resizable-vertical":"vertical"===this.resizable},value:this.value,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,rows:this.rows,maxlength:this.maxlength,disabled:this.disabled,required:this.required,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),!this.characterLeftHide&&this.maxlength>0&&a("mg-character-left",{identifier:this.characterLeftId,characters:this.value,maxlength:this.maxlength})))}get element(){return this}static get watchers(){return{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}}static get style(){return".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-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-4)/2 - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}"}},[1,"mg-input-textarea",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],pattern:[1],patternErrorMessage:[1,"pattern-error-message"],rows:[2],tooltip:[1],tooltipPosition:[1,"tooltip-position"],characterLeftHide:[4,"character-left-hide"],helpText:[1,"help-text"],resizable:[1],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-textarea","mg-character-left","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-textarea":customElements.get(t(i))||customElements.define(t(i),_);break;case"mg-character-left":customElements.get(t(i))||g();break;case"mg-icon":customElements.get(t(i))||u();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 x=_,y=w;export{x as MgInputTextarea,y as defineCustomElement}

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

@@ -1,6 +1 @@
-import { M as MgInputTitle$1, d as defineCustomElement$1 } from './mg-input-title2.js';
-
-const MgInputTitle = MgInputTitle$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputTitle, defineCustomElement };
+import{M as t,d as o}from"./mg-input-title2.js";const s=t,i=o;export{s as MgInputTitle,i as defineCustomElement}

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

@@ -1,81 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { i as isValidString, a as isValideID, t as toString } from './index2.js';
-
-const mgInputTitleCss = ".mg-u-form-legacy.sc-mg-input-title{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:var(--mg-b-color-danger)}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-c-input-title-display, unset)}";
-
-const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Switch from label to fieldset sementic
-         */
-        this.isLegend = false;
-        /**
-         * Component parent tagname
-         */
-        this.tagName = 'label';
-    }
-    validateIdentifier(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error('<mg-input-title> prop "identifier" is required.');
-        }
-        else if (!isValideID(newValue)) {
-            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateIsLegend(newValue) {
-        this.tagName = newValue ? 'legend' : 'label';
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Init tag name
-     */
-    componentWillLoad() {
-        this.validateIdentifier(this.identifier);
-        this.validateIsLegend(this.isLegend);
-    }
-    /**
-     * Render
-     * @returns HTML element
-     */
-    render() {
-        const TagName = this.readonly ? 'span' : this.tagName;
-        // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '860f74509c87626d4af51641f0f48db99fa194b0', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '5eb0ca4d7f4061c0cff01e2de3adb9c98c42955a' }), this.required && !this.readonly && (h("span", { key: '0637de0d0dca9b7f87c9bb04fd44eadc6d0606cc', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'b5736467e3fd759eeabe9cf8ee6ed3cf73b8ebfc', class: "mg-u-is-asterisk" }, "*")))));
-    }
-    static get watchers() { return {
-        "identifier": ["validateIdentifier"],
-        "isLegend": ["validateIsLegend"]
-    }; }
-    static get style() { return mgInputTitleCss; }
-}, [262, "mg-input-title", {
-        "identifier": [1],
-        "required": [4],
-        "readonly": [4],
-        "isLegend": [4, "is-legend"],
-        "tagName": [32]
-    }, undefined, {
-        "identifier": ["validateIdentifier"],
-        "isLegend": ["validateIsLegend"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-title"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputTitle);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgInputTitle as M, defineCustomElement as d };
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a,a as n,t as l}from"./index2.js";const d=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.isLegend=!1,this.tagName="label"}validateIdentifier(e){if(!a(e))throw new Error('<mg-input-title> prop "identifier" is required.');n(e)||console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${l(e)}.`)}validateIsLegend(e){this.tagName=e?"legend":"label"}componentWillLoad(){this.validateIdentifier(this.identifier),this.validateIsLegend(this.isLegend)}render(){return s(this.readonly?"span":this.tagName,{key:"d61ed048e1b2bb124281eb4067894d9a35abf778",class:"mg-c-input-title",htmlFor:!this.isLegend&&this.identifier,id:this.isLegend?`${this.identifier}-title`:void 0},s("slot",{key:"3bad02b10f8e9bb536c5eba9bf85d4b4967a9d97"}),this.required&&!this.readonly&&s("span",{key:"f0fd90a79f4449a1a3b7ec76a3eeb96bcc2e4ee6",class:"mg-c-input-title__required"}," ",s("span",{key:"7ea29cfc494c5c5c2b65b62ea27caee5a41062ca",class:"mg-u-is-asterisk"},"*")))}static get watchers(){return{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}}static get style(){return".mg-u-form-legacy.sc-mg-input-title{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:var(--mg-b-color-danger)}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-c-input-title-display, unset)}"}},[262,"mg-input-title",{identifier:[1],required:[4],readonly:[4],isLegend:[4,"is-legend"],tagName:[32]},void 0,{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}]);function r(){"undefined"!=typeof customElements&&["mg-input-title"].forEach((t=>{"mg-input-title"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}r();export{d as M,r as d}