@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/components/mg-input2.js

@@ -0,0 +1,352 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as Be } from './index.es.js';
+import { d as defineCustomElement$4 } from './mg-icon2.js';
+import { d as defineCustomElement$3 } from './mg-input-title2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip2.js';
+import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
+
+/**
+ * Possible input width
+ */
+const widths = [2, 4, 16, 'full'];
+/**
+ * Possible tootltip postions
+ */
+const tooltipPositions = ['input', 'label'];
+/**
+ * Available handlers
+ */
+var Handler;
+(function (Handler) {
+    Handler["BLUR"] = "blur";
+    Handler["FOCUS"] = "focus";
+})(Handler || (Handler = {}));
+const classFieldset = 'mg-c-input--fieldset';
+const classDisabled = 'mg-c-input--disabled';
+const classReadonly = 'mg-c-input--readonly';
+const classVerticalList = 'mg-c-input--vertical-list';
+
+const mgInputCss = ".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__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
+const MgInputStyle0 = mgInputCss;
+
+const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.slotLabel = 'label';
+        this.slotError = 'error';
+        this.slotHelpText = 'help-text';
+        // style
+        this.classInput = 'mg-c-input';
+        this.classHasError = 'mg-c-input--has-error';
+        this.classLabelOnTop = 'mg-c-input--label-on-top';
+        /**
+         * Get readonly values
+         * @returns formated readonly value
+         */
+        this.getReadonlyValues = () => {
+            var _a;
+            if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {
+                return this.readonlyValue.join(', ');
+            }
+            else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {
+                return this.readonlyValue;
+            }
+            else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {
+                return this.readonlyValue[0];
+            }
+            else {
+                return ((_a = this.readonlyValue) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.readonlyValue : '';
+            }
+        };
+        /**
+         * Get tooltip node
+         * @returns mg-tooltip
+         */
+        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
+        this.identifier = undefined;
+        this.label = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.tooltip = undefined;
+        this.tooltipPosition = 'input';
+        this.required = false;
+        this.readonlyValue = undefined;
+        this.errorMessage = undefined;
+        this.helpText = undefined;
+        this.ariaDescribedbyIDs = undefined;
+        this.isFieldset = false;
+        this.isReadonly = false;
+        this.isDisabled = false;
+        this.isVerticalList = false;
+    }
+    watchIdentifier(newValue) {
+        if (!Be(newValue)) {
+            throw new Error('<mg-input> prop "identifier" is required.');
+        }
+        else {
+            this.helpTextId = `${this.identifier}-help-text`;
+            this.helpTextErrorId = `${this.identifier}-error`;
+        }
+    }
+    watchLabelOnTop(newValue) {
+        if (newValue) {
+            this.element.classList.add(this.classLabelOnTop);
+        }
+        else {
+            this.element.classList.remove(this.classLabelOnTop);
+        }
+    }
+    watchLabelConfig() {
+        if (this.labelHide && this.labelOnTop) {
+            throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
+        }
+    }
+    watchTooltipPosition(newValue) {
+        if (!tooltipPositions.includes(newValue)) {
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
+        }
+    }
+    watchErrorMessage(newValue) {
+        var _a;
+        if (newValue) {
+            this.element.classList.add(this.classHasError);
+            this.renderErrorMessage();
+        }
+        else {
+            this.element.classList.remove(this.classHasError);
+            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.errorMessageSlotElement = undefined;
+        }
+    }
+    watchHelpText(newValue) {
+        var _a;
+        if (newValue) {
+            this.renderHelpText();
+        }
+        else {
+            (_a = this.helptextMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.helptextMessageSlotElement = undefined;
+        }
+    }
+    watchAriaDescribedbyIDs() {
+        // a11y IDs
+        const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
+        // Help text
+        if (this.helpText) {
+            this.renderHelpText();
+            if (!ariaDescribedbyIDs.has(this.helpTextId))
+                ariaDescribedbyIDs.add(this.helpTextId);
+        }
+        // Error Message
+        if (this.errorMessage) {
+            this.renderErrorMessage();
+            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
+                ariaDescribedbyIDs.add(this.helpTextErrorId);
+        }
+        this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
+            element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+        });
+    }
+    /**
+     * Component classes
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchClass() {
+        if (!this.element.classList.contains(this.classInput)) {
+            this.element.classList.add(this.classInput);
+        }
+        this.isFieldset = this.element.classList.contains(classFieldset);
+        this.isReadonly = this.element.classList.contains(classReadonly);
+        this.isDisabled = this.element.classList.contains(classDisabled);
+        this.isVerticalList = this.element.classList.contains(classVerticalList);
+    }
+    /**
+     * Trigger label update
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchLabel() {
+        if (!Be(this.label)) {
+            throw new Error('<mg-input> prop "label" is required.');
+        }
+        else {
+            this.watchAriaDescribedbyIDs();
+            this.renderLabel();
+        }
+    }
+    /************
+     * Methods *
+     ************/
+    /**
+     * Render input label
+     */
+    renderLabel() {
+        let labelSlotElement = this.element.querySelector(`[slot=${this.slotLabel}]`);
+        // first remove previous labelslot if exist
+        labelSlotElement === null || labelSlotElement === void 0 ? void 0 : labelSlotElement.remove();
+        // create title element
+        labelSlotElement = document.createElement('mg-input-title');
+        [
+            ['slot', this.slotLabel],
+            ['identifier', this.identifier],
+            ['readonly', this.isReadonly.toString()],
+            ['required', ((this.required && !this.isDisabled) || false).toString()],
+            ['is-legend', this.isFieldset.toString()],
+        ].forEach(([attr, val]) => {
+            labelSlotElement.setAttribute(attr, val);
+        });
+        // create label element
+        const label = document.createElement('span');
+        label.classList.add('mg-c-input-title__text');
+        label.textContent = this.label;
+        labelSlotElement.appendChild(label);
+        this.element.appendChild(labelSlotElement);
+    }
+    /**
+     * Render error message
+     */
+    renderErrorMessage() {
+        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
+        if (!this.errorMessageSlotElement) {
+            this.errorMessageSlotElement = document.createElement('div');
+            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
+            this.element.appendChild(this.errorMessageSlotElement);
+        }
+        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
+        this.errorMessageSlotElement.innerHTML = this.errorMessage;
+    }
+    /**
+     * Render help text message
+     */
+    renderHelpText() {
+        this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);
+        if (!this.helptextMessageSlotElement) {
+            this.helptextMessageSlotElement = document.createElement('div');
+            this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
+            this.element.appendChild(this.helptextMessageSlotElement);
+        }
+        this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);
+        this.helptextMessageSlotElement.innerHTML = this.helpText;
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchIdentifier(this.identifier);
+        this.watchLabel();
+        this.watchLabelOnTop(this.labelOnTop);
+        this.watchLabelConfig();
+        this.watchTooltipPosition(this.tooltipPosition);
+        this.watchHelpText(this.helpText);
+        this.watchErrorMessage(this.errorMessage);
+        this.watchClass();
+    }
+    /**
+     * Validate slots
+     */
+    componentDidLoad() {
+        this.watchAriaDescribedbyIDs();
+        if (!this.isReadonly && !this.isFieldset && !this.element.querySelector(`#${this.identifier}`)) {
+            throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);
+        }
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        const readonlyValue = this.getReadonlyValues();
+        const isGroup = this.isFieldset && !this.isReadonly;
+        return (h(Host, { key: '5eedfac460913f23f71a3fbba43af958afc63e0d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '9335584ba10e2bc199accb9b4200b45252c848a9', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '7c5de08476008bfe6cbcfa07706cee30f16bc059', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '5cf88a0ea68aaf2d8f1c96c4593ef6ea0133beb6', class: "mg-c-input__input-container" }, this.isReadonly
+            ? [
+                Array.isArray(readonlyValue) ? (h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", { key: "readonly-value" }, readonlyValue)),
+                h("slot", { key: "default-slot" }),
+            ]
+            : [
+                h("div", { class: "mg-c-input__input", key: "tooltip" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()),
+                this.helpText && (h("div", { class: "mg-c-input__help-text", key: "help-text" }, h("slot", { name: this.slotHelpText }))),
+                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive", key: "error-message" }, h("slot", { name: this.slotError }))),
+            ])));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
+        "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
+        "labelHide": ["watchLabelConfig"],
+        "tooltipPosition": ["watchTooltipPosition"],
+        "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
+        "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
+        "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
+        "class": ["watchClass", "watchLabel"],
+        "label": ["watchLabel"]
+    }; }
+    static get style() { return MgInputStyle0; }
+}, [1, "mg-input", {
+        "identifier": [1],
+        "label": [1],
+        "labelOnTop": [4, "label-on-top"],
+        "labelHide": [4, "label-hide"],
+        "tooltip": [1],
+        "tooltipPosition": [1, "tooltip-position"],
+        "required": [4],
+        "readonlyValue": [1, "readonly-value"],
+        "errorMessage": [1, "error-message"],
+        "helpText": [1, "help-text"],
+        "ariaDescribedbyIDs": [16],
+        "isFieldset": [32],
+        "isReadonly": [32],
+        "isDisabled": [32],
+        "isVerticalList": [32]
+    }, undefined, {
+        "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
+        "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
+        "labelHide": ["watchLabelConfig"],
+        "tooltipPosition": ["watchTooltipPosition"],
+        "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
+        "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
+        "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
+        "class": ["watchClass", "watchLabel"],
+        "label": ["watchLabel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-input", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgInput);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { Handler as H, MgInput as M, classVerticalList as a, classReadonly as b, classFieldset as c, defineCustomElement as d, classDisabled as e, widths as w };
+
+//# sourceMappingURL=mg-input2.js.map

package/dist/components/mg-input2.js.map

@@ -0,0 +1 @@
+{"file":"mg-input2.js","mappings":"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","names":["isValidString"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.tsx"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible tootltip postions\n */\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | (HTMLMgInputElement & { required: true; invalid: false; displayError: () => void; labelOnTop: boolean; readonly: boolean })\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/**\n * Available handlers\n */\nexport enum Handler {\n  BLUR = 'blur',\n  FOCUS = 'focus',\n}\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".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__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/*# sourceMappingURL=mg-input.css.map */\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/**\n * @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n */\n@Component({\n  tag: 'mg-input',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n  shadow: true,\n})\nexport class MgInput {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selectors\n  private helpTextId: string;\n  private helpTextErrorId: string;\n  private readonly slotLabel = 'label';\n  private readonly slotError = 'error';\n  private readonly slotHelpText = 'help-text';\n\n  // slots elements\n  private errorMessageSlotElement: HTMLElement;\n  private helptextMessageSlotElement: HTMLElement;\n\n  // style\n  private readonly classInput = 'mg-c-input';\n  private readonly classHasError = 'mg-c-input--has-error';\n  private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgInput['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-input> prop \"identifier\" is required.');\n    } else {\n      this.helpTextId = `${this.identifier}-help-text`;\n      this.helpTextErrorId = `${this.identifier}-error`;\n    }\n  }\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n  @Watch('labelOnTop')\n  watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n    if (newValue) {\n      this.element.classList.add(this.classLabelOnTop);\n    } else {\n      this.element.classList.remove(this.classLabelOnTop);\n    }\n  }\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide: boolean = false;\n  @Watch('labelHide')\n  @Watch('labelOnTop')\n  watchLabelConfig(): void {\n    if (this.labelHide && this.labelOnTop) {\n      throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n  @Watch('tooltipPosition')\n  watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n    if (!tooltipPositions.includes(newValue)) {\n      throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Defines value to display in readonly mode\n   */\n  @Prop() readonlyValue: string | string[];\n\n  /**\n   * Define error message to display\n   */\n  @Prop() errorMessage?: string;\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: MgInput['errorMessage']): void {\n    if (newValue) {\n      this.element.classList.add(this.classHasError);\n      this.renderErrorMessage();\n    } else {\n      this.element.classList.remove(this.classHasError);\n      this.errorMessageSlotElement?.remove();\n      this.errorMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define help text to display\n   */\n  @Prop() helpText?: string;\n  @Watch('helpText')\n  watchHelpText(newValue: MgInput['helpText']): void {\n    if (newValue) {\n      this.renderHelpText();\n    } else {\n      this.helptextMessageSlotElement?.remove();\n      this.helptextMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define aria-describedby ids to link with\n   */\n  @Prop() ariaDescribedbyIDs: string[];\n  @Watch('identifier')\n  @Watch('errorMessage')\n  @Watch('helpText')\n  @Watch('ariaDescribedbyIDs')\n  watchAriaDescribedbyIDs(): void {\n    // a11y IDs\n    const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n    // Help text\n    if (this.helpText) {\n      this.renderHelpText();\n      if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n    }\n\n    // Error Message\n    if (this.errorMessage) {\n      this.renderErrorMessage();\n      if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n    }\n\n    this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n      element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n    });\n  }\n\n  /**\n   * Component classes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  watchClass(): void {\n    if (!this.element.classList.contains(this.classInput)) {\n      this.element.classList.add(this.classInput);\n    }\n    this.isFieldset = this.element.classList.contains(classFieldset);\n    this.isReadonly = this.element.classList.contains(classReadonly);\n    this.isDisabled = this.element.classList.contains(classDisabled);\n    this.isVerticalList = this.element.classList.contains(classVerticalList);\n  }\n\n  /**\n   * Trigger label update\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  @Watch('label')\n  watchLabel(): void {\n    if (!isValidString(this.label)) {\n      throw new Error('<mg-input> prop \"label\" is required.');\n    } else {\n      this.watchAriaDescribedbyIDs();\n      this.renderLabel();\n    }\n  }\n\n  /**\n   * Element is fieldset\n   */\n  @State() isFieldset: boolean = false;\n\n  /**\n   * Element is readonly\n   */\n  @State() isReadonly: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isDisabled: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isVerticalList: boolean = false;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Render input label\n   */\n  private renderLabel(): void {\n    let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n    // first remove previous labelslot if exist\n    labelSlotElement?.remove();\n\n    // create title element\n    labelSlotElement = document.createElement('mg-input-title');\n    [\n      ['slot', this.slotLabel],\n      ['identifier', this.identifier],\n      ['readonly', this.isReadonly.toString()],\n      ['required', ((this.required && !this.isDisabled) || false).toString()],\n      ['is-legend', this.isFieldset.toString()],\n    ].forEach(([attr, val]) => {\n      labelSlotElement.setAttribute(attr, val);\n    });\n\n    // create label element\n    const label = document.createElement('span');\n    label.classList.add('mg-c-input-title__text');\n    label.textContent = this.label;\n\n    labelSlotElement.appendChild(label);\n    this.element.appendChild(labelSlotElement);\n  }\n\n  /**\n   * Render error message\n   */\n  private renderErrorMessage(): void {\n    this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n    if (!this.errorMessageSlotElement) {\n      this.errorMessageSlotElement = document.createElement('div');\n      this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n      this.element.appendChild(this.errorMessageSlotElement);\n    }\n    this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n    this.errorMessageSlotElement.innerHTML = this.errorMessage;\n  }\n\n  /**\n   * Render help text message\n   */\n  private renderHelpText(): void {\n    this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n    if (!this.helptextMessageSlotElement) {\n      this.helptextMessageSlotElement = document.createElement('div');\n      this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n      this.element.appendChild(this.helptextMessageSlotElement);\n    }\n    this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n    this.helptextMessageSlotElement.innerHTML = this.helpText;\n  }\n\n  /**\n   * Get readonly values\n   * @returns formated readonly value\n   */\n  private getReadonlyValues = (): string | string[] => {\n    if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {\n      return this.readonlyValue.join(', ');\n    } else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {\n      return this.readonlyValue;\n    } else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {\n      return this.readonlyValue[0];\n    } else {\n      return this.readonlyValue?.length > 0 ? this.readonlyValue : '';\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.watchIdentifier(this.identifier);\n    this.watchLabel();\n    this.watchLabelOnTop(this.labelOnTop);\n    this.watchLabelConfig();\n    this.watchTooltipPosition(this.tooltipPosition);\n    this.watchHelpText(this.helpText);\n    this.watchErrorMessage(this.errorMessage);\n    this.watchClass();\n  }\n\n  /**\n   * Validate slots\n   */\n  componentDidLoad(): void {\n    this.watchAriaDescribedbyIDs();\n    if (!this.isReadonly && !this.isFieldset && !this.element.querySelector(`#${this.identifier}`)) {\n      throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n    }\n  }\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  private renderTooltip = (): HTMLMgTooltipElement => (\n    <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const readonlyValue = this.getReadonlyValues();\n    const isGroup = this.isFieldset && !this.isReadonly;\n    return (\n      <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n        <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n          <slot name={this.slotLabel}></slot>\n          {this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n        </div>\n        <div class=\"mg-c-input__input-container\">\n          {this.isReadonly\n            ? [\n                Array.isArray(readonlyValue) ? (\n                  <ul key=\"readonly-value-list\">\n                    {readonlyValue.map(value => (\n                      <li key={value}>\n                        <strong>{value}</strong>\n                      </li>\n                    ))}\n                  </ul>\n                ) : (\n                  <strong key=\"readonly-value\">{readonlyValue}</strong>\n                ),\n                <slot key=\"default-slot\"></slot>,\n              ]\n            : [\n                <div class=\"mg-c-input__input\" key=\"tooltip\">\n                  <slot></slot>\n                  {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()}\n                </div>,\n                this.helpText && (\n                  <div class=\"mg-c-input__help-text\" key=\"help-text\">\n                    <slot name={this.slotHelpText}></slot>\n                  </div>\n                ),\n                !this.isDisabled && this.errorMessage && (\n                  <div class=\"mg-c-input__error\" aria-live=\"assertive\" key=\"error-message\">\n                    <slot name={this.slotError}></slot>\n                  </div>\n                ),\n              ]}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}