@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1 +1 @@
-{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,+oCAA+oC;;MCQvpCA,WAAS;;;;;;;;;IAmDZ,iBAAY,GAAG;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;KACnC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;GACF;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;EAqBD,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;;;;;EAMD,MAAM;IACJ,QACE,eAAS,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,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,sBAAsB,IAChC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,YAAM,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,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"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 '../../../utils/components.utils';\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<boolean>;\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,+oCAA+oC;;MCQvpCA,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,CAAC,aAAa,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,eAAS,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,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,sBAAsB,IAChC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,YAAM,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,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"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 '../../../utils/components.utils';\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}

package/dist/components/mg-divider.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgDivider extends Components.MgDivider, HTMLElement {}
 export const MgDivider: {
-  prototype: MgDivider;
-  new (): MgDivider;
+    prototype: MgDivider;
+    new (): MgDivider;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-divider.js

@@ -3,38 +3,38 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 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 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", { class: {
-        'mg-c-divider': true,
-        'mg-c-divider--full': this.size === 'full',
-      } }));
-  }
-  static get style() { return mgDividerCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 'regular';
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { class: {
+                'mg-c-divider': true,
+                'mg-c-divider--full': this.size === 'full',
+            } }));
+    }
+    static get style() { return mgDividerCss; }
 }, [1, "mg-divider", {
-    "size": [1]
-  }]);
+        "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;
-  } });
+    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();
 

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

@@ -1 +1 @@
-{"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8MAA8M;;MCOtNA,WAAS;;;;;gBAQe,SAAS;;;;;;EAM5C,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OAC3C,GACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","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":";;AAAA,MAAM,YAAY,GAAG,8MAA8M;;MCOtNA,WAAS;;;;;oBAQe,SAAS;;;;;;IAM5C,MAAM;QACJ,QACE,WACE,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}

package/dist/components/mg-form.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgForm extends Components.MgForm, HTMLElement {}
 export const MgForm: {
-  prototype: MgForm;
-  new (): MgForm;
+    prototype: MgForm;
+    new (): MgForm;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-form.js

@@ -5,197 +5,189 @@ import { i as initLocales } from './index2.js';
 const mgFormCss = ".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form>p{font-size:1.2rem}";
 
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.formValid = createEvent(this, "form-valid", 7);
-    this.formSubmit = createEvent(this, "form-submit", 7);
-    // Classes
-    this.classAllRequired = 'mg-c-form--all-required';
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.formValid = createEvent(this, "form-valid", 7);
+        this.formSubmit = createEvent(this, "form-submit", 7);
+        // Classes
+        this.classAllRequired = 'mg-c-form--all-required';
+        /**
+         * Define required message based on mg-inputs required elements
+         */
+        this.setRequiredMessage = () => {
+            // init required message
+            this.requiredMessage = null;
+            this.classCollection.delete(this.classAllRequired);
+            // 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.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
+                    this.classCollection.add(this.classAllRequired);
+                }
+                // Some fields are required
+                else if (requiredInputs.length > 0) {
+                    this.requiredMessage = 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.readonly)
+                    input.readonly = true;
+                else if (this.disabled)
+                    input.disabled = true;
+                else
+                    input.addEventListener('input-valid', this.checkValidity);
+            });
+        };
+        this.identifier = createID('mg-form');
+        this.name = this.identifier;
+        this.readonly = false;
+        this.disabled = false;
+        this.valid = undefined;
+        this.invalid = undefined;
+        this.classCollection = new ClassList(['mg-c-form']);
+        this.requiredMessage = undefined;
+    }
+    handleAttributeChange() {
+        this.setMgInputs();
+        this.setRequiredMessage();
+    }
     /**
-     * Define required message based on mg-inputs required elements
+     * Display input error if it exists.
      */
-    this.setRequiredMessage = () => {
-      // init required message
-      this.requiredMessage = null;
-      this.classCollection.delete(this.classAllRequired);
-      // 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.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
-          this.classCollection.add(this.classAllRequired);
-        }
-        // Some fields are required
-        else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
+    async displayError() {
+        if (!this.readonly) {
+            this.mgInputs.forEach(input => {
+                var _a;
+                (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
+            });
+            this.checkValidity();
         }
-      }
-    };
-    /**
-     * 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];
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Check if form is valid
+     * Check if component props are well configured on init
      */
-    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);
-    };
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // 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);
+        });
+        // Set mgInputs
+        this.setMgInputs();
+        // Define required message
+        this.setRequiredMessage();
+        // 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(() => {
+            this.checkValidity();
+        });
+    }
     /**
-     * Handle Form Submit
-     * @param event - submit event
+     * Add slot listeners
      */
-    this.handleFormSubmit = (event) => {
-      event.preventDefault();
-      this.formSubmit.emit();
-    };
+    componentDidLoad() {
+        // Update mgInputs when mgForm content change
+        new MutationObserver(() => {
+            this.setMgInputs();
+        }).observe(this.element, { childList: true });
+    }
     /**
-     * Set mgInputs
+     * Render
+     * @returns HTML Element
      */
-    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);
-      });
-    };
-    this.identifier = createID('mg-form');
-    this.name = this.identifier;
-    this.readonly = false;
-    this.disabled = false;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-c-form']);
-    this.requiredMessage = undefined;
-  }
-  handleAttributeChange() {
-    this.setMgInputs();
-    this.setRequiredMessage();
-  }
-  /**
-   * Display input error if it exists.
-   */
-  async displayError() {
-    if (!this.readonly) {
-      this.mgInputs.forEach(input => {
-        var _a;
-        (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
-      });
-      this.checkValidity();
+    render() {
+        return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // 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);
-    });
-    // Set mgInputs
-    this.setMgInputs();
-    // Define required message
-    this.setRequiredMessage();
-    // 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(() => {
-      this.checkValidity();
-    });
-  }
-  /**
-   * Add slot listeners
-   */
-  componentDidLoad() {
-    this.mgButtons.forEach(mgButton => {
-      // submit buttons should trigger form submition;
-      if (['submit', null].includes(mgButton.getAttribute('type'))) {
-        mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
-        });
-      }
-    });
-    // Update mgInputs when mgForm content change
-    new MutationObserver(() => {
-      this.setMgInputs();
-    }).observe(this.element, { childList: true });
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "readonly": ["handleAttributeChange"],
-    "disabled": ["handleAttributeChange"]
-  }; }
-  static get style() { return mgFormCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "readonly": ["handleAttributeChange"],
+        "disabled": ["handleAttributeChange"]
+    }; }
+    static get style() { return mgFormCss; }
 }, [1, "mg-form", {
-    "identifier": [1],
-    "name": [1],
-    "readonly": [4],
-    "disabled": [4],
-    "valid": [1028],
-    "invalid": [1028],
-    "classCollection": [32],
-    "requiredMessage": [32],
-    "displayError": [64]
-  }, undefined, {
-    "readonly": ["handleAttributeChange"],
-    "disabled": ["handleAttributeChange"]
-  }]);
+        "identifier": [1],
+        "name": [1],
+        "readonly": [4],
+        "disabled": [4],
+        "valid": [1028],
+        "invalid": [1028],
+        "classCollection": [32],
+        "requiredMessage": [32],
+        "displayError": [64]
+    }, undefined, {
+        "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;
-  } });
+    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();
 

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

@@ -1 +1 @@
-{"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem;--mg-inputs-shrink: 0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.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 '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\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[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\n\n  // HTML selector\n  private form: HTMLFormElement;\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 if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\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() requiredMessage: 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<boolean>;\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.requiredMessage = null;\n    this.classCollection.delete(this.classAllRequired);\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.requiredMessage = 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.requiredMessage = 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[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.readonly) input.readonly = true;\n      else if (this.disabled) input.disabled = true;\n      else input.addEventListener('input-valid', this.checkValidity);\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    // 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    // Define required message\n    this.setRequiredMessage();\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      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    this.mgButtons.forEach(mgButton => {\n      // submit buttons should trigger form submition;\n      if (['submit', null].includes(mgButton.getAttribute('type'))) {\n        mgButton.addEventListener('click', () => {\n          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\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} ref={(el: HTMLFormElement) => (this.form = el)} onSubmit={this.handleFormSubmit}>\n        {this.requiredMessage && <p innerHTML={this.requiredMessage}></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":";;;;AAAA,MAAM,SAAS,GAAG,4TAA4T;;MCUjUA,QAAM;;;;;;;;QASA,qBAAgB,GAAG,yBAAyB,CAAC;;;;QAyFtD,uBAAkB,GAAG;;YAE3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;;;YAGnD,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,eAAe,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC;oBAC/G,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;iBACjD;;qBAEI,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;oBAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;iBAC1G;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,CAA0B,CAAC;;;YAGtJ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;gBACzB,IAAI,IAAI,CAAC,QAAQ;oBAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;qBACpC,IAAI,IAAI,CAAC,QAAQ;oBAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;;oBACzC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;aAChE,CAAC,CAAC;SACJ,CAAC;0BAjJ2B,QAAQ,CAAC,SAAS,CAAC;oBAMzB,IAAI,CAAC,UAAU;wBAKnB,KAAK;wBAKL,KAAK;;;+BAqBc,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;;IAlBlE,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;;;;;;;IAwFD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;QAGnD,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,IAAI,CAAC,kBAAkB,EAAE,CAAC;;QAG1B,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;YACL,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,YAAM,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,IAC5G,IAAI,CAAC,eAAe,IAAI,SAAG,SAAS,EAAE,IAAI,CAAC,eAAe,GAAM,EACjE,eAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC5D,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgForm"],"sources":["../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem;--mg-inputs-shrink: 0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.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 '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\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[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\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 if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\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() requiredMessage: 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.requiredMessage = null;\n    this.classCollection.delete(this.classAllRequired);\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.requiredMessage = 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.requiredMessage = 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[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.readonly) input.readonly = true;\n      else if (this.disabled) input.disabled = true;\n      else input.addEventListener('input-valid', this.checkValidity);\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    // 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    // Define required message\n    this.setRequiredMessage();\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      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}>\n        {this.requiredMessage && <p innerHTML={this.requiredMessage}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-icon.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgIcon extends Components.MgIcon, HTMLElement {}
 export const MgIcon: {
-  prototype: MgIcon;
-  new (): MgIcon;
+    prototype: MgIcon;
+    new (): MgIcon;
 };
 /**
  * Used to define this component and all nested components recursively.