@mgdis/mg-components 6.22.0 → 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,12 +167,6 @@ export class MgInputSelect {
                 this.setErrorMessage();
             }
         };
-        /**
-         * Method to compare item.title with input.value
-         * @param item - item to compare with
-         * @returns truthy if input.value is an item
-         */
-        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
         /**
          * Handle blur event
          */
@@ -148,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
          */
@@ -176,9 +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) => (h("option", { key: option.title, value: option.title, 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(() => {
@@ -196,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);
             }
@@ -203,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))) {
@@ -349,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);
@@ -372,11 +409,13 @@ export class MgInputSelect {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: 'ad948f6ed1a8e749ab7b62a198814a40ef99e884', 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"; }
@@ -421,7 +460,8 @@ export class MgInputSelect {
                         "SelectOption": {
                             "location": "import",
                             "path": "./mg-input-select.conf",
-                            "id": "src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts::SelectOption"
+                            "id": "src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 },
@@ -661,7 +701,8 @@ export class MgInputSelect {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -705,7 +746,8 @@ export class MgInputSelect {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -801,7 +843,7 @@ export class MgInputSelect {
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
-                    "resolved": "CheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
                         "HTMLMgInputCheckboxElement": {
                             "location": "global",

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: 'aa227eef42e7cfcb1ad0c6c2664498674b5cdd47', 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: {
@@ -528,7 +530,8 @@ export class MgInputText {
                         "TextType": {
                             "location": "import",
                             "path": "./mg-input-text.conf",
-                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType"
+                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType",
+                            "referenceLocation": "TextType"
                         }
                     }
                 },
@@ -549,12 +552,13 @@ 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",
                             "path": "../../../../components",
-                            "id": "src/components.d.ts::IconType"
+                            "id": "src/components.d.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -598,7 +602,8 @@ export class MgInputText {
                         "OptionType": {
                             "location": "import",
                             "path": "./mg-input-text.conf",
-                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::OptionType"
+                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::OptionType",
+                            "referenceLocation": "OptionType"
                         }
                     }
                 },
@@ -701,7 +706,8 @@ export class MgInputText {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -784,7 +790,8 @@ export class MgInputText {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

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: '68f259138df7207d7ba16a8f36f3b45e8fb143d0', 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',
@@ -535,7 +537,8 @@ export class MgInputTextarea {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -638,7 +641,8 @@ export class MgInputTextarea {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

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: '834a0b0713019490b91d799ac9688661f930de43', 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" }))))));
@@ -299,7 +301,8 @@ export class MgInputToggle {
                         "ToggleOption": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -322,7 +325,8 @@ export class MgInputToggle {
                         "ToggleOption": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -542,7 +546,8 @@ export class MgInputToggle {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

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

@@ -99,12 +99,13 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "{ icon: \"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"pause\" | \"loader\" | \"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\" | \"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-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"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\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"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-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"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\" | \"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",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::IconType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -128,7 +129,8 @@ export class MgItemMore {
                         "SlotLabelType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SlotLabelType",
+                            "referenceLocation": "SlotLabelType"
                         }
                     }
                 },

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

@@ -153,7 +153,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '17b5111014e866939f58170452ca74ee40c8454c', role: "list", "aria-label": this.label }, h("slot", { key: '7c2a9aafccbc7526c74acaf7a505d7a33befc5ad' })));
+        return (h(Host, { key: 'c16a69485fabb9a7a91efe032501fafa98862882', role: "list", "aria-label": this.label }, h("slot", { key: 'f5bca6fdb93d9273e5fcc753d2c58c0a0504c0d0' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -198,7 +198,8 @@ export class MgMenu {
                         "Direction": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Direction"
+                            "id": "src/types/index.ts::Direction",
+                            "referenceLocation": "Direction"
                         }
                     }
                 },
@@ -244,7 +245,8 @@ export class MgMenu {
                         "ItemMoreType": {
                             "location": "import",
                             "path": "./mg-menu.conf",
-                            "id": "src/components/molecules/menus/mg-menu/mg-menu.conf.ts::ItemMoreType"
+                            "id": "src/components/molecules/menus/mg-menu/mg-menu.conf.ts::ItemMoreType",
+                            "referenceLocation": "ItemMoreType"
                         }
                     }
                 },

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()),
@@ -439,7 +441,8 @@ export class MgMenuItem {
                         "TargetType": {
                             "location": "import",
                             "path": "./mg-menu-item.conf",
-                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::TargetType"
+                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::TargetType",
+                            "referenceLocation": "TargetType"
                         }
                     }
                 },
@@ -464,7 +467,8 @@ export class MgMenuItem {
                         "MgMenuStatusType": {
                             "location": "import",
                             "path": "./mg-menu-item.conf",
-                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::MgMenuStatusType"
+                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::MgMenuStatusType",
+                            "referenceLocation": "MgMenuStatusType"
                         }
                     }
                 },