@mgdis/mg-components 6.22.1 → 6.23.0

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
@@ -20,6 +21,25 @@ const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item =
  * @returns select optgroup type is valid
  */
 const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
+/**
+ * Ensure options can be unambiguously differentiated by their title
+ * Two options can share the same title only when they belong to different groups
+ * @param items - select options to validate
+ */
+const validateUniqueTitles = (items) => {
+    const titlesByGroup = new Map();
+    items.forEach(({ title, group }) => {
+        if (!titlesByGroup.has(group)) {
+            titlesByGroup.set(group, new Set());
+        }
+        const titles = titlesByGroup.get(group);
+        if (titles.has(title)) {
+            const groupContext = group === undefined ? 'outside of a group' : `within the group "${group}"`;
+            throw new Error(`<mg-input-select> prop "items" must not contain options with the same "title" ${groupContext}. Duplicated title: "${title}".`);
+        }
+        titles.add(title);
+    });
+};
 /**
  * Group options
  * @param acc - reduce accumulator
@@ -106,18 +126,37 @@ export class MgInputSelect {
                 return null;
             }
         };
+        /**
+         * Get the rendered options as a flat list, in render order
+         * The select value is the position of an option in this list, so it uniquely identifies an option even when several share the same title
+         * @returns flat select options
+         */
+        this.getOptions = () => this.options.flatMap(option => (isOptGroup(option) ? option.options : [option]));
+        /**
+         * Get the option matching the current select value
+         * @returns matching option or undefined
+         */
+        this.getSelectedOption = () => {
+            var _a;
+            if (((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) === undefined || this.input.value === '') {
+                return undefined;
+            }
+            const options = this.getOptions();
+            // The select value is normally the render index of the selected option
+            const optionByIndex = options[Number(this.input.value)];
+            // Fallback for an unknown value injected programmatically (stored as a disabled option keyed by its own value)
+            return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find(option => option.value === this.input.value);
+        };
         /**
          * Handle input event
          */
         this.handleInput = () => {
+            const selectedOption = this.getSelectedOption();
             if (this.input.value === '') {
                 this.value = null;
             }
-            else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
-                this.value = this.input.value;
-            }
-            else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
-                this.value = this.items.find(this.isInputValue).value;
+            else if (selectedOption !== undefined) {
+                this.value = selectedOption.value;
             }
             else {
                 // Add the unknown input.value to the options array as a disabled option before setting it as the new value
@@ -128,20 +167,6 @@ export class MgInputSelect {
                 this.setErrorMessage();
             }
         };
-        /**
-         * Method to compare item with input.value
-         * @param item - item to compare with
-         * @returns truthy if input.value is an item
-         */
-        this.isInputValue = (item) => {
-            if (this.input === undefined)
-                return false;
-            // String items keep native DOM values.
-            if (allItemsAreString(this.items))
-                return item.title === this.input.value;
-            // Object items use stringified values.
-            return toString(item.value) === this.input.value;
-        };
         /**
          * Handle blur event
          */
@@ -156,7 +181,7 @@ export class MgInputSelect {
          * Input value is disabled
          * @returns truthy if input value is disabled
          */
-        this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
+        this.isDisabledValue = () => { var _a; return ((_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
         /**
          * Check if input is valid
          */
@@ -184,12 +209,10 @@ export class MgInputSelect {
         /**
          * Render option
          * @param option - to render
+         * @param index - option position in the flat list of rendered options, used as the option value
          * @returns render option
          */
-        this.renderOption = (option) => {
-            const serializedValue = allItemsAreString(this.items) ? option.title : toString(option.value);
-            return (h("option", { key: serializedValue, value: serializedValue, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
-        };
+        this.renderOption = (option, index) => (h("option", { key: index, value: `${index}`, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
         setTimeout(() => {
@@ -207,6 +230,7 @@ export class MgInputSelect {
         }
         // String array
         else if (allItemsAreString(newValue)) {
+            validateUniqueTitles(newValue.map(item => ({ title: item })));
             if (typeof this.value === 'string') {
                 this.valueExist = newValue.includes(this.value);
             }
@@ -214,6 +238,7 @@ export class MgInputSelect {
         }
         // Object array
         else if (allItemsAreOptions(newValue)) {
+            validateUniqueTitles(newValue);
             this.valueExist = newValue.map(item => item.value).includes(this.value);
             // Grouped object options
             if (newValue.some(item => Boolean(item.group))) {
@@ -360,6 +385,7 @@ export class MgInputSelect {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validateItems(this.items);
         this.validateValue(this.value);
@@ -383,11 +409,13 @@ export class MgInputSelect {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: '7d544e8f67a37d5781697da10d3d4f47cc5027e3', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        // Running index shared across groups, so each option gets a unique value matching its position in getOptions()
+        let optionIndex = 0;
+        return (h("mg-input", { key: '9e51eff6ef7158aa1786a893985e4d1d202e94ed', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-        h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption(option) && this.renderOption(option)))))));
+        h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(groupedOption => this.renderOption(groupedOption, optionIndex++)))) : (isOption(option) && this.renderOption(option, optionIndex++)))))));
     }
     static get is() { return "mg-input-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { allItemsAreString, ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { helpTextTypes, textTypes } from "./mg-input-text.conf";
 import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
@@ -352,6 +353,7 @@ export class MgInputText {
         this.messages = initLocales(this.element).messages;
         this.characterLeftId = `${this.identifier}-character-left`;
         this.datalistId = `${this.identifier}-datalist`;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validateIcon(this.icon);
         this.validateDatalistoptions(this.datalistoptions);
@@ -375,7 +377,7 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '068e38b82ef4e2254fb8d37f21ecf11dc4f3a012', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '5758548bc9e5b1319e5d2f4832339d2f95d9d436', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
@@ -550,7 +552,7 @@ export class MgInputText {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"glitters\" | \"glitters-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputTextarea {
@@ -265,6 +266,7 @@ export class MgInputTextarea {
         // Get locales
         this.messages = initLocales(this.element).messages;
         this.characterLeftId = `${this.identifier}-character-left`;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validatecharacterLeftHide(this.characterLeftHide);
         this.validatePattern(this.pattern);
@@ -284,7 +286,7 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '021aa902aa952730d98fbc2eaa5136975b484319', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
+        return (h("mg-input", { key: '5a6d89809f5e842cf5a0cda0e3c692cc4c0f667f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classDisabled, classReadonly } from "../mg-input/mg-input.conf";
 /**
  * type Option validation function
@@ -256,6 +257,7 @@ export class MgInputToggle {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.watchItems(this.items);
         this.validateSlots();
         this.watchValue(this.value);
@@ -270,7 +272,7 @@ export class MgInputToggle {
      */
     render() {
         const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
-        return (h("mg-input", { key: '3f440a16156b4fc89590addba025b350218ccf9c', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
+        return (h("mg-input", { key: '09f0a48057d2c2a19b1f01e8e769592824afdd23', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js

@@ -99,7 +99,7 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "{ icon: \"filter\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
+                    "resolved": "{ icon: \"filter\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"glitters\" | \"glitters-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { ClassList, createID, isValideID, isValidString, nextTick, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, createID, isValidString, isValideID, nextTick, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { initLocales } from "../../../../locales";
 import { directions } from "../mg-menu/mg-menu.conf";
 import { Status, targets } from "./mg-menu-item.conf";
@@ -293,6 +294,7 @@ export class MgMenuItem {
      * Validate props
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
         // we store only matching elements
         this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
@@ -370,7 +372,7 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),
         });
-        return (h(Host, { key: '374bf5cb625380973d15163b1088e7e743da5dd4', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        return (h(Host, { key: 'c96763db4eeaa4a70213f39f13600aacbbed02b4', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
         }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -197,7 +197,7 @@ export class MgActionMore {
                 "mutable": true,
                 "complexType": {
                     "original": "MgActionMoreIconType",
-                    "resolved": "{ icon: \"filter\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
+                    "resolved": "{ icon: \"filter\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"glitters\" | \"glitters-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
                     "references": {
                         "MgActionMoreIconType": {
                             "location": "import",

package/dist/collection/components/molecules/mg-alert/mg-alert.js

@@ -26,6 +26,10 @@ export class MgAlert {
          * Define variant style
          */
         this.variantStyle = 'bar-left';
+        /**
+         * Define if alert fits its parent element
+         */
+        this.fullWidth = false;
         /**
          * Component classes
          */
@@ -142,7 +146,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '9041d8643bf4d0d44f20d30ac3c1d9aa46d6e060', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '94d1a430e9af605fa2ea2b557e82fc15f1cc148b' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '8d10696cd86b00304d8ae409e36691a41a16702e', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle, fullWidth: this.fullWidth }, h("slot", { key: '598a86d657b77006f5a9e9dbf33e7969669be125' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -230,6 +234,26 @@ export class MgAlert {
                 "reflect": false,
                 "attribute": "variant-style",
                 "defaultValue": "'bar-left'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if alert fits its parent element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 /**
  * @slot summary - Summary content
  * @slot details - Details content
@@ -36,6 +37,7 @@ export class MgDetails {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
         // Check if summary slot is empty
@@ -53,7 +55,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
+        return (h("details", { key: 'b4a342010e903cfd2a670e46257e889fd74ddf1e', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '85fbd6f675e20881a8eb8df776d827e25859e0b7' }, h("slot", { key: '56491b2e4fa9f4772efd5ec66825e897b90cfde3', name: "summary" }), h("span", { key: '43f913504670d8f592479d5929e6901e9f9e9a9a', class: "mg-c-details__toggle" }, h("mg-icon", { key: '268cfc8d4b9e55d87303e6a85dead205ecdd7ce1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'e3d7c794f7a8d83a31c02302a06bbe0db1e8b63d', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'e5230b49934c2b3e9a0c31821e53ea52084b2b26', class: "mg-c-details__details" }, h("slot", { key: '0355f1596c85ab869b3658276ee156a7aadc50d1', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classReadonly, isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 export class MgFieldset {
     constructor() {
@@ -112,6 +113,7 @@ export class MgFieldset {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.watchReadonly(this.readonly);
         this.watchLegendBorderDisplay(this.legendBorderDisplay);
         this.setMgInputs();
@@ -133,7 +135,7 @@ export class MgFieldset {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'a32d9d6e0a77eddf6dac1c741066cb600c2f27b3', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: '5d05e51fd64fc43458bccb3287fcf3a4fe462c00', class: "mg-c-input__input-group" }, h("slot", { key: 'd641e3007cdd2adfa6115f639603de78caa63202' }))));
+        return (h("mg-input", { key: '547bdc6c4c35ae9949f185f110a24c5a6437cea7', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: '4fe4ec0d810cf46192e61b5052caf3694c3444be', class: "mg-c-input__input-group" }, h("slot", { key: '030481c1c7536b9d5e20975f77a86d3dda853582' }))));
     }
     static get is() { return "mg-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, toString, isValideID } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, createID, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { initLocales } from "../../../locales";
 import { isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 import { requiredMessageStatus, roles } from "./mg-form.conf";
@@ -196,6 +197,7 @@ export class MgForm {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         this.watchIdentifier(this.identifier);
         this.validateAriaRole(this.ariaRole);
         this.validateRequiredMessage(this.requiredMessage);
@@ -242,7 +244,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'e528a49eba4e57f809dd0a6dd5462c2be3677da5', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '37eb0c30984b998ef8d78ff8ae74949c4761c21a', innerHTML: this.requiredMessageText }), h("slot", { key: '8ae80522118a3e87ca735545a48844c1e4e3ab30' }), !this.readonly && !this.disabled && h("slot", { key: '4cdeba849881f9753ff08df6c456397e859c6a0d', name: "actions" })));
+        return (h("form", { key: 'bb340dafd9e9d987b4de94f718f81a63749b183c', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '5cdfc883ecd9a1e9759f952beac2c17f4d9a3237', innerHTML: this.requiredMessageText }), h("slot", { key: 'd5879767bc1d23a7c31b119b2fa2a29b9f8bc76f' }), !this.readonly && !this.disabled && h("slot", { key: 'c47af6bccd71ee51e1725c5592001d09add966b8', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,6 +11,7 @@ export class MgMessage {
          * Internal *
          ************/
         this.classBase = 'mg-c-message';
+        this.classFullWidth = 'mg-c-message--full-width';
         /**
          * Define variant
          */
@@ -19,6 +20,10 @@ export class MgMessage {
          * Define variant style
          */
         this.variantStyle = 'bar-left';
+        /**
+         * Define if message fits its parent element
+         */
+        this.fullWidth = false;
         /**
          * Component classes
          */
@@ -68,6 +73,14 @@ export class MgMessage {
                 this.classCollection.delete(`${this.classBase}--${oldValue}`);
         }
     }
+    watchFullWidth(newValue) {
+        if (newValue) {
+            this.classCollection.add(this.classFullWidth);
+        }
+        else {
+            this.classCollection.delete(this.classFullWidth);
+        }
+    }
     /*************
      * Lifecycle *
      *************/
@@ -78,6 +91,7 @@ export class MgMessage {
         // Validate
         this.watchVariant(this.variant);
         this.watchVariantStyle(this.variantStyle);
+        this.watchFullWidth(this.fullWidth);
         // Check if component has actions slot
         this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     }
@@ -86,9 +100,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'f99bf527eb2c6005eeaec11f89aaa08f8865ea57', class: this.classCollection.join() }, h("mg-card", { key: 'beede3cd97b022d947c216b6bba454a104ba5790', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '515828d725a996c9d57b39ad75e9373150a1b78a', class: "mg-c-message__bar" }), h("span", { key: '02ae41c66af25c2611b9b6cb8c87a1ad99346fa3', class: "mg-c-message__icon" }, h("mg-icon", { key: '3eadb40ed0dfa5ec51155608a67769c5fee3d402', icon: this.getIcon() })), h("div", { key: 'b832251e8f330d00b512bcd508ae9bf6e5f511cb', class: "mg-c-message__content" }, h("span", { key: 'c3520fc49bd5c3c187a83823050ceb9ca8c12d46', class: "mg-c-message__content-slot" }, h("slot", { key: 'f4064dff9536cbb76e45c5c4c1a89621da9531b2' })), this.hasActions && [
+        return (h("div", { key: '7a91fbc1a334d006013cdc8dd8ce6bce52947b90', class: this.classCollection.join() }, h("mg-card", { key: '34117431721f271fa96ac729376c1af6178dcedf', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: 'b68b15e7bb5c48b53f3aafea30c50a1db42db87c', class: "mg-c-message__bar" }), h("span", { key: 'efb2fd983a68f252312c3266879cd37666c17707', class: "mg-c-message__icon" }, h("mg-icon", { key: 'de7df68e25a5c581407b2a88dd7c268c4e6977cd', icon: this.getIcon() })), h("div", { key: '10afb1b7e6b8bea33ed18cf17dfbdaf6b35b3b89', class: "mg-c-message__content" }, h("span", { key: '5f7c5d7429a143f44c992fe79f0c42649fb695a7', class: "mg-c-message__content-slot" }, h("slot", { key: 'c20cbe2a91eb487bdebd5c049c33b7d50148a7b0' })), 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: '5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: 'cdf59d5cb43793c7d8be40cf9d8d43b7d03d0a02', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }
@@ -158,6 +172,26 @@ export class MgMessage {
                 "reflect": false,
                 "attribute": "variant-style",
                 "defaultValue": "'bar-left'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if message fits its parent element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }
@@ -175,6 +209,9 @@ export class MgMessage {
             }, {
                 "propName": "variantStyle",
                 "methodName": "watchVariantStyle"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "watchFullWidth"
             }];
     }
 }