@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +1 @@
+{"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD;;MCQrE,eAAe;;;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;GACF;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAChH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-character-left/mg-character-left.scss?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left {\n  display: block;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: 'mg-character-left.scss',\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=\"sr-only\">{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

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
 
 const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle-icon.mg-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
 
-const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -43,7 +43,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],
@@ -56,6 +56,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "toggleOpened": [1, "toggle-opened"],
     "hideSummary": [4, "hide-summary"],
     "expanded": [1028]
+  }, undefined, {
+    "toggleClosed": ["validateTitles"],
+    "toggleOpened": ["validateTitles"],
+    "expanded": ["handleExpanded"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -81,3 +85,5 @@ const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDetails, defineCustomElement };
+
+//# sourceMappingURL=mg-details.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-details.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,orCAAorC;;MCO5rCA,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,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACpD,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,YAAY,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,IAChI,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,oBAAoB,IAC9B,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EAClJ,YAAM,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACvG,CACC,EACV,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"sources":["src/components/molecules/mg-details/mg-details.scss?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":["@import '../../../styles/a11y.scss';\n\n.mg-details {\n  summary {\n    display: flex;\n    align-items: baseline;\n    cursor: pointer;\n  }\n\n  &__toggle {\n    margin-left: 1.5rem;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: 0.6rem;\n    min-height: calc(var(--font-size) * var(--line-height));\n    &-icon.mg-details__toggle-icon--reverse {\n      transform: rotate(180deg);\n    }\n  }\n\n  &__details {\n    margin-top: var(--mg-details-spacing);\n  }\n}\n\n/* hide toggle button when < 700px */\n@media (width < 43.75rem) {\n  .mg-details__toggle > span {\n    @include sr-only();\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-details',\n  styleUrl: 'mg-details.scss',\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 (newValue === undefined || newValue.trim() === '') {\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-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-details__toggle\">\n            <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'sr-only': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-divider.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 const mgDividerCss = ".mg-divider{margin:var(--mg-divider-vertical-spacing) auto;width:12rem;height:var(--mg-divider-thickness);background-color:var(--mg-divider-background-color)}.mg-divider.mg-divider--full{width:100%}";
 
-const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,3 +42,5 @@ const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDivider, defineCustomElement };
+
+//# sourceMappingURL=mg-divider.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wMAAwM;;MCOhNA,WAAS;;;;;gBAQe,SAAS;;;;;;EAM5C,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OACzC,GACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDivider"],"sources":["src/components/atoms/mg-divider/mg-divider.scss?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":[".mg-divider {\n  margin: var(--mg-divider-vertical-spacing) auto;\n  width: 12rem;\n  height: var(--mg-divider-thickness);\n  background-color: var(--mg-divider-background-color);\n\n  &.mg-divider--full {\n    width: 100%;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: 'mg-divider.scss',\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-divider': true,\n          'mg-divider--full': this.size === 'full',\n        }}\n      ></div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-form.js

@@ -4,7 +4,7 @@ import { i as initLocales } from './index2.js';
 
 const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--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-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
 
-const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -33,15 +33,23 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         // 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.messages.form[requiredInputs.length === 1 ? 'allRequiredSingle' : 'allRequired'];
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'requiredSingle' : 'required'];
+          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
      */
@@ -153,7 +161,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @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" })));
+    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 {
@@ -171,6 +179,9 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "classCollection": [32],
     "requiredMessage": [32],
     "displayError": [64]
+  }, undefined, {
+    "readonly": ["handleAttributeChange"],
+    "disabled": ["handleAttributeChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -191,3 +202,5 @@ const MgForm = MgForm$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgForm, defineCustomElement };
+
+//# sourceMappingURL=mg-form.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["src/components/molecules/mg-form/mg-form.scss?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["@use '../../../styles/form.scss';\n\n.mg-form,\n.mg-form-group {\n  --mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);\n  --mg-inputs-margin-bottom: 1.5rem;\n  --mg-inputs-title-horizontal-space: 3rem;\n  --mg-inputs-shrink: 0;\n\n  &.mg-form--all-required {\n    --mg-input-title-display: none;\n  }\n\n  & > p {\n    font-size: 1.2rem;\n  }\n}\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: 'mg-form.scss',\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-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-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   * Public method to display errors\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError && 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}

package/dist/components/mg-icon.js

@@ -4,3 +4,5 @@ const MgIcon = MgIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgIcon, defineCustomElement };
+
+//# sourceMappingURL=mg-icon.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}