@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"mg-form.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -1,92 +1,92 @@
 import { h } from "@stencil/core";
 import { isTagName } from "../../../utils/components.utils";
 export class MgIllustratedMessage {
-  constructor() {
-    this.size = 'regular';
-    this.direction = 'vertical';
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-    if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
-      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
+    constructor() {
+        this.size = 'regular';
+        this.direction = 'vertical';
     }
-    else if (slottedIllustrations.length !== 1) {
-      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentDidLoad() {
+        const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+        const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
+        if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
+            throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
+        }
+        else if (slottedIllustrations.length !== 1) {
+            throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
+        }
+        slottedIllustrations[0].setAttribute('aria-hidden', 'true');
     }
-    slottedIllustrations[0].setAttribute('aria-hidden', 'true');
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("div", { class: {
-        'mg-c-illustrated-message': true,
-        'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-      } }, h("div", { class: {
-        'mg-c-illustrated-message__illustration': true,
-        'mg-c-illustrated-message__illustration--small': this.size === 'small',
-      } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
-  }
-  static get is() { return "mg-illustrated-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'regular' | 'small'",
-          "resolved": "\"regular\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define illustration size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'regular'"
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'vertical' | 'horizontal'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define component orientation"
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { class: {
+                'mg-c-illustrated-message': true,
+                'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
+            } }, h("div", { class: {
+                'mg-c-illustrated-message__illustration': true,
+                'mg-c-illustrated-message__illustration--small': this.size === 'small',
+            } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
+    }
+    static get is() { return "mg-illustrated-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'small'",
+                    "resolved": "\"regular\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define illustration size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component orientation"
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=mg-illustrated-message.js.map

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-illustrated-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAO5D,MAAM,OAAO,oBAAoB;;gBAaK,SAAS;qBAKE,UAAU;;EAEzD;;iBAEe;EAEf;;KAEG;EACH,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAEpF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;MACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACxG;SAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAC9F;IAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;EAC9D,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,0BAA0B,EAAE,IAAI;QAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;OACxE;MAED,WACE,KAAK,EAAE;UACL,wCAAwC,EAAE,IAAI;UAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACvE;QAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;MACN,WAAK,KAAK,EAAC,iCAAiC;QAC1C,WAAK,KAAK,EAAC,iCAAiC;UAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;QACN,WAAK,KAAK,EAAC,mCAAmC;UAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-illustrated-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n  shadow: true,\n})\nexport class MgIllustratedMessage {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgIllustratedMessageElement;\n\n  /**\n   * Define illustration size\n   */\n  @Prop() size: 'regular' | 'small' = 'regular';\n\n  /**\n   * Define component orientation\n   */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n    const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n    if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    } else if (slottedIllustrations.length !== 1) {\n      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n    }\n\n    slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-illustrated-message': true,\n          'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n        }}\n      >\n        <div\n          class={{\n            'mg-c-illustrated-message__illustration': true,\n            'mg-c-illustrated-message__illustration--small': this.size === 'small',\n          }}\n        >\n          <slot name=\"illustration\"></slot>\n        </div>\n        <div class=\"mg-c-illustrated-message__slots\">\n          <div class=\"mg-c-illustrated-message__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <div class=\"mg-c-illustrated-message__details\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-illustrated-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAO5D,MAAM,OAAO,oBAAoB;;oBAaK,SAAS;yBAKE,UAAU;;IAEzD;;mBAEe;IAEf;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACxG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,WACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE;YAED,WACE,KAAK,EAAE;oBACL,wCAAwC,EAAE,IAAI;oBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;iBACvE;gBAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;YACN,WAAK,KAAK,EAAC,iCAAiC;gBAC1C,WAAK,KAAK,EAAC,iCAAiC;oBAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,WAAK,KAAK,EAAC,mCAAmC;oBAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-illustrated-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n  shadow: true,\n})\nexport class MgIllustratedMessage {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgIllustratedMessageElement;\n\n  /**\n   * Define illustration size\n   */\n  @Prop() size: 'regular' | 'small' = 'regular';\n\n  /**\n   * Define component orientation\n   */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n    const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n    if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    } else if (slottedIllustrations.length !== 1) {\n      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n    }\n\n    slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-illustrated-message': true,\n          'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n        }}\n      >\n        <div\n          class={{\n            'mg-c-illustrated-message__illustration': true,\n            'mg-c-illustrated-message__illustration--small': this.size === 'small',\n          }}\n        >\n          <slot name=\"illustration\"></slot>\n        </div>\n        <div class=\"mg-c-illustrated-message__slots\">\n          <div class=\"mg-c-illustrated-message__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <div class=\"mg-c-illustrated-message__details\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}