npm - @mgdis/mg-components - Versions diffs - 6.2.0 → 6.4.0 - Mend

@mgdis/mg-components 6.2.0 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (238) hide show

package/dist/collection/components/molecules/mg-form/mg-form.js CHANGED Viewed

@@ -11,6 +11,28 @@ export class MgForm {
         // Classes
         this.classAllRequired = 'mg-c-form--all-required';
         this.classLabelOnTop = 'mg-c-form--label-on-top';
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-form');
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if form is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if form is disabled
+         */
+        this.disabled = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -96,17 +118,6 @@ export class MgForm {
                 }
             });
         };
-        this.identifier = createID('mg-form');
-        this.name = this.identifier;
-        this.readonly = false;
-        this.requiredMessage = undefined;
-        this.ariaRole = undefined;
-        this.labelOnTop = undefined;
-        this.disabled = false;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new ClassList(['mg-c-form']);
-        this.requiredMessageText = undefined;
     }
     watchIdentifier(newValue) {
         if (!isValideID(newValue)) {
@@ -196,17 +207,20 @@ export class MgForm {
      */
     componentDidLoad() {
         // Update mgInputs when mgForm content change
-        new MutationObserver(() => {
-            this.setMgInputs();
-            this.checkValidity();
-        }).observe(this.element, { childList: true });
+        const observerOptions = { childList: true, subtree: true };
+        new MutationObserver((mutations) => {
+            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
+                this.setMgInputs();
+                this.checkValidity();
+            }
+        }).observe(this.element, observerOptions);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'ecfaff2bb897ce2c48ed352167bb418703a56c98', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4d4fa2ff3cf4f25ebe0b009ae1995734bfcafd3b', innerHTML: this.requiredMessageText }), h("slot", { key: 'dc0c7acadf6b744335852f847a8336b018e28cb5' }), !this.readonly && !this.disabled && h("slot", { key: 'ede3ace32f6a88067845013fa65e5414cae5fcea', name: "actions" })));
+        return (h("form", { key: 'e61304b43787fba050014fd223f82e36aa76a133', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4ff8cc35336c0943584b717c6c5717fb517b4301', innerHTML: this.requiredMessageText }), h("slot", { key: '214cbf3473b2bb00534b315e4faae164e07a14a4' }), !this.readonly && !this.disabled && h("slot", { key: 'db314dd5d606da7dc5fce4c8663f4064586b34be', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -236,6 +250,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-form')"
@@ -254,6 +270,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Input name\nIf not set the value equals the identifier"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.identifier"
@@ -272,6 +290,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define if form is readonly"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -296,6 +316,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required-message",
                 "reflect": false
             },
@@ -319,6 +341,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-role",
                 "reflect": false
             },
@@ -336,6 +360,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define if slotted mg-component's label are displayed on top"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-on-top",
                 "reflect": false
             },
@@ -353,6 +379,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define if form is disabled"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -371,6 +399,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define form valid state"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "valid",
                 "reflect": false
             },
@@ -388,6 +418,8 @@ export class MgForm {
                     "tags": [],
                     "text": "Define form invalid state"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false
             }

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

	@@ -1 +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, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/*\n @slot - Form content\n * @slot actions - Actions content\n /\n@Component({\n tag: 'mg-form',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n shadow: true,\n})\nexport class MgForm {\n /**********\n Internal \n *********/\n\n private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-c-form--all-required';\n private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-form');\n @Watch('identifier')\n watchIdentifier(newValue: MgForm['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-form> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define when required message is display.\n * When it is unset, component use it internal logic to manage \"required message\" help text display.\n * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n * As this element is an accessibility requirement in the view,\n * you MUST* re-implement this message on your own and display it when your form contains required inputs.\n /\n @Prop() requiredMessage?: RequiredMessageStatusType;\n @Watch('requiredMessage')\n validateRequiredMessage(newValue): void {\n if (newValue && !requiredMessageStatus.includes(newValue)) {\n throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define `<form/>` element aria role\n * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n /\n @Prop() ariaRole?: AriaRoleType;\n @Watch('ariaRole')\n validateAriaRole(newValue: MgForm['ariaRole']) {\n if (newValue && !roles.includes(newValue)) {\n throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if slotted mg-component's label are displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n if (newValue) {\n this.classCollection.add(this.classLabelOnTop);\n } else {\n this.classCollection.delete(this.classLabelOnTop);\n }\n }\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n @Watch('requiredMessage')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n /\n Required message\n /\n @State() requiredMessageText: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError?.();\n });\n this.checkValidity();\n }\n }\n\n /\n Reset form inputs values, validity and error state\n /\n @Method()\n async reset(): Promise<void> {\n if (!this.readonly) {\n await Promise.all(\n this.mgInputs.map(async input => {\n if (input.reset !== undefined) {\n await input.reset();\n }\n }),\n );\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessageText = null;\n this.classCollection.delete(this.classAllRequired);\n\n if (this.requiredMessage === 'hide') return;\n else if (this.requiredMessage === 'default') {\n this.requiredMessageText = this.messages.form.required;\n return;\n }\n\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT')) as (HTMLMgInputsElement & { disabled: boolean })[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.labelOnTop) {\n input.labelOnTop = true;\n }\n if (this.readonly) {\n input.readonly = true;\n } else if (this.disabled) {\n input.disabled = true;\n } else {\n input.addEventListener('input-valid', this.checkValidity);\n }\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n this.watchIdentifier(this.identifier);\n this.validateAriaRole(this.ariaRole);\n this.validateRequiredMessage(this.requiredMessage);\n this.handlelabelOnTop(this.labelOnTop);\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n // Define required message and check validity\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n // Update mgInputs when mgForm content change\n new MutationObserver(() => {\n this.setMgInputs();\n this.checkValidity();\n }).observe(this.element, { childList: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"]}
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, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/*\n @slot - Form content\n * @slot actions - Actions content\n /\n@Component({\n tag: 'mg-form',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n shadow: true,\n})\nexport class MgForm {\n /**********\n Internal \n *********/\n\n private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-c-form--all-required';\n private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-form');\n @Watch('identifier')\n watchIdentifier(newValue: MgForm['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-form> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define when required message is display.\n * When it is unset, component use it internal logic to manage \"required message\" help text display.\n * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n * As this element is an accessibility requirement in the view,\n * you MUST* re-implement this message on your own and display it when your form contains required inputs.\n /\n @Prop() requiredMessage?: RequiredMessageStatusType;\n @Watch('requiredMessage')\n validateRequiredMessage(newValue): void {\n if (newValue && !requiredMessageStatus.includes(newValue)) {\n throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define `<form/>` element aria role\n * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n /\n @Prop() ariaRole?: AriaRoleType;\n @Watch('ariaRole')\n validateAriaRole(newValue: MgForm['ariaRole']) {\n if (newValue && !roles.includes(newValue)) {\n throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if slotted mg-component's label are displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n if (newValue) {\n this.classCollection.add(this.classLabelOnTop);\n } else {\n this.classCollection.delete(this.classLabelOnTop);\n }\n }\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n @Watch('requiredMessage')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n /\n Required message\n /\n @State() requiredMessageText: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError?.();\n });\n this.checkValidity();\n }\n }\n\n /\n Reset form inputs values, validity and error state\n /\n @Method()\n async reset(): Promise<void> {\n if (!this.readonly) {\n await Promise.all(\n this.mgInputs.map(async input => {\n if (input.reset !== undefined) {\n await input.reset();\n }\n }),\n );\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessageText = null;\n this.classCollection.delete(this.classAllRequired);\n\n if (this.requiredMessage === 'hide') return;\n else if (this.requiredMessage === 'default') {\n this.requiredMessageText = this.messages.form.required;\n return;\n }\n\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT')) as (HTMLMgInputsElement & { disabled: boolean })[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.labelOnTop) {\n input.labelOnTop = true;\n }\n if (this.readonly) {\n input.readonly = true;\n } else if (this.disabled) {\n input.disabled = true;\n } else {\n input.addEventListener('input-valid', this.checkValidity);\n }\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n this.watchIdentifier(this.identifier);\n this.validateAriaRole(this.ariaRole);\n this.validateRequiredMessage(this.requiredMessage);\n this.handlelabelOnTop(this.labelOnTop);\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n // Define required message and check validity\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n // Update mgInputs when mgForm content change\n const observerOptions = { childList: true, subtree: true }\n new MutationObserver((mutations) => {\n if(mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {\n this.setMgInputs();\n this.checkValidity();\n }\n }).observe(this.element, observerOptions);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"]}

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

@@ -7,7 +7,13 @@ import { isTagName } from "@mgdis/stencil-helpers";
  */
 export class MgIllustratedMessage {
     constructor() {
+        /**
+         * Define illustration size
+         */
         this.size = 'medium';
+        /**
+         * Define component orientation
+         */
         this.direction = 'vertical';
     }
     /*************
@@ -32,13 +38,13 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '475cdb177405fc41e5dde86d9a3884de5fb88bef', class: {
+        return (h("div", { key: 'ae59b32d798c888eef5f2b3464160177b7a2e9d8', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, h("div", { key: '0e007f09bcdcd85d50bd16ed37f9f4d399c14e28', class: {
+            } }, h("div", { key: '05d260716090d503dde8e0dddc79db0a5f553f0b', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, h("slot", { key: '41190bb4bc5d13cecbf7b847c58af7975ffc0255', name: "illustration" })), h("div", { key: 'c338cba5ecac003b1642800441139e497f3c3769', class: "mg-c-illustrated-message__slots" }, h("div", { key: '804f5fc5a96d87d4e533d64eb80d275377dec0cf', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'c5db8d1c61b0b85bc94905dc4b4bfe3ce44d48d1', name: "title" })), h("div", { key: 'e5be01c4e24a60a039a072946d12275bf46b681d', class: "mg-c-illustrated-message__details" }, h("slot", { key: '76eaf55622ed37c42f40ec832ec48ca6ab66e42c', name: "details" })))));
+            } }, h("slot", { key: '119f517d66d9d4fe1bbc84341fccab9db1070c06', name: "illustration" })), h("div", { key: 'cc00f05411b3d8103e566d01d48a6ab66438027c', class: "mg-c-illustrated-message__slots" }, h("div", { key: '1832b69ce391c8c018bfc3acad75ded56dc0d484', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'd0dfb8c433246571c140797f99f434cb64c67e7e', name: "title" })), h("div", { key: '75b18511e74d1d4d049e698c3fb43ad4f00450c3', class: "mg-c-illustrated-message__details" }, h("slot", { key: '78e11fa31da149666973e03fe707e302d60f8989', name: "details" })))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }
@@ -74,6 +80,8 @@ export class MgIllustratedMessage {
                     "tags": [],
                     "text": "Define illustration size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
@@ -92,6 +100,8 @@ export class MgIllustratedMessage {
                     "tags": [],
                     "text": "Define component orientation"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "'vertical'"

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

	@@ -1 +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,wBAAwB,CAAC;AAGnD;;;;GAIG;AAMH,MAAM,OAAO,oBAAoB;;~~oBAaY~~,QAAQ;~~yBAKJ~~,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,CAAC;YAC1E,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1G,CAAC;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;QAC/F,CAAC;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE;YAED,4DACE,KAAK,EAAE;oBACL,wCAAwC,EAAE,IAAI;oBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;iBACvE;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;YACN,4DAAK,KAAK,EAAC,iCAAiC;gBAC1C,4DAAK,KAAK,EAAC,iCAAiC;oBAC1C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,4DAAK,KAAK,EAAC,mCAAmC;oBAC5C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\nimport type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';\n\n/*\n @slot illustration - Illustration content\n * @slot title - Title content\n * @slot details - Details content\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: IllustratedMessageSizeType = 'medium';\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"]}
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,wBAAwB,CAAC;AAGnD;;;;GAIG;AAMH,MAAM,OAAO,oBAAoB;IALjC;QAeE;;WAEG;QACK,SAAI,GAA+B,QAAQ,CAAC;QAEpD;;WAEG;QACK,cAAS,GAA8B,UAAU,CAAC;KAqD3D;IAnDC;;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,CAAC;YAC1E,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1G,CAAC;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;QAC/F,CAAC;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE;YAED,4DACE,KAAK,EAAE;oBACL,wCAAwC,EAAE,IAAI;oBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;iBACvE;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;YACN,4DAAK,KAAK,EAAC,iCAAiC;gBAC1C,4DAAK,KAAK,EAAC,iCAAiC;oBAC1C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,4DAAK,KAAK,EAAC,mCAAmC;oBAC5C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\nimport type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';\n\n/*\n @slot illustration - Illustration content\n * @slot title - Title content\n * @slot details - Details content\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: IllustratedMessageSizeType = 'medium';\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"]}

package/dist/collection/components/molecules/mg-loader/mg-loader.js CHANGED Viewed

@@ -2,10 +2,6 @@ import { h } from "@stencil/core";
 import { initLocales } from "../../../locales";
 import { isValidString, toString } from "@mgdis/stencil-helpers";
 export class MgLoader {
-    constructor() {
-        this.message = undefined;
-        this.messageHide = undefined;
-    }
     watchMessage(newValue) {
         if (newValue && !isValidString(newValue))
             throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${toString(newValue)}.`);
@@ -27,7 +23,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '6502a0367c385dbc8c5235d3580412a14176afe3', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '83e0e3ea7136c940d712a796ad975ba1596f8215', icon: "loader", spin: true }), h("span", { key: 'cd9b452f15bce70528f4241f80d2d45bcc44b9ff', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
+        return (h("div", { key: '8a6e91e7b727d2fa1478183c27caf11856cae5ce', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '2417aafbc9d468413295dc89e4513cdd69a054b9', icon: "loader", spin: true }), h("span", { key: '23b5dbb5cd4cb2a062bbf1442737334fac2f4fba', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +53,8 @@ export class MgLoader {
                     "tags": [],
                     "text": "Override loader message"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message",
                 "reflect": false
             },
@@ -74,6 +72,8 @@ export class MgLoader {
                     "tags": [],
                     "text": "Hide message"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message-hide",
                 "reflect": false
             }

package/dist/collection/components/molecules/mg-loader/mg-loader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,QAAQ~~;;;;;~~IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oEAAoE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACvJ,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-loader',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n shadow: true,\n})\nexport class MgLoader {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgLoaderElement;\n\n /\n Override loader message\n /\n @Prop() message?: string;\n @Watch('message')\n watchMessage(newValue: MgLoader['message']): void {\n if (newValue && !isValidString(newValue)) throw new Error(`<mg-loader> prop \"message\" must be a valid string. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Hide message\n /\n @Prop() messageHide?: boolean;\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 // validate props\n this.watchMessage(this.message);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-loader\" aria-live=\"polite\">\n <mg-icon icon=\"loader\" spin></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message \|\| this.messages.loader.inProgess}</span>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,QAAQ;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oEAAoE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACvJ,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-loader',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n shadow: true,\n})\nexport class MgLoader {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgLoaderElement;\n\n /\n Override loader message\n /\n @Prop() message?: string;\n @Watch('message')\n watchMessage(newValue: MgLoader['message']): void {\n if (newValue && !isValidString(newValue)) throw new Error(`<mg-loader> prop \"message\" must be a valid string. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Hide message\n /\n @Prop() messageHide?: boolean;\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 // validate props\n this.watchMessage(this.message);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-loader\" aria-live=\"polite\">\n <mg-icon icon=\"loader\" spin></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message \|\| this.messages.loader.inProgess}</span>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/mg-message/mg-message.js CHANGED Viewed

@@ -11,6 +11,22 @@ export class MgMessage {
          * Internal *
          ************/
         this.classBase = 'mg-c-message';
+        /**
+         * Define variant
+         */
+        this.variant = 'info';
+        /**
+         * Define variant style
+         */
+        this.variantStyle = 'bar-left';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-message']);
+        /**
+         * Define if component is using actions slot
+         */
+        this.hasActions = false;
         /**
          * Get icon corresponding to variant
          * @returns icon
@@ -29,10 +45,6 @@ export class MgMessage {
                     break;
             }
         };
-        this.variant = 'info';
-        this.variantStyle = 'bar-left';
-        this.classCollection = new ClassList(['mg-c-message']);
-        this.hasActions = false;
     }
     watchVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -74,9 +86,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9ce1d7b25bf12d974a7b0b296d9d71b9b2c984e1', class: this.classCollection.join() }, h("mg-card", { key: '7c7c1d5891d988adc7c5090b02d809aab32565f8' }, this.variantStyle === 'bar-left' && h("span", { key: 'd6c291fcf93ab6e84ba0288a1a0c4ec405b57e78', class: "mg-c-message__bar" }), h("span", { key: 'afc3dcf95dbf4ee96ca1041c54c0d4c37d435601', class: "mg-c-message__icon" }, h("mg-icon", { key: 'd9b79cb3be22fedee6a04cf43c72641202cc80f7', icon: this.getIcon() })), h("div", { key: 'f70d488459d28a464a3714b122b7a708c3562741', class: "mg-c-message__content" }, h("span", { key: 'd24b0ed1c326cb04bc7944f0c4f1fe19efa3fc9c', class: "mg-c-message__content-slot" }, h("slot", { key: 'bb491533bc09600c04699d561c7af608ee1567e5' })), this.hasActions && [
+        return (h("div", { key: '851d97fde6f05799e1420f8825fcff986d9af1d6', class: this.classCollection.join() }, h("mg-card", { key: '40f85f1fb3240ab709b1ab46286e9a953f2d5dc8' }, this.variantStyle === 'bar-left' && h("span", { key: '50b078ec379c7774d2f409c64b56108041bf3053', class: "mg-c-message__bar" }), h("span", { key: 'bc6b1019e1103fc8cd5e4e92f95b62374207be2b', class: "mg-c-message__icon" }, h("mg-icon", { key: 'e461ddc1eb1ddcb7ecc673f59dc59f400efbe916', icon: this.getIcon() })), h("div", { key: 'edf836b375d7f1fd413b53711b99acbe2bef3e92', class: "mg-c-message__content" }, h("span", { key: 'c6ce4628e450b7e89ef3715126b3a2dee081224e', class: "mg-c-message__content-slot" }, h("slot", { key: '36ecf7417e61ab84695078e2fd4ebe829bd769a7' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43547919e1ec8b34f23ea1ad5e75d5b0da23c831', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43be5769165cac1ab702b2ba80fb885c2ec1834f', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }
@@ -113,6 +125,8 @@ export class MgMessage {
                     "tags": [],
                     "text": "Define variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'info'"
@@ -137,6 +151,8 @@ export class MgMessage {
                     "tags": [],
                     "text": "Define variant style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant-style",
                 "reflect": false,
                 "defaultValue": "'bar-left'"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAiC,MAAM,mBAAmB,CAAC;AAG3F;;;GAGG;AAMH,MAAM,OAAO,SAAS;;~~QACpB;;~~sBAEc;QAEG,cAAS,GAAG,cAAc,CAAC;~~QAiD5C~~;;;WAGG;QACK,YAAO,GAAG,GAAmB,EAAE;YACrC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;gBACrB,KAAK,MAAM;oBACT,OAAO,aAAa,CAAC;gBACvB,KAAK,SAAS;oBACZ,OAAO,sBAAsB,CAAC;gBAChC,KAAK,SAAS;oBACZ,OAAO,cAAc,CAAC;gBACxB,KAAK,QAAQ;oBACX,OAAO,oBAAoB,CAAC;gBAC9B;oBACE,MAAM;YACV,CAAC;QACH,CAAC,CAAC;~~uBApD6B,MAAM~~;~~4BAcI~~,~~UAAU;+BAcb,IAAI,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;0BAK/C,KAAK;;IA/B3B,~~YAAY,CAAC,QAA8B,EAAE,QAA+B;QAC1E,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,+CAA+C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC9H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;YACvF,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC;IAOD,iBAAiB,CAAC,QAAmC,EAAE,QAAoC;QACzF,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtC,MAAM,IAAI,KAAK,CAAC,oDAAoD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACxI,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;YACvF,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC;IA+BD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,WAAW;QACX,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1C,sCAAsC;QACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC5E,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACrC;gBACG,IAAI,CAAC,YAAY,KAAK,UAAU,IAAI,6DAAM,KAAK,EAAC,mBAAmB,GAAQ;gBAC5E,6DAAM,KAAK,EAAC,oBAAoB;oBAC9B,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,GAAY,CACpC;gBACP,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,KAAK,EAAC,4BAA4B;wBACtC,8DAAa,CACR;oBACN,IAAI,CAAC,UAAU,IAAI;wBAClB,YAAM,KAAK,EAAC,iCAAiC,EAAC,GAAG,EAAC,mBAAmB,GAAQ;wBAC7E,YAAM,KAAK,EAAC,oCAAoC,EAAC,GAAG,EAAC,sBAAsB;4BACzE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB;qBACR,CACG,CACE,CACN,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-message.conf';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/*\n @slot - Message content\n * @slot actions - Actions content\n /\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /**********\n Internal \n *********/\n\n private readonly classBase = 'mg-c-message';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMessageElement;\n\n /\n Define variant\n /\n @Prop() variant: VariantType = 'info';\n @Watch('variant')\n watchVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n }\n\n /\n Define variant style\n /\n @Prop() variantStyle: VariantStyleType = 'bar-left';\n @Watch('variantStyle')\n watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void {\n if (!variantStyles.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Get icon corresponding to variant\n * @returns icon\n /\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Validate\n this.watchVariant(this.variant);\n this.watchVariantStyle(this.variantStyle);\n // Check if component has actions slot\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <mg-card>\n {this.variantStyle === 'bar-left' && <span class=\"mg-c-message__bar\"></span>}\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && [\n <span class=\"mg-c-message__content-separator\" key=\"content-separator\"></span>,\n <span class=\"mg-c-message__content-actions-slot\" key=\"content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>,\n ]}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-message.conf';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/*\n @slot - Message content\n * @slot actions - Actions content\n /\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /**********\n Internal \n *********/\n\n private readonly classBase = 'mg-c-message';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMessageElement;\n\n /\n Define variant\n /\n @Prop() variant: VariantType = 'info';\n @Watch('variant')\n watchVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n }\n\n /\n Define variant style\n /\n @Prop() variantStyle: VariantStyleType = 'bar-left';\n @Watch('variantStyle')\n watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void {\n if (!variantStyles.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Get icon corresponding to variant\n * @returns icon\n /\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Validate\n this.watchVariant(this.variant);\n this.watchVariantStyle(this.variantStyle);\n // Check if component has actions slot\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <mg-card>\n {this.variantStyle === 'bar-left' && <span class=\"mg-c-message__bar\"></span>}\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && [\n <span class=\"mg-c-message__content-separator\" key=\"content-separator\"></span>,\n <span class=\"mg-c-message__content-actions-slot\" key=\"content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>,\n ]}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/mg-modal/mg-modal.js CHANGED Viewed

@@ -10,6 +10,31 @@ export class MgModal {
     constructor() {
         // IDs
         this.titleId = '';
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-modal');
+        /**
+         * Modal dialog role.
+         */
+        this.dialogRole = dialogRoles[0];
+        /**
+         * Define if modal has a cross button
+         */
+        this.closeButton = false;
+        /**
+         * Define if modal is open
+         */
+        this.open = false;
+        /**
+         * Define if component is using actions slot
+         */
+        this.hasActions = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-modal']);
         /***********
          * Handles *
          ***********/
@@ -18,14 +43,8 @@ export class MgModal {
          */
         this.handleClose = () => {
             this.open = false;
+            this.componentClose.emit();
         };
-        this.identifier = createID('mg-modal');
-        this.dialogRole = dialogRoles[0];
-        this.modalTitle = undefined;
-        this.closeButton = false;
-        this.open = false;
-        this.hasActions = false;
-        this.classCollection = new ClassList(['mg-c-modal']);
     }
     watchIdentifier(newValue) {
         if (!isValideID(newValue)) {
@@ -79,6 +98,7 @@ export class MgModal {
         // update open prop when use escape key
         this.dialog.addEventListener('close', () => {
             this.open = false;
+            this.componentClose.emit();
         });
     }
     /**
@@ -86,13 +106,11 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '00881e2aa895d9b4bc48f721460a0f65f3ba1042', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: 'f927a4473e69d4034433e170b6279e027fc9c9d3', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: '3fdda688cfa51f9f96403cd918d7469a1be5f640' }, h("div", { key: 'f7f7dd207d50ed6a50cb13043acd6b1662197b8f', class: "mg-c-modal__dialog" }, h("header", { key: '9b6f2fbc0aba552d4f921df08f5e0301fcb996d1', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'cbe67968704c82cdcf640b829daf4367e31afc87', class: "mg-c-modal__close-button" }, h("mg-button", { key: '050ce6bdd52df7363f37a7e785e7de82e5f28fc8', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: this.handleClose }, h("mg-icon", { key: '256f467d254ba056505d8b0fdffbbef0bc426b37', icon: "cross" })))), h("h1", { key: '9812cb37e4cc713309191d53a83526b1970389c1', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'a83b1be738c8556d60e1c0c74c7adb24c751bdf9', class: "mg-c-modal__content" }, h("slot", { key: '3431c31ac066e43748063cc28daa785ae39f7b25' })), this.hasActions && (h("footer", { key: '0080243246ca901e0566fd947e74737c12fc2426', class: "mg-c-modal__footer" }, h("slot", { key: '044104989259ebd5a3ca8b84a24b7b1e844b7d7e', name: "actions" })))))));
+            } }, h("mg-card", { key: '36e09b525447abd8b810c8d4b770597e354fc3c3' }, h("div", { key: '4e8188bd2f7c4db85b902b58079ea45a863929eb', class: "mg-c-modal__dialog" }, h("header", { key: 'bd0512246a56379a63d7be10fd9e7999d26b578a', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f115aca533d59950c9b340f1e71d58cfe631b63d', class: "mg-c-modal__close-button" }, h("mg-button", { key: '691ed3f1b20978e302ebd7a793adeac23ccd87f4', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'aa1bc4cc8906234144fa2944ff5d2b7eab2df11e', icon: "cross" })))), h("h1", { key: 'cfab5ec91d14b904e68f4e8dfe973067f0e2af4e', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'c829f024a77f9c49d84cf7a05a34561b94fc6e47', class: "mg-c-modal__content" }, h("slot", { key: '4c2cf29eac6523b23e0d144fded17c38afab4a0a' })), this.hasActions && (h("footer", { key: 'e414e21afe1a4a3de720876b71d56efd267bd964', class: "mg-c-modal__footer" }, h("slot", { key: 'e71d2578822f3fbaf990fbb3e2878ab850bf4141', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +140,8 @@ export class MgModal {
                     "tags": [],
                     "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-modal')"
@@ -146,6 +166,8 @@ export class MgModal {
                     "tags": [],
                     "text": "Modal dialog role."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dialog-role",
                 "reflect": false,
                 "defaultValue": "dialogRoles[0]"
@@ -164,6 +186,8 @@ export class MgModal {
                     "tags": [],
                     "text": "Displayed modal title"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "modal-title",
                 "reflect": false
             },
@@ -181,6 +205,8 @@ export class MgModal {
                     "tags": [],
                     "text": "Define if modal has a cross button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-button",
                 "reflect": false,
                 "defaultValue": "false"
@@ -199,6 +225,8 @@ export class MgModal {
                     "tags": [],
                     "text": "Define if modal is open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -242,6 +270,21 @@ export class MgModal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "componentClose",
+                "name": "component-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emmited event when modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "element"; }