@mgdis/mg-components 6.20.0 → 6.21.0

package/dist/components/mg-divider2.js

@@ -1,49 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const mgDividerCss = "/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}";
-
-const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**************
-         * Decorators *
-         **************/
-        /**
-         * Define component size
-         */
-        this.fullWidth = false;
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
-                'mg-c-divider': true,
-                'mg-c-divider--full-width': this.fullWidth,
-            } }));
-    }
-    static get style() { return mgDividerCss; }
-}, [257, "mg-divider", {
-        "fullWidth": [4, "full-width"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-divider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-divider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgDivider);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgDivider as M, defineCustomElement as d };
+import{transformTag as i,proxyCustomElement as e,HTMLElement as d,h as t}from"@stencil/core/internal/client";const r=e(class extends d{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.fullWidth=!1}render(){return t("div",{key:"60b987cb329c6db14c2cc4a665e7f32b2696a3ee",class:{"mg-c-divider":!0,"mg-c-divider--full-width":this.fullWidth}})}static get style(){return".mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}"}},[1,"mg-divider",{fullWidth:[4,"full-width"]}]);function c(){"undefined"!=typeof customElements&&["mg-divider"].forEach((e=>{"mg-divider"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))}c();export{r as M,c as d}

package/dist/components/mg-fieldset.js

@@ -1,209 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList, i as isValidString } from './index2.js';
-import { d as defineCustomElement$5, c as classReadonly } from './mg-input2.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-const MgFieldset$1 = /*@__PURE__*/ proxyCustomElement(class MgFieldset extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Fieldset name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if legend is visible
-         */
-        this.legendHide = false;
-        /**
-         * Define if legend border is visible.
-         */
-        this.legendBorderDisplay = false;
-        /**
-         * Define if inputs are readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if inputs are disabled
-         */
-        this.disabled = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--fieldset']);
-        /**
-         * Check if fieldset is valid
-         */
-        this.checkValidity = () => {
-            var _a;
-            this.valid = !(this.mgInputs.some(input => input.invalid) || ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0);
-        };
-        /**
-         * Set mgInputs
-         */
-        this.setMgInputs = () => {
-            // Get slotted mgInputs
-            this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
-            // Set inputs readonly or disabled based on form configuration
-            // Othewise listen to events
-            this.mgInputs.forEach(input => {
-                if (this.readonly) {
-                    input.readonly = true;
-                }
-                else if (this.disabled) {
-                    input.disabled = true;
-                }
-                else {
-                    input.addEventListener('input-valid', this.checkValidity);
-                }
-            });
-        };
-    }
-    watchLegendBorderDisplay(newValue) {
-        if (newValue && !isValidString(this.legendHeading)) {
-            throw new Error('<mg-fieldset> prop "legendBorderDisplay" must not be paired with the prop "legendHeading".');
-        }
-    }
-    watchReadonly(newValue) {
-        if (newValue) {
-            this.classCollection.add(classReadonly);
-        }
-        else {
-            this.classCollection.delete(classReadonly);
-        }
-    }
-    handleAttributeChange() {
-        this.setMgInputs();
-    }
-    /**
-     * Component is not a candidate for constraint validation.
-     * You can use this method to define the `errorMessage` and set the `valid` state to `false`.
-     * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
-     */
-    async setCustomValidity(errorMessage) {
-        if (isValidString(errorMessage)) {
-            this.errorMessage = errorMessage;
-        }
-        else {
-            this.errorMessage = undefined;
-        }
-        this.checkValidity();
-    }
-    /**
-     * Display inputs error if it exists.
-     */
-    async displayError() {
-        if (!this.readonly) {
-            this.mgInputs.forEach(input => {
-                input.displayError();
-            });
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        this.watchReadonly(this.readonly);
-        this.watchLegendBorderDisplay(this.legendBorderDisplay);
-        this.setMgInputs();
-    }
-    /**
-     * Add slot listeners
-     */
-    componentDidLoad() {
-        // Update mgInputs when mgForm content change
-        const observerOptions = { childList: true, subtree: true };
-        new MutationObserver(mutations => {
-            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
-                this.setMgInputs();
-            }
-        }).observe(this.element, observerOptions);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("mg-input", { key: 'b8b7c203bb2ed22cc9344389af5a6ae8d85af6d5', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'c0e7480b14b0a8e136dd951bdce7275b65b59b48', class: "mg-c-input__input-group" }, h("slot", { key: '021e7b126cef9437e64622d8ef59219b09c06e9f' }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "legendBorderDisplay": ["watchLegendBorderDisplay"],
-        "readonly": ["watchReadonly", "handleAttributeChange"],
-        "disabled": ["handleAttributeChange"]
-    }; }
-}, [257, "mg-fieldset", {
-        "identifier": [1],
-        "name": [1],
-        "legend": [1],
-        "legendHide": [4, "legend-hide"],
-        "legendHeading": [1, "legend-heading"],
-        "legendBorderDisplay": [4, "legend-border-display"],
-        "readonly": [4],
-        "disabled": [4],
-        "tooltip": [1],
-        "helpText": [1, "help-text"],
-        "errorMessage": [32],
-        "valid": [32],
-        "classCollection": [32],
-        "setCustomValidity": [64],
-        "displayError": [64]
-    }, undefined, {
-        "legendBorderDisplay": ["watchLegendBorderDisplay"],
-        "readonly": ["watchReadonly", "handleAttributeChange"],
-        "disabled": ["handleAttributeChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-fieldset", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-fieldset":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgFieldset$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgFieldset = MgFieldset$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgFieldset, defineCustomElement };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{C as o,i as n}from"./index2.js";import{i as l,c as a}from"./mg-input.conf.js";import{d as r}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as h}from"./mg-input-title2.js";import{d as c}from"./mg-tooltip2.js";import{d as m}from"./mg-tooltip-content2.js";const p=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name=this.identifier,this.legendHide=!1,this.legendBorderDisplay=!1,this.readonly=!1,this.disabled=!1,this.classCollection=new o(["mg-c-input--fieldset"]),this.checkValidity=()=>{var t;this.valid=!(this.mgInputs.some((t=>t.invalid))||(null===(t=this.errorMessage)||void 0===t?void 0:t.length)>0)},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((t=>{"MG-INPUT-FILE"===t.nodeName&&(this.readonly?t.setAttribute("hidden",""):t.removeAttribute("hidden")),this.readonly&&!l(t)?t.readonly=!0:this.disabled?t.disabled=!0:t.addEventListener("input-valid",this.checkValidity)}))}}watchLegendBorderDisplay(t){if(t&&!n(this.legendHeading))throw Error('<mg-fieldset> prop "legendBorderDisplay" must not be paired with the prop "legendHeading".')}watchReadonly(t){t?this.classCollection.add(a):this.classCollection.delete(a)}handleAttributeChange(){this.setMgInputs()}async setCustomValidity(t){this.errorMessage=n(t)?t:void 0,this.checkValidity()}async displayError(){this.readonly||this.mgInputs.forEach((t=>{t.displayError()}))}componentWillLoad(){this.watchReadonly(this.readonly),this.watchLegendBorderDisplay(this.legendBorderDisplay),this.setMgInputs()}componentDidLoad(){const t={childList:!0,subtree:!0};new MutationObserver((e=>{e.some((e=>Object.keys(t).includes(e.type)))&&this.setMgInputs()})).observe(this.element,t)}render(){return s("mg-input",{key:"31ccb9f783687845080fc7f184cc54b7343fab65",label:this.legend,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:!this.legendHide,labelHeading:this.legendHeading,labelBorderDisplay:this.legendHeading&&this.legendBorderDisplay,labelHide:this.legendHide,inputsOnBottom:void 0!==this.legendHeading,tooltip:this.tooltip,tooltipPosition:"label",helpText:this.helpText,errorMessage:!this.valid&&n(this.errorMessage)?this.errorMessage:void 0},s("span",{key:"eedf1c66eaf88bee037c11b812844bb5a92175c1",class:"mg-c-input__input-group"},s("slot",{key:"a28f6759a63873ef4a228820b4310b42fcf1d3c7"})))}get element(){return this}static get watchers(){return{legendBorderDisplay:[{watchLegendBorderDisplay:0}],readonly:[{watchReadonly:0},{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}},[257,"mg-fieldset",{identifier:[1],name:[1],legend:[1],legendHide:[4,"legend-hide"],legendHeading:[1,"legend-heading"],legendBorderDisplay:[4,"legend-border-display"],readonly:[4],disabled:[4],tooltip:[1],helpText:[1,"help-text"],errorMessage:[32],valid:[32],classCollection:[32],setCustomValidity:[64],displayError:[64]},void 0,{legendBorderDisplay:[{watchLegendBorderDisplay:0}],readonly:[{watchReadonly:0},{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-fieldset","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((e=>{switch(e){case"mg-fieldset":customElements.get(t(e))||customElements.define(t(e),p);break;case"mg-icon":customElements.get(t(e))||r();break;case"mg-input":customElements.get(t(e))||d();break;case"mg-input-title":customElements.get(t(e))||h();break;case"mg-tooltip":customElements.get(t(e))||c();break;case"mg-tooltip-content":customElements.get(t(e))||m()}}))}g();const u=p,b=g;export{u as MgFieldset,b as defineCustomElement}

package/dist/components/mg-form.js

@@ -1,302 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, a as isValideID, t as toString } from './index2.js';
-import { i as initLocales } from './index3.js';
-
-/**
- * List of all possibles roles
- */
-const roles = ['form', 'search', 'none', 'presentation'];
-/**
- * List of all possibles required message status
- */
-const requiredMessageStatus = ['default', 'hide'];
-
-const mgFormCss = ".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}/*!\n * @prop --mg-c-form-inputs-title-width: Defines the width of the input title. Fallback on `calc(28 * var(--mg-b-size-8))`.\n */.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}";
-
-const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.formValid = createEvent(this, "form-valid", 7);
-        this.formSubmit = createEvent(this, "form-submit", 7);
-        this.formReset = createEvent(this, "form-reset", 7);
-        // Classes
-        this.classAllRequired = 'mg-c-form--all-required';
-        this.classLabelOnTop = 'mg-c-form--label-on-top';
-        /**
-         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-         * If not set, it will be created.
-         */
-        this.identifier = createID('mg-form');
-        /**
-         * Input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if form is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if slotted mg-component's label are displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if form is disabled
-         */
-        this.disabled = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-form']);
-        /**
-         * Define required message based on mg-inputs required elements
-         */
-        this.setRequiredMessage = () => {
-            // init required message
-            this.requiredMessageText = null;
-            this.classCollection.delete(this.classAllRequired);
-            if (this.requiredMessage === 'hide')
-                return;
-            else if (this.requiredMessage === 'default') {
-                this.requiredMessageText = this.messages.form.required;
-                return;
-            }
-            // If the form is disabled or readonly none of them are required
-            // Check if all fields are not editable (readonly or disabled)
-            const isEditable = input => !(input.disabled || input.readonly);
-            const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
-            if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
-                // Get editable inputs
-                const editableInputs = this.mgInputs.filter(isEditable);
-                // Get required inputs
-                // mg-input-toggle can not be required
-                const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
-                // All inputs are required
-                if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
-                    (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
-                    this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
-                    this.classCollection.add(this.classAllRequired);
-                }
-                // Some fields are required
-                else if (requiredInputs.length > 0) {
-                    this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
-                }
-            }
-        };
-        /**
-         * Returns a required message based on the count of required inputs.
-         * @param requiredInputs - An array of required input elements.
-         * @param keySingle - The key for the singular message format.
-         * @param keyPlural - The key for the plural message format.
-         * @returns The appropriate required message based on the count of required inputs.
-         */
-        this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
-        /**
-         * Check if form is valid
-         */
-        this.checkValidity = () => {
-            // Update required on input event
-            this.setRequiredMessage();
-            this.valid = !this.mgInputs.some(input => input.invalid);
-            this.invalid = !this.valid;
-            // We need to send valid event if it is the same value
-            this.formValid.emit(this.valid);
-        };
-        /**
-         * Handle Form Submit
-         * @param event - submit event
-         */
-        this.handleFormSubmit = (event) => {
-            event.preventDefault();
-            this.formSubmit.emit();
-        };
-        /**
-         * Set mgInputs
-         */
-        this.setMgInputs = () => {
-            // Get slotted mgInputs
-            this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
-            // Set inputs readonly or disabled based on form configuration
-            // Othewise listen to events
-            this.mgInputs.forEach(input => {
-                if (this.labelOnTop) {
-                    input.labelOnTop = true;
-                }
-                if (this.readonly) {
-                    input.readonly = true;
-                }
-                else if (this.disabled) {
-                    input.disabled = true;
-                }
-                else {
-                    input.addEventListener('input-valid', this.checkValidity);
-                }
-            });
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateRequiredMessage(newValue) {
-        if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateAriaRole(newValue) {
-        if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    handlelabelOnTop(newValue) {
-        if (newValue) {
-            this.classCollection.add(this.classLabelOnTop);
-        }
-        else {
-            this.classCollection.delete(this.classLabelOnTop);
-        }
-    }
-    handleAttributeChange() {
-        this.setMgInputs();
-        this.setRequiredMessage();
-    }
-    /**
-     * Display inputs/fieldsets errors if it exists.
-     */
-    async displayError() {
-        if (!this.readonly) {
-            const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
-            [...mgFieldsets, ...this.mgInputs].forEach(input => {
-                var _a;
-                (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
-            });
-            this.checkValidity();
-        }
-    }
-    /**
-     * Reset form inputs values, validity and error state
-     */
-    async reset() {
-        if (!this.readonly) {
-            await Promise.all(this.mgInputs.map(async (input) => {
-                if (input.reset !== undefined) {
-                    await input.reset();
-                }
-            }));
-            this.checkValidity();
-            this.formReset.emit(true);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        this.watchIdentifier(this.identifier);
-        this.validateAriaRole(this.ariaRole);
-        this.validateRequiredMessage(this.requiredMessage);
-        this.handlelabelOnTop(this.labelOnTop);
-        // Get slotted mgButtons
-        this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
-        // Set button form identifier
-        this.mgButtons.forEach(mgButton => {
-            mgButton.setAttribute('form', this.identifier);
-            if (mgButton.type === 'reset') {
-                mgButton.addEventListener('click', () => {
-                    this.reset();
-                });
-            }
-        });
-        // Set mgInputs
-        this.setMgInputs();
-        // Check validity when slotted mgInputs are ready
-        Promise.all(this.mgInputs.map(async (input) => {
-            try {
-                await input.componentOnReady();
-            }
-            catch (_a) { } // prevent error with VueJS first render
-        })).then(() => {
-            // Define required message and check validity
-            this.checkValidity();
-        });
-    }
-    /**
-     * Add slot listeners
-     */
-    componentDidLoad() {
-        // Update mgInputs when mgForm content change
-        const observerOptions = { childList: true, subtree: true };
-        new MutationObserver(mutations => {
-            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
-                this.setMgInputs();
-                this.checkValidity();
-            }
-        }).observe(this.element, observerOptions);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("form", { key: '8b698b2a33af00e36691abab5adff5488b736218', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '2e1fb5c4030ecb99d1f18c57d5c3fe238db4d12e', innerHTML: this.requiredMessageText }), h("slot", { key: '568fb8ac9ab0e3521899c05472592ebd15cc91fa' }), !this.readonly && !this.disabled && h("slot", { key: 'd4f38320de58f3b1d491083a34d1b5366d22b935', name: "actions" })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
-        "ariaRole": ["validateAriaRole"],
-        "labelOnTop": ["handlelabelOnTop"],
-        "readonly": ["handleAttributeChange"],
-        "disabled": ["handleAttributeChange"]
-    }; }
-    static get style() { return mgFormCss; }
-}, [257, "mg-form", {
-        "identifier": [1],
-        "name": [1],
-        "readonly": [4],
-        "requiredMessage": [1, "required-message"],
-        "ariaRole": [1, "aria-role"],
-        "labelOnTop": [4, "label-on-top"],
-        "disabled": [4],
-        "valid": [1028],
-        "invalid": [1028],
-        "classCollection": [32],
-        "requiredMessageText": [32],
-        "displayError": [64],
-        "reset": [64]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
-        "ariaRole": ["validateAriaRole"],
-        "labelOnTop": ["handlelabelOnTop"],
-        "readonly": ["handleAttributeChange"],
-        "disabled": ["handleAttributeChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-form"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgForm$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgForm = MgForm$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgForm, defineCustomElement };
+import{transformTag as i,proxyCustomElement as t,HTMLElement as e,createEvent as s,h as r}from"@stencil/core/internal/client";import{c as a,C as h,a as o,t as n}from"./index2.js";import{i as l}from"./index3.js";import{i as d}from"./mg-input.conf.js";const m=["form","search","none","presentation"],c=["default","hide"],f=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.formValid=s(this,"form-valid",7),this.formSubmit=s(this,"form-submit",7),this.formReset=s(this,"form-reset",7),this.classAllRequired="mg-c-form--all-required",this.classLabelOnTop="mg-c-form--label-on-top",this.identifier=a("mg-form"),this.name=this.identifier,this.readonly=!1,this.labelOnTop=!1,this.disabled=!1,this.classCollection=new h(["mg-c-form"]),this.setRequiredMessage=()=>{if(this.requiredMessageText=null,this.classCollection.delete(this.classAllRequired),"hide"===this.requiredMessage)return;if("default"===this.requiredMessage)return void(this.requiredMessageText=this.messages.form.required);const i=i=>!(i.disabled||i.readonly),t=i=>"MG-INPUT-TOGGLE"===i.nodeName;if(!this.disabled&&!this.readonly&&this.mgInputs.some((e=>i(e)&&!t(e)))){const e=this.mgInputs.filter(i),s=e.filter((i=>!t(i)&&i.required));[s.length,e.length].every((i=>1===i))||s.length>1&&s.length===e.filter((i=>!t(i))).length?(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"allRequiredSingle","allRequired"),this.classCollection.add(this.classAllRequired)):s.length>0&&(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"requiredSingle","required"))}},this.getRequiredMessageBasedOnCount=(i,t,e)=>this.messages.form[1===i.length?t:e],this.checkValidity=()=>{this.setRequiredMessage(),this.valid=!this.mgInputs.some((i=>i.invalid)),this.invalid=!this.valid,this.formValid.emit(this.valid)},this.handleFormSubmit=i=>{i.preventDefault(),this.formSubmit.emit()},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((i=>{this.labelOnTop&&(i.labelOnTop=!0),"MG-INPUT-FILE"===i.nodeName&&(this.readonly?i.setAttribute("hidden",""):i.removeAttribute("hidden")),this.readonly&&!d(i)?i.readonly=!0:this.disabled?i.disabled=!0:i.addEventListener("input-valid",this.checkValidity)}))}}watchIdentifier(i){o(i)||console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${n(i)}.`)}validateRequiredMessage(i){if(i&&!c.includes(i))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${c.join(", ")}. Passed value: ${n(i)}.`)}validateAriaRole(i){if(i&&!m.includes(i))throw Error(`<mg-form> prop "ariaRole" must be one of: ${m.join(", ")}. Passed value: ${n(i)}.`)}handlelabelOnTop(i){i?this.classCollection.add(this.classLabelOnTop):this.classCollection.delete(this.classLabelOnTop)}handleAttributeChange(){this.setMgInputs(),this.setRequiredMessage()}async displayError(){this.readonly||([...Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-FIELDSET"))),...this.mgInputs].forEach((i=>{var t;null===(t=i.displayError)||void 0===t||t.call(i)})),this.checkValidity())}async reset(){this.readonly||(await Promise.all(this.mgInputs.map((async i=>{void 0!==i.reset&&await i.reset()}))),this.checkValidity(),this.formReset.emit(!0))}componentWillLoad(){this.messages=l(this.element).messages,this.watchIdentifier(this.identifier),this.validateAriaRole(this.ariaRole),this.validateRequiredMessage(this.requiredMessage),this.handlelabelOnTop(this.labelOnTop),this.mgButtons=Array.from(this.element.querySelectorAll("mg-button")),this.mgButtons.forEach((i=>{i.setAttribute("form",this.identifier),"reset"===i.type&&i.addEventListener("click",(()=>{this.reset()}))})),this.setMgInputs(),Promise.all(this.mgInputs.map((async i=>{try{await i.componentOnReady()}catch(i){}}))).then((()=>{this.checkValidity()}))}componentDidLoad(){const i={childList:!0,subtree:!0};new MutationObserver((t=>{t.some((t=>Object.keys(i).includes(t.type)))&&(this.setMgInputs(),this.checkValidity())})).observe(this.element,i)}render(){return r("form",{key:"b2e3d218d978f1194b2c461ab75cae7d491bc2c3",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&r("p",{key:"dd6db1a740f5fe525c3b652c2128aba6185970b8",innerHTML:this.requiredMessageText}),r("slot",{key:"5221d0c8fa5e30749c82d01490b402d9e46a63cd"}),!this.readonly&&!this.disabled&&r("slot",{key:"fb2595b8c5df85b9cefac0f43e54e463d529fff4",name:"actions"}))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}static get style(){return".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}"}},[257,"mg-form",{identifier:[1],name:[1],readonly:[4],requiredMessage:[1,"required-message"],ariaRole:[1,"aria-role"],labelOnTop:[4,"label-on-top"],disabled:[4],valid:[1028],invalid:[1028],classCollection:[32],requiredMessageText:[32],displayError:[64],reset:[64]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-form"].forEach((t=>{"mg-form"===t&&(customElements.get(i(t))||customElements.define(i(t),f))}))}u();const g=f,b=u;export{g as MgForm,b as defineCustomElement}

package/dist/components/mg-icon.js

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