@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-input2.js

@@ -1,459 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isValidString, t as toString, a as isValideID } from './index2.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'];
-/**
- * Possible label headings
- */
-const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-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 classDisplayCharacterLeft = 'mg-c-input--display-character-left';
-
-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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */: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(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}: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--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}: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:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-font-size-8);margin-bottom:var(--mg-b-font-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@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:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
-
-const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            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';
-        this.classHasHeading = 'mg-c-input--has-heading';
-        this.classLabelBorderDisplay = 'mg-c-input--label-border-display';
-        this.classInputsOnBottom = 'mg-c-input--inputs-on-bottom';
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if label border is visible
-         * You must pair this mode with `labelOnTop`and `fieldset` class
-         */
-        this.labelBorderDisplay = false;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Define if input is required
-         */
-        this.required = false;
-        /**
-         * Display inputs after help-text and error message
-         */
-        this.inputsOnBottom = false;
-        /**
-         * Define aria-describedby ids to link with
-         */
-        this.ariaDescribedbyIDs = [];
-        /**
-         * Element is fieldset
-         */
-        this.isFieldset = false;
-        /**
-         * Element is readonly
-         */
-        this.isReadonly = false;
-        /**
-         * Element is disabled
-         */
-        this.isDisabled = false;
-        /**
-         * Element is disabled
-         */
-        this.isVerticalList = false;
-        /************
-         * Methods *
-         ************/
-        /**
-         * Update element aria-describedby
-         * @param element - element to update
-         * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
-         */
-        this.updateElementAriaDescribedby = (element, ariaDescribedbyIDs) => {
-            if (ariaDescribedbyIDs.size > 0) {
-                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
-            }
-            else {
-                element.removeAttribute('aria-describedby');
-            }
-        };
-        /**
-         * Get tooltip node
-         * @returns mg-tooltip
-         */
-        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
-        /**
-         * Get input container element
-         * @returns ordered elements
-         */
-        this.inputContainerElements = () => {
-            const elements = [
-                this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
-                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
-            ];
-            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
-            if (this.inputsOnBottom) {
-                return [...elements, inputSlot];
-            }
-            else {
-                return [inputSlot, ...elements];
-            }
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        }
-        else if (!isValideID(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-        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".');
-        }
-    }
-    watchlabelHeading(newValue) {
-        if (this.isFieldset && this.labelOnTop && labelHeadings.includes(newValue)) {
-            this.element.classList.add(this.classHasHeading);
-        }
-        else {
-            if ((!this.isFieldset && newValue !== undefined) || typeof newValue === 'string') {
-                throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${labelHeadings.join(', ')}. Passed value: ${toString(newValue)}.`);
-            }
-            this.labelHeading = undefined;
-            this.element.classList.remove(this.classHasHeading);
-        }
-    }
-    watchLabelBorderDisplay(newValue) {
-        if (this.isFieldset && this.labelOnTop && newValue) {
-            this.element.classList.add(this.classLabelBorderDisplay);
-        }
-        else {
-            this.element.classList.remove(this.classLabelBorderDisplay);
-        }
-    }
-    watchTooltipPosition(newValue) {
-        if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchErrorMessage(newValue) {
-        var _a;
-        if (newValue !== undefined) {
-            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 (isValidString(newValue) && !this.isReadonly) {
-            this.renderHelpText();
-        }
-        else {
-            (_a = this.helptextMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
-            this.helptextMessageSlotElement = undefined;
-        }
-    }
-    watchInputsOnBottom(newValue) {
-        if (newValue) {
-            this.element.classList.add(this.classInputsOnBottom);
-        }
-        else {
-            this.element.classList.remove(this.classInputsOnBottom);
-        }
-    }
-    watchAriaDescribedbyIDs() {
-        if (this.isReadonly) {
-            return;
-        }
-        else if (typeof this.ariaDescribedbyIDs === 'string') {
-            this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
-            return;
-        }
-        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
-            this.ariaDescribedbyIDs = [];
-            return;
-        }
-        // a11y IDs
-        const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
-        // Help text
-        if (isValidString(this.helpText)) {
-            this.renderHelpText();
-            if (!ariaDescribedbyIDs.has(this.helpTextId))
-                ariaDescribedbyIDs.add(this.helpTextId);
-        }
-        // Error Message
-        if (isValidString(this.errorMessage)) {
-            this.renderErrorMessage();
-            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
-                ariaDescribedbyIDs.add(this.helpTextErrorId);
-        }
-        const inputs = this.element.querySelectorAll('input,select,textarea,[role="switch"]');
-        inputs.forEach((element) => {
-            this.updateElementAriaDescribedby(element, ariaDescribedbyIDs);
-        });
-        // use timeout to await for legend render for componentWillLoad hook
-        setTimeout(() => {
-            const legend = this.element.querySelector('legend');
-            if (legend !== null) {
-                this.updateElementAriaDescribedby(legend, ariaDescribedbyIDs);
-            }
-        });
-    }
-    /**
-     * 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 (!isValidString(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${toString(this.label)}.`);
-        }
-        else {
-            this.watchAriaDescribedbyIDs();
-            this.renderLabel();
-        }
-    }
-    /**
-     * 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
-        if (labelHeadings.includes(this.labelHeading)) {
-            let label = this.element.shadowRoot.querySelector(this.labelHeading);
-            if (label === null) {
-                label = document.createElement(this.labelHeading);
-                label.classList.add('mg-c-input-title__text');
-                labelSlotElement.appendChild(label);
-            }
-            label.textContent = this.label;
-        }
-        else {
-            labelSlotElement.textContent = this.label;
-        }
-        this.element.appendChild(labelSlotElement);
-        // update aria-describedby
-        this.watchAriaDescribedbyIDs();
-    }
-    /**
-     * Render error message
-     */
-    renderErrorMessage() {
-        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessageSlotElement === null) {
-            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 === null) {
-            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.watchClass();
-        this.watchLabelOnTop(this.labelOnTop);
-        this.watchLabelConfig();
-        this.watchTooltipPosition(this.tooltipPosition);
-        this.watchHelpText(this.helpText);
-        this.watchErrorMessage(this.errorMessage);
-        this.watchInputsOnBottom(this.inputsOnBottom);
-        this.watchlabelHeading(this.labelHeading);
-        this.watchLabelBorderDisplay(this.labelBorderDisplay);
-    }
-    /**
-     * Validate slots
-     */
-    componentDidLoad() {
-        this.watchAriaDescribedbyIDs();
-        if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {
-            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 isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
-        "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
-        "labelHide": ["watchLabelConfig"],
-        "labelHeading": ["watchlabelHeading"],
-        "labelBorderDisplay": ["watchLabelBorderDisplay"],
-        "tooltipPosition": ["watchTooltipPosition"],
-        "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
-        "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
-        "inputsOnBottom": ["watchInputsOnBottom"],
-        "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
-        "class": ["watchClass", "watchLabel"],
-        "label": ["watchLabel"],
-        "required": ["watchLabel"],
-        "isReadonly": ["watchLabel"],
-        "isFieldset": ["watchLabel"]
-    }; }
-    static get style() { return mgInputCss; }
-}, [257, "mg-input", {
-        "identifier": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "labelHeading": [1025, "label-heading"],
-        "labelBorderDisplay": [4, "label-border-display"],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "required": [4],
-        "errorMessage": [1, "error-message"],
-        "helpText": [1, "help-text"],
-        "inputsOnBottom": [4, "inputs-on-bottom"],
-        "ariaDescribedbyIDs": [1025, "aria-describedby-i-ds"],
-        "isFieldset": [32],
-        "isReadonly": [32],
-        "isDisabled": [32],
-        "isVerticalList": [32]
-    }, undefined, {
-        "identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
-        "labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
-        "labelHide": ["watchLabelConfig"],
-        "labelHeading": ["watchlabelHeading"],
-        "labelBorderDisplay": ["watchLabelBorderDisplay"],
-        "tooltipPosition": ["watchTooltipPosition"],
-        "errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
-        "helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
-        "inputsOnBottom": ["watchInputsOnBottom"],
-        "ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
-        "class": ["watchClass", "watchLabel"],
-        "label": ["watchLabel"],
-        "required": ["watchLabel"],
-        "isReadonly": ["watchLabel"],
-        "isFieldset": ["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 { MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classDisplayCharacterLeft as e, classVerticalList as f, widths as w };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,h as s,Host as n}from"@stencil/core/internal/client";import{i as a,t as o,a as r}from"./index2.js";import{l as h,t as m,a as l,c as p,b as g,d as c}from"./mg-input.conf.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as _}from"./mg-tooltip-content2.js";const f=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.slotLabel="label",this.slotError="error",this.slotHelpText="help-text",this.classInput="mg-c-input",this.classHasError="mg-c-input--has-error",this.classLabelOnTop="mg-c-input--label-on-top",this.classHasHeading="mg-c-input--has-heading",this.classLabelBorderDisplay="mg-c-input--label-border-display",this.classInputsOnBottom="mg-c-input--inputs-on-bottom",this.labelOnTop=!1,this.labelHide=!1,this.labelBorderDisplay=!1,this.tooltipPosition="input",this.required=!1,this.inputsOnBottom=!1,this.ariaDescribedbyIDs=[],this.isFieldset=!1,this.isReadonly=!1,this.isDisabled=!1,this.isVerticalList=!1,this.updateElementAriaDescribedby=(t,i)=>{i.size>0?t.setAttribute("aria-describedby",Array.from(i).join(" ")):t.removeAttribute("aria-describedby")},this.renderTooltip=()=>s("mg-tooltip",{identifier:`${this.identifier}-tooltip`,message:this.tooltip},s("mg-icon",{icon:"info-circle"})),this.inputContainerElements=()=>{const t=[this.helptextMessageSlotElement&&s("div",{class:"mg-c-input__help-text"},s("slot",{name:this.slotHelpText})),!this.isDisabled&&this.errorMessage&&s("div",{class:"mg-c-input__error","aria-live":"assertive"},s("slot",{name:this.slotError}))],i=s("div",{class:"mg-c-input__input"},s("slot",null),this.tooltip&&!this.labelOnTop&&("input"===this.tooltipPosition||this.labelHide)&&this.renderTooltip());return this.inputsOnBottom?[...t,i]:[i,...t]}}watchIdentifier(t){if(!a(t))throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${o(t)}.`);r(t)?(this.helpTextId=`${this.identifier}-help-text`,this.helpTextErrorId=`${this.identifier}-error`):console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${o(t)}.`)}watchLabelOnTop(t){t?this.element.classList.add(this.classLabelOnTop):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".')}watchlabelHeading(t){if(this.isFieldset&&this.labelOnTop&&h.includes(t))this.element.classList.add(this.classHasHeading);else{if(!this.isFieldset&&void 0!==t||"string"==typeof t)throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${h.join(", ")}. Passed value: ${o(t)}.`);this.labelHeading=void 0,this.element.classList.remove(this.classHasHeading)}}watchLabelBorderDisplay(t){this.isFieldset&&this.labelOnTop&&t?this.element.classList.add(this.classLabelBorderDisplay):this.element.classList.remove(this.classLabelBorderDisplay)}watchTooltipPosition(t){if(!m.includes(t))throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${m.join(", ")}. Passed value: ${o(t)}.`)}watchErrorMessage(t){var i;void 0!==t?(this.element.classList.add(this.classHasError),this.renderErrorMessage()):(this.element.classList.remove(this.classHasError),null===(i=this.errorMessageSlotElement)||void 0===i||i.remove(),this.errorMessageSlotElement=void 0)}watchHelpText(t){var i;a(t)&&!this.isReadonly?this.renderHelpText():(null===(i=this.helptextMessageSlotElement)||void 0===i||i.remove(),this.helptextMessageSlotElement=void 0)}watchInputsOnBottom(t){t?this.element.classList.add(this.classInputsOnBottom):this.element.classList.remove(this.classInputsOnBottom)}watchAriaDescribedbyIDs(){if(this.isReadonly)return;if("string"==typeof this.ariaDescribedbyIDs)return void(this.ariaDescribedbyIDs=this.ariaDescribedbyIDs.split(" "));if(!Array.isArray(this.ariaDescribedbyIDs)||!this.ariaDescribedbyIDs.every((t=>"string"==typeof t)))return void(this.ariaDescribedbyIDs=[]);const t=new Set(this.ariaDescribedbyIDs);a(this.helpText)&&(this.renderHelpText(),t.has(this.helpTextId)||t.add(this.helpTextId)),a(this.errorMessage)&&(this.renderErrorMessage(),t.has(this.helpTextErrorId)||t.add(this.helpTextErrorId)),this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach((i=>{this.updateElementAriaDescribedby(i,t)})),setTimeout((()=>{const i=this.element.querySelector("legend");null!==i&&this.updateElementAriaDescribedby(i,t)}))}watchClass(){this.element.classList.contains(this.classInput)||this.element.classList.add(this.classInput),this.isFieldset=this.element.classList.contains(l),this.isReadonly=this.element.classList.contains(p),this.isDisabled=this.element.classList.contains(g),this.isVerticalList=this.element.classList.contains(c)}watchLabel(){if(!a(this.label))throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${o(this.label)}.`);this.watchAriaDescribedbyIDs(),this.renderLabel()}renderLabel(){let t=this.element.querySelector(`[slot=${this.slotLabel}]`);if(null==t||t.remove(),t=document.createElement("mg-input-title"),[["slot",this.slotLabel],["identifier",this.identifier],["readonly",this.isReadonly.toString()],["required",(this.required&&!this.isDisabled||!1).toString()],["is-legend",this.isFieldset.toString()]].forEach((([i,e])=>{t.setAttribute(i,e)})),h.includes(this.labelHeading)){let i=this.element.shadowRoot.querySelector(this.labelHeading);null===i&&(i=document.createElement(this.labelHeading),i.classList.add("mg-c-input-title__text"),t.appendChild(i)),i.textContent=this.label}else t.textContent=this.label;this.element.appendChild(t),this.watchAriaDescribedbyIDs()}renderErrorMessage(){this.errorMessageSlotElement=this.element.querySelector(`[slot=${this.slotError}]`),null===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}renderHelpText(){this.helptextMessageSlotElement=this.element.querySelector(`[slot=${this.slotHelpText}]`),null===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}componentWillLoad(){this.watchIdentifier(this.identifier),this.watchLabel(),this.watchClass(),this.watchLabelOnTop(this.labelOnTop),this.watchLabelConfig(),this.watchTooltipPosition(this.tooltipPosition),this.watchHelpText(this.helpText),this.watchErrorMessage(this.errorMessage),this.watchInputsOnBottom(this.inputsOnBottom),this.watchlabelHeading(this.labelHeading),this.watchLabelBorderDisplay(this.labelBorderDisplay)}componentDidLoad(){if(this.watchAriaDescribedbyIDs(),!this.isReadonly&&!this.isFieldset&&null===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(){const t=this.isFieldset&&!this.isReadonly;return s(n,{key:"a1db280d19eead30e7ae27eb6e395e58b35baa63",class:this.element.classList.toString(),role:t?"group":void 0,"aria-labelledby":t?`${this.identifier}-title`:void 0},s("div",{key:"282f5776a9269272507f3e00f5dce690c9a604f4",class:{"mg-c-input__title":!0,"mg-u-visually-hidden":this.labelHide}},s("slot",{key:"b122979a159912d9c34bb024021257f9f88e6ff4",name:this.slotLabel}),this.tooltip&&("label"===this.tooltipPosition||this.labelOnTop)&&!this.labelHide&&this.renderTooltip()),s("div",{key:"098d3a7329fa0b5f37534fdf2df89e0468dcbe2a",class:"mg-c-input__input-container"},this.inputContainerElements()))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}}static get style(){return".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}}: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(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}: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--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}: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:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-font-size-8);margin-bottom:var(--mg-b-font-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@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:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}"}},[257,"mg-input",{identifier:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],labelHeading:[1025,"label-heading"],labelBorderDisplay:[4,"label-border-display"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],required:[4],errorMessage:[1,"error-message"],helpText:[1,"help-text"],inputsOnBottom:[4,"inputs-on-bottom"],ariaDescribedbyIDs:[1025,"aria-describedby-i-ds"],isFieldset:[32],isReadonly:[32],isDisabled:[32],isVerticalList:[32]},void 0,{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input","mg-icon","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input":customElements.get(t(i))||customElements.define(t(i),f);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input-title":customElements.get(t(i))||d();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||_()}}))}w();export{f as M,w as d}

package/dist/components/mg-item-more.js

@@ -1,6 +1 @@
-import { M as MgItemMore$1, d as defineCustomElement$1 } from './mg-item-more2.js';
-
-const MgItemMore = MgItemMore$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgItemMore, defineCustomElement };
+import{M as m,d as o}from"./mg-item-more2.js";const r=m,s=o;export{r as MgItemMore,s as defineCustomElement}