@mgdis/mg-components 5.28.2 → 6.0.0

package/dist/components/mg-card2.js

@@ -1,16 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { I as Ie } from './index.es.js';
 
-/**
- * List available variants
- */
-const variants = ['info', 'warning', 'success', 'danger', 'app'];
-/**
- * List available variant styles
- */
-const variantStyles = ['bar-left', 'fill'];
-
-const mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
 const MgCardStyle0 = mgCardCss;
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
@@ -18,74 +8,19 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
         super();
         this.__registerHost();
         this.__attachShadow();
-        /*************
-         * Private *
-         *************/
-        this.name = 'mg-card';
-        this.classBase = 'mg-c-card';
-        /**
-         * Method to set default varianStyle props
-         * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-         */
-        this.setDefaultVariantStyle = () => {
-            if (this.variantStyle === undefined)
-                this.variantStyle = 'bar-left';
-        };
-        this.variant = undefined;
-        this.variantStyle = undefined;
-        this.classCollection = new Ie([this.classBase]);
-    }
-    validateVariant(newValue, oldValue) {
-        if (newValue && !variants.includes(newValue))
-            throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
-        if (newValue) {
-            this.setDefaultVariantStyle();
-            this.classCollection.add(`${this.classBase}--${newValue}`);
-        }
-        if (oldValue)
-            this.classCollection.delete(`${this.classBase}--${oldValue}`);
-    }
-    validateVariantStyle(newValue, oldValue) {
-        if (newValue && !variantStyles.includes(newValue))
-            throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
-        else if (Boolean(newValue) && !variants.includes(this.variant))
-            throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
-        if (newValue)
-            this.classCollection.add(`${this.classBase}--${newValue}`);
-        if (oldValue)
-            this.classCollection.delete(`${this.classBase}--${oldValue}`);
     }
     /*************
      * Lifecycle *
      *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateVariant(this.variant);
-        this.validateVariantStyle(this.variantStyle);
-    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        var _a;
-        return (h("div", { key: 'b786a9ff3b706dcb24f6b3218feef97e284e2b9a', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { key: '11a3b421c49864667832919e6d2cbe9ea19f9344', class: "mg-c-card__bar" }), h("slot", { key: '7421932644500c619d34cbe003a0f0bb50b612a7' })));
+        return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
     }
-    static get watchers() { return {
-        "variant": ["validateVariant"],
-        "variantStyle": ["validateVariantStyle"]
-    }; }
     static get style() { return MgCardStyle0; }
-}, [1, "mg-card", {
-        "variant": [1],
-        "variantStyle": [1025, "variant-style"],
-        "classCollection": [32]
-    }, undefined, {
-        "variant": ["validateVariant"],
-        "variantStyle": ["validateVariantStyle"]
-    }]);
+}, [1, "mg-card"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,ylFAAylF,CAAC;AAC5mF,qBAAe,SAAS;;MCWX,MAAM;;;;;;;;QAKA,SAAI,GAAG,SAAS,CAAC;QACjB,cAAS,GAAG,WAAW,CAAC;;;;;QA0CjC,2BAAsB,GAAG;YAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;SACrE,CAAC;;;+BARoC,IAAIA,EAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;IAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;QACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;QAC5H,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;SAC5D;QACD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC7E;IAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;QACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;aACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QACxH,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QACzE,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC7E;;;;;;;IAsBD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9C;;;;;IAMD,MAAM;;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,6DAAM,KAAK,EAAC,gBAAgB,GAAQ,EAC9E,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ClassList"],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n",".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '@mgdis/stencil-helpers';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n/**\n * @slot - Card content\n */\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Private *\n   *************/\n\n  private readonly name = 'mg-card';\n  private readonly classBase = 'mg-c-card';\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define variant prop\n   */\n  @Prop() variant: undefined | VariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n    if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n    if (newValue) {\n      this.setDefaultVariantStyle();\n      this.classCollection.add(`${this.classBase}--${newValue}`);\n    }\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Define variantStyle prop\n   */\n  @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n    if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n    else if (Boolean(newValue) && !variants.includes(this.variant))\n      throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n    if (newValue) this.classCollection.add(`${this.classBase}--${newValue}`);\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.classBase]);\n\n  /**\n   * Method to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        {this.variantStyle?.startsWith('bar-') && <span class=\"mg-c-card__bar\"></span>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-card2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,guFAAguF,CAAC;AACnvF,qBAAe,SAAS;;MCSX,MAAM;;;;;;;;;;;;;IASjB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot - Card content\n */\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-card\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-character-left2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
+import { Z as Ze } from './index.es.js';
 
-const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
+const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{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}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
 const MgCharacterLeftStyle0 = mgCharacterLeftCss;
 
 const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
@@ -14,7 +15,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error('<mg-character-left> prop "maxlength" is required.');
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ze(newValue)}.`);
         }
     }
     /*************
@@ -32,7 +33,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: 'd67db2514f27a2c0de9c187036f8f7e192761ce2', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'e0622c110944075e1d659347965b20a9bfb5ebac', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '82a7deaf6f6f2ad32a8d2cfe57787b2b7a20fd4b', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '8702ae39ff70f27de2ffc6988f13836a4b43f169', id: this.identifier, "aria-live": "polite" }, h("span", { key: '0e75b76afb2cf700fa5fff1d565b4236c3d664a1', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'f4c4a7b46c0d0879d7ee046f2ea33a686cd91adb', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-character-left2.js.map

@@ -1 +1 @@
-{"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD,CAAC;AACnF,8BAAe,kBAAkB;;MCOpB,eAAe;;;;;0BAyBL,EAAE;;;IAOvB,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;SACtE;KACF;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,4EAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-character-left2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,0iBAA0iB,CAAC;AACtkB,8BAAe,kBAAkB;;MCWpB,eAAe;;;;;0BAyBL,EAAE;;;IAOvB,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,wFAAwFA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAChI;KACF;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,4EAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["toString"],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/internals/mg-character-left/mg-character-left.tsx"],"sourcesContent":[".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-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../../locales';\nimport { toString } from '@mgdis/stencil-helpers';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error(`<mg-character-left> prop \"maxlength\" is required and must be a number. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-details.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Ze } from './index.es.js';
+import { Q as Qe } from './index.es.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".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-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{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}}";
+const mgDetailsCss = ".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-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:var(--mg-b-size-16);gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{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}}";
 const MgDetailsStyle0 = mgDetailsCss;
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
@@ -23,8 +23,8 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!Ze(newValue)) {
-            throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
+        if (!Qe(newValue)) {
+            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
         }
     }
     handleExpanded(newValue) {
@@ -45,7 +45,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '9c629e03b5286afb8b9139aa4e182f10a1005c81', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'a525137281cb20fe8b74db56fe0e6f4f59427e4d' }, h("slot", { key: '7fb96692cfa339e904894bbddffd2211ff7741b5', name: "summary" }), h("span", { key: 'b322eb9e02173a24bcff738d6f1333ce6ab68912', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'fd952a2abf6b689360faa0ef5219eb400b1a6f61', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '10b0a8a350f857296ae5600de5f68a9b528a3739', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'e54fe3d881a04ccbb3d394b0492f6ab906eac1f8', class: "mg-c-details__details" }, h("slot", { key: 'ae05e78c61d9fa8e1d90aa58ac7d6ce8862128ff', name: "details" }))));
+        return (h("details", { key: 'd9bd05ca12f405dd25dda244ec0260691d340223', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2b7893cc0c54d94981d6500776eb22723e1fb5f2' }, h("slot", { key: '714054624ffc1b6b7261edd166bfd16a256e06ce', name: "summary" }), h("span", { key: 'a257d98ed1e8243eae76d259b09bf7fabbfa66e0', class: "mg-c-details__toggle" }, h("mg-icon", { key: '3ebf16455d25acb3806d4c68e4a2947954f8ff87', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'bc0760888996b7cdf92efe7d7db9efc80acc5d61', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '9a8974cc18e8d9d0f7a26d9ddd168e4c2ca08bcb', class: "mg-c-details__details" }, h("slot", { key: 'daed5ab23c0394f3342fb7f15e9a631840a19a75', name: "details" }))));
     }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],

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

@@ -1 +1 @@
-{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,+oCAA+oC,CAAC;AACrqC,wBAAe,YAAY;;MCWdA,WAAS;;;;;;;;;QAmDZ,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;SACnC,CAAC;;;2BArBoB,KAAK;wBAKS,KAAK;;IAdzC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;SACzF;KACF;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;IAqBD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACxC;;;;;IAMD,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,IAClI,kEACE,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,6DAAM,KAAK,EAAC,sBAAsB,IAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".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-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-details-spacing)}@media(width < 43.75rem){.mg-c-details__toggle>span{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}}/*# sourceMappingURL=mg-details.css.map */\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,wzCAAwzC,CAAC;AAC90C,wBAAe,YAAY;;MCWdA,WAAS;;;;;;;;;QAqDZ,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;SACnC,CAAC;;;2BArBoB,KAAK;wBAKS,KAAK;;IAhBzC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CACb,4HAA4H,IAAI,CAAC,YAAY,yBAAyB,IAAI,CAAC,YAAY,KAAK,CAC7L,CAAC;SACH;KACF;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;IAqBD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACxC;;;;;IAMD,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,IAClI,kEACE,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,6DAAM,KAAK,EAAC,sBAAsB,IAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".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-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:var(--mg-b-size-16);gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media(width < 43.75rem){.mg-c-details__toggle>span{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}}/*# sourceMappingURL=mg-details.css.map */\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error(\n        `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-divider.js

@@ -1,43 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const mgDividerCss = ".mg-c-divider{width:12rem;height:var(--mg-divider-thickness);margin:var(--mg-divider-vertical-spacing) auto;background-color:var(--mg-divider-background-color)}.mg-c-divider.mg-c-divider--full{width:100%}";
-const MgDividerStyle0 = mgDividerCss;
-
-const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.size = 'regular';
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: '92413bf42dc057ea1dfd645b4d619a7f180e5aca', class: {
-                'mg-c-divider': true,
-                'mg-c-divider--full': this.size === 'full',
-            } }));
-    }
-    static get style() { return MgDividerStyle0; }
-}, [1, "mg-divider", {
-        "size": [1]
-    }]);
-function defineCustomElement$1() {
-    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$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { M as MgDivider$1, d as defineCustomElement$1 } from './mg-divider2.js';
 
 const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8MAA8M,CAAC;AACpO,wBAAe,YAAY;;MCMdA,WAAS;;;;;oBAQe,SAAS;;;;;;IAM5C,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;aAC3C,GACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDivider"],"sources":["../styles/dist/components/mg-divider.css?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":[".mg-c-divider{width:12rem;height:var(--mg-divider-thickness);margin:var(--mg-divider-vertical-spacing) auto;background-color:var(--mg-divider-background-color)}.mg-c-divider.mg-c-divider--full{width:100%}/*# sourceMappingURL=mg-divider.css.map */\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() size: 'regular' | 'full' = 'regular';\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full': this.size === 'full',\n        }}\n      ></div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-divider.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-divider2.js

@@ -0,0 +1,44 @@
+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 MgDividerStyle0 = mgDividerCss;
+
+const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.fullWidth = false;
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
+                'mg-c-divider': true,
+                'mg-c-divider--full-width': this.fullWidth,
+            } }));
+    }
+    static get style() { return MgDividerStyle0; }
+}, [1, "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 };
+
+//# sourceMappingURL=mg-divider2.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-divider2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ipBAAipB,CAAC;AACvqB,wBAAe,YAAY;;MCMd,SAAS;;;;;yBAQA,KAAK;;;;;;IAMzB,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-divider.css?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":["/*!\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%}/*# sourceMappingURL=mg-divider.css.map */\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full-width': this.fullWidth,\n        }}\n      ></div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-form.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { z as ze, I as Ie } from './index.es.js';
+import { z as ze, I as Ie, Z as Ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 
 /**
@@ -11,7 +11,7 @@ const roles = ['form', 'search', 'none', 'presentation'];
  */
 const requiredMessageStatus = ['default', 'hide'];
 
-const mgFormCss = ".mg-u-form-legacy{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 23rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-inputs-margin-bottom:2.5rem}.mg-c-form>p{font-size:1.2rem}";
+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 MgFormStyle0 = mgFormCss;
 
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
@@ -123,12 +123,12 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -200,7 +200,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '498fe7564261b0aad99bab2686a6f0f4624785cc', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'd0d0f1f6373eff660de65104afb3ba40835a58e3', innerHTML: this.requiredMessageText }), h("slot", { key: '9e98e1b0fda2a8b69f8efb8bacccb6cd1173ba4f' }), !this.readonly && !this.disabled && h("slot", { key: '083f5490c17548defa713bb697b731b02fad9198', name: "actions" })));
+        return (h("form", { key: '6c3071735d3ec06f215600c682455a8927f19cab', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'e8914a58d0b9c10d3510fe8f3001b3f84afbd732', innerHTML: this.requiredMessageText }), h("slot", { key: 'abf559e3999042712b7fa5cbe1c9d8143cd21e70' }), !this.readonly && !this.disabled && h("slot", { key: '0a83d6babfa0252a1ffed634737ce012d8304f2d', name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"mg-form.js","mappings":";;;;AAAA;;;AAGO,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,CAAU,CAAC;AAOzE;;;AAGO,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,MAAM,CAAU;;ACbjE,MAAM,SAAS,GAAG,gbAAgb,CAAC;AACnc,qBAAe,SAAS;;MCcXA,QAAM;;;;;;;;QASA,qBAAgB,GAAG,yBAAyB,CAAC;QAC7C,oBAAe,GAAG,yBAAyB,CAAC;;;;QAkIrD,uBAAkB,GAAG;;YAE3B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAEnD,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM;gBAAE,OAAO;iBACvC,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE;gBAC3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACvD,OAAO;aACR;;;YAID,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;YAChE,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,iBAAiB,CAAC;YACtE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE;;gBAEjH,MAAM,cAAc,GAA0B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;;;gBAG/E,MAAM,cAAc,GAA0B,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;;gBAExH,IACE,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,KAAK,CAAC,CAAC;qBAC3E,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EACvH;oBACA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC;oBACnH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;iBACjD;;qBAEI,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;oBAClC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;iBAC9G;aACF;SACF,CAAC;;;;;;;;QASM,mCAA8B,GAAG,CAAC,cAAqC,EAAE,SAAiB,EAAE,SAAiB,KACnH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC;;;;QAKlE,kBAAa,GAAG;;YAEtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;YACzD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;YAE3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC,CAAC;;;;;QAMM,qBAAgB,GAAG,CAAC,KAAkB;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;;;;QAKM,gBAAW,GAAG;;YAEpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAU,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAoD,CAAC;;;YAGhL,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;gBACzB,IAAI,IAAI,CAAC,UAAU,EAAE;oBACnB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;iBACzB;gBACD,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACvB;qBAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACxB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACvB;qBAAM;oBACL,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;iBAC3D;aACF,CAAC,CAAC;SACJ,CAAC;0BAxM2BC,EAAQ,CAAC,SAAS,CAAC;oBAMzB,IAAI,CAAC,UAAU;wBAKnB,KAAK;;;;wBA6CL,KAAK;;;+BAsBc,IAAIC,EAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;;IAvDlE,uBAAuB,CAAC,QAAQ;QAC9B,IAAI,QAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACzD,MAAM,IAAI,KAAK,CAAC,oDAAoD,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1G;KACF;IAQD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACzC,MAAM,IAAI,KAAK,CAAC,6CAA6C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACnF;KACF;IAOD,gBAAgB,CAAC,QAA8B;QAC7C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAChD;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACnD;KACF;IAQD,qBAAqB;QACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;;;;IAqCD,MAAM,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;;gBACzB,MAAA,KAAK,CAAC,YAAY,qDAAI,CAAC;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;;;IAsGD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;QAGvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;;QAGxE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC7B,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAChD,CAAC,CAAC;;QAGH,IAAI,CAAC,WAAW,EAAE,CAAC;;QAGnB,OAAO,CAAC,GAAG,CACT,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAM,KAAK;YAC3B,IAAI;gBACF,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;aAChC;YAAC,WAAM,GAAE;SACX,CAAC,CACH,CAAC,IAAI,CAAC;;YAEL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC,CAAC;KACJ;;;;IAKD,gBAAgB;;QAEd,IAAI,gBAAgB,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/C;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IACjI,IAAI,CAAC,mBAAmB,IAAI,0DAAG,SAAS,EAAE,IAAI,CAAC,mBAAmB,GAAM,EACzE,8DAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC5D,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgForm","createID","ClassList"],"sources":["src/components/molecules/mg-form/mg-form.conf.ts","../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["/**\n * List of all possibles roles\n */\nexport const roles = ['form', 'search', 'none', 'presentation'] as const;\n\n/**\n * Aria Role type from roles\n */\nexport type AriaRoleType = (typeof roles)[number];\n\n/**\n * List of all possibles required message status\n */\nexport const requiredMessageStatus = ['default', 'hide'] as const;\n\n/**\n * RequiredMessageStatus type from requiredMessageStatus\n */\nexport type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];\n",".mg-u-form-legacy{--mg-form-inputs-title-width: calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 23rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.mg-c-form.mg-c-form--label-on-top{--mg-inputs-margin-bottom: 2.5rem}.mg-c-form>p{font-size:1.2rem}/*# sourceMappingURL=mg-form.css.map */\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/*\n * @slot - Form content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-form',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\n  private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-form');\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define when required message is display.\n   * When it is unset, component use it internal logic to manage \"required message\" help text display.\n   * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n   * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n   * As **this element is an accessibility requirement in the view**,\n   * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n   */\n  @Prop() requiredMessage?: RequiredMessageStatusType;\n  @Watch('requiredMessage')\n  validateRequiredMessage(newValue): void {\n    if (newValue && !requiredMessageStatus.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Define `<form/>` element aria role\n   * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n   */\n  @Prop() ariaRole?: AriaRoleType;\n  @Watch('ariaRole')\n  validateAriaRole(newValue: MgForm['ariaRole']) {\n    if (newValue && !roles.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Define if slotted mg-component's label are displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n  @Watch('labelOnTop')\n  handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n    if (newValue) {\n      this.classCollection.add(this.classLabelOnTop);\n    } else {\n      this.classCollection.delete(this.classLabelOnTop);\n    }\n  }\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('requiredMessage')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessageText: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError?.();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessageText = null;\n    this.classCollection.delete(this.classAllRequired);\n\n    if (this.requiredMessage === 'hide') return;\n    else if (this.requiredMessage === 'default') {\n      this.requiredMessageText = this.messages.form.required;\n      return;\n    }\n\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as (HTMLMgInputsElement & { disabled: boolean })[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.labelOnTop) {\n        input.labelOnTop = true;\n      }\n      if (this.readonly) {\n        input.readonly = true;\n      } else if (this.disabled) {\n        input.disabled = true;\n      } else {\n        input.addEventListener('input-valid', this.checkValidity);\n      }\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    this.validateAriaRole(this.ariaRole);\n    this.validateRequiredMessage(this.requiredMessage);\n    this.handlelabelOnTop(this.labelOnTop);\n\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      // Define required message and check validity\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    // Update mgInputs when mgForm content change\n    new MutationObserver(() => {\n      this.setMgInputs();\n    }).observe(this.element, { childList: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n        {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-form.js","mappings":"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","names":["MgForm","createID","ClassList","toString"],"sources":["src/components/molecules/mg-form/mg-form.conf.ts","../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["/**\n * List of all possibles roles\n */\nexport const roles = ['form', 'search', 'none', 'presentation'] as const;\n\n/**\n * Aria Role type from roles\n */\nexport type AriaRoleType = (typeof roles)[number];\n\n/**\n * List of all possibles required message status\n */\nexport const requiredMessageStatus = ['default', 'hide'] as const;\n\n/**\n * RequiredMessageStatus type from requiredMessageStatus\n */\nexport type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];\n",".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)}/*# sourceMappingURL=mg-form.css.map */\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList, toString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/**\n * @slot - Form content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-form',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\n  private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-form');\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define when required message is display.\n   * When it is unset, component use it internal logic to manage \"required message\" help text display.\n   * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n   * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n   * As **this element is an accessibility requirement in the view**,\n   * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n   */\n  @Prop() requiredMessage?: RequiredMessageStatusType;\n  @Watch('requiredMessage')\n  validateRequiredMessage(newValue): void {\n    if (newValue && !requiredMessageStatus.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define `<form/>` element aria role\n   * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n   */\n  @Prop() ariaRole?: AriaRoleType;\n  @Watch('ariaRole')\n  validateAriaRole(newValue: MgForm['ariaRole']) {\n    if (newValue && !roles.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if slotted mg-component's label are displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n  @Watch('labelOnTop')\n  handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n    if (newValue) {\n      this.classCollection.add(this.classLabelOnTop);\n    } else {\n      this.classCollection.delete(this.classLabelOnTop);\n    }\n  }\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('requiredMessage')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessageText: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError?.();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessageText = null;\n    this.classCollection.delete(this.classAllRequired);\n\n    if (this.requiredMessage === 'hide') return;\n    else if (this.requiredMessage === 'default') {\n      this.requiredMessageText = this.messages.form.required;\n      return;\n    }\n\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as (HTMLMgInputsElement & { disabled: boolean })[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.labelOnTop) {\n        input.labelOnTop = true;\n      }\n      if (this.readonly) {\n        input.readonly = true;\n      } else if (this.disabled) {\n        input.disabled = true;\n      } else {\n        input.addEventListener('input-valid', this.checkValidity);\n      }\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    this.validateAriaRole(this.ariaRole);\n    this.validateRequiredMessage(this.requiredMessage);\n    this.handlelabelOnTop(this.labelOnTop);\n\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      // Define required message and check validity\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    // Update mgInputs when mgForm content change\n    new MutationObserver(() => {\n      this.setMgInputs();\n    }).observe(this.element, { childList: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n        {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"],"version":3}