@mgdis/mg-components 6.22.0 → 6.22.1

package/dist/cjs/mg-loader.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C2viYwrR.js');
+var index = require('./index-Dz2LAZQT.js');
 var index$2 = require('./index-BxB20_Vw.js');
 var index$1 = require('./index-CpENFzEo.js');
 
@@ -35,7 +35,7 @@ const MgLoader = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'da82988810c1e2916a2464299844cad674cd1f12', class: "mg-c-loader", "aria-live": "polite" }, index.h("mg-icon", { key: '45588ae8dd55ca582a4872d4c1e731bb00681c28', icon: "loader", spin: true }), index.h("span", { key: '3bc07f4bbf8995de61c019942c33c8076793096a', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (index.h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, index.h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), index.h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mg-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C2viYwrR.js');
+var index = require('./index-Dz2LAZQT.js');
 var index$1 = require('./index-CpENFzEo.js');
 
 /**
@@ -75,7 +75,7 @@ const MgProgress = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '02466f9df3e5204eef158b9f733ba0af811ad9ed', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("div", { key: '88c2eafe55d169502ef5afccfbde3371fee5165f', class: "mg-c-progress" }, index.h("div", { key: 'b46159dbed388c58b198bdc330096669c454bcd3', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, index.h("div", { key: '0faebcc86cc7a55ccab3d9fb8dce4403bff16ebf', class: "mg-c-progress__fill", style: {
+        return (index.h(index.Host, { key: '8e6c727e9416fa777fd94b32d618a9137e8e08f7', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("div", { key: 'ac42ee9c5dda55d70aad7391895e4a013aaa27f9', class: "mg-c-progress" }, index.h("div", { key: '34c77bc6c133bc59b9daa68d7d6c8534f13f7d37', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, index.h("div", { key: '7ea03a3f0c54ca0c81616c7c070d178a510dd7e1', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }

package/dist/collection/collection-manifest.json

@@ -13,7 +13,6 @@
     "components/atoms/mg-tooltip/mg-tooltip.js",
     "components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js",
     "components/molecules/inputs/mg-input/mg-input.js",
-    "components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js",
     "components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js",
     "components/molecules/inputs/mg-input-combobox/mg-input-combobox.js",
     "components/molecules/inputs/mg-input-date/mg-input-date.js",
@@ -46,9 +45,10 @@
     "components/molecules/mg-table/mg-table.js",
     "components/molecules/mg-tabs/mg-tabs.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.40.1",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -126,7 +126,8 @@ export class MgBadge {
                         "BadgeVariantType": {
                             "location": "import",
                             "path": "./mg-badge.conf",
-                            "id": "src/components/atoms/mg-badge/mg-badge.conf.ts::BadgeVariantType"
+                            "id": "src/components/atoms/mg-badge/mg-badge.conf.ts::BadgeVariantType",
+                            "referenceLocation": "BadgeVariantType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -231,7 +231,8 @@ export class MgButton {
                         "VariantType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType",
+                            "referenceLocation": "VariantType"
                         }
                     }
                 },
@@ -276,7 +277,8 @@ export class MgButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -301,7 +303,8 @@ export class MgButton {
                         "SizeType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::SizeType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::SizeType",
+                            "referenceLocation": "SizeType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-card/mg-card.js

@@ -96,7 +96,8 @@ export class MgCard {
                         "RadiusSizeType": {
                             "location": "import",
                             "path": "./mg-card.conf",
-                            "id": "src/components/atoms/mg-card/mg-card.conf.ts::RadiusSizeType"
+                            "id": "src/components/atoms/mg-card/mg-card.conf.ts::RadiusSizeType",
+                            "referenceLocation": "RadiusSizeType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -149,7 +149,8 @@ export class MgIcon {
                         "IconType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -174,7 +175,8 @@ export class MgIcon {
                         "IconSizeType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType",
+                            "referenceLocation": "IconSizeType"
                         }
                     }
                 },
@@ -200,7 +202,8 @@ export class MgIcon {
                         "IconVariantType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType",
+                            "referenceLocation": "IconVariantType"
                         }
                     }
                 },
@@ -225,7 +228,8 @@ export class MgIcon {
                         "IconVariantStyleType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType",
+                            "referenceLocation": "IconVariantStyleType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -110,7 +110,8 @@ export class MgTag {
                         "TagVariantType": {
                             "location": "import",
                             "path": "./mg-tag.conf",
-                            "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType"
+                            "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType",
+                            "referenceLocation": "TagVariantType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -429,7 +429,8 @@ export class MgTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },

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

@@ -443,7 +443,8 @@ export class MgInput {
                         "labelHeading": {
                             "location": "import",
                             "path": "./mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading",
+                            "referenceLocation": "labelHeading"
                         }
                     }
                 },
@@ -507,7 +508,8 @@ export class MgInput {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "./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-checkbox/MgInputCheckboxPaginated.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+import { MgInputCheckboxList } from "./MgInputCheckboxList";
+import { formatID } from "@mgdis/core-ui-helpers/dist/utils";
+/**
+ * Get items from checkboxes and limit
+ * @param checkboxes - checkboxes to slice
+ * @param limit - number of items to return
+ * @returns list of items to display in section
+ */
+const getItems = (checkboxes, limit) => [...checkboxes].slice(0, limit);
+/**
+ * Component has next checkboxes to display
+ * @param checkboxes - checkboxes to check
+ * @param limit - number of items to display
+ * @returns truthy if have next elements
+ */
+const hasNext = (checkboxes, limit) => checkboxes.length > limit;
+/**
+ * Internal component use to manage sections instances
+ * @param props - MgInputCheckboxList Interface Props
+ * @returns input template
+ */
+export const MgInputCheckboxPaginated = (props) => {
+    const items = getItems(props.checkboxes, props.limit);
+    const listId = formatID(props.messages.label);
+    const tabId = `tab-info-${props.key}`;
+    /**
+     * Handle load-more <mg-button> click event
+     */
+    const handleLoadMoreClick = () => {
+        if (hasNext(props.checkboxes, props.limit)) {
+            props.handleLoadMore();
+        }
+    };
+    return (h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` }, 
+    // Mass action depends on all checkboxes list, not only displayed items
+    typeof props.handleMassAction === 'function' && props.checkboxes.length > 0 && props.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), h("div", { class: "mg-c-input__tabs-content" }, h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0 ? props.messages.noValue : props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
+};

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

@@ -6,6 +6,7 @@ export const checkboxTypes = ['checkbox', 'multi'];
  * mg-input-checkbox-paginated section kind value
  */
 export const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
+    NOT_SELECTED: 0,
+    SELECTED: 1,
+    SEARCH: 2,
 };

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

@@ -1,12 +1,13 @@
 import { h } from "@stencil/core";
 import { ClassList, cleanString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { checkboxTypes, SectionKind } from "./mg-input-checkbox.conf";
+import { checkboxTypes, SectionKind, } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
 import { classDisabled, classReadonly, classFieldset, classVerticalList } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Status } from "../../mg-tabs/mg-tabs.conf";
+import { MgInputCheckboxPaginated } from "./MgInputCheckboxPaginated";
 /**
- * type CheckboxItem validation function
+ * type ICheckboxItem validation function
  * @param items - Checkbox item
  * @returns match item type
  */
@@ -26,6 +27,7 @@ export class MgInputCheckbox {
         // "multi" setup
         this.multiStart = 5;
         this.searchStart = 10;
+        this.paginatedStep = 10;
         // popover variables
         this.hasOpenedPopover = false;
         this.checkboxesId = 'checkboxes-list';
@@ -91,6 +93,10 @@ export class MgInputCheckbox {
          * Define <mg-tabs> active-tab
          */
         this.activeTab = 1;
+        /**
+         * Paginated sections limit per key
+         */
+        this.paginatedLimits = {};
         /**
          * Handle input event
          * @param event - input event
@@ -136,8 +142,9 @@ export class MgInputCheckbox {
          * @param event - input value-change event
          */
         this.handleSearchChange = (event) => {
-            this.searchValue = event.detail;
             event.stopPropagation();
+            event.preventDefault();
+            this.searchValue = event.detail;
         };
         /**
          * Handle <mg-tabs> tab-change event
@@ -269,9 +276,15 @@ export class MgInputCheckbox {
          * Reset <mg-input-checkbox-paginated> limit state
          */
         this.resetTabsLimit = () => {
-            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
-                component.resetLimit();
-            });
+            this.paginatedLimits = {};
+        };
+        /**
+         * Handle load-more action for a paginated section
+         * @param key - section key
+         */
+        this.handlePaginatedLoadMore = (key) => {
+            var _a;
+            this.paginatedLimits = Object.assign(Object.assign({}, this.paginatedLimits), { [key]: ((_a = this.paginatedLimits[key]) !== null && _a !== void 0 ? _a : this.paginatedStep) + this.paginatedStep });
         };
         /**
          * Renders the readonly value of the input.
@@ -292,7 +305,7 @@ export class MgInputCheckbox {
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, ICheckboxItem. Passed value: ${toString(newValue)}.`);
         }
     }
     validateType(newValue) {
@@ -517,7 +530,7 @@ export class MgInputCheckbox {
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
+    renderCheckboxTabs(props) {
         const handleMassAction = (kind) => () => {
             const displayItems = this.getDisplayItems();
             // update only displayed items
@@ -528,39 +541,43 @@ export class MgInputCheckbox {
             });
             this.updateValues();
         };
-        const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
+        const [checkedValues, notCheckedValues] = props.checkboxes.reduce((acc, curr) => {
             acc[curr.value ? 0 : 1].push(curr);
             return acc;
         }, [[], []]);
         const sections = [
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), key: SectionKind.NOT_SELECTED, handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), key: SectionKind.SELECTED, handleMassAction: handleMassAction(SectionKind.SELECTED) }),
         ];
         return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
                 label: section.messages.title,
                 badge: { value: section.checkboxes.length, label: this.messages.input.checkbox.sections.badge.label, role: 'information' },
                 status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
-            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section, key) => (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab", slot: `tab_content-${key + 1}` }, section, { key: section.messages.title }), section.checkboxes.length > 0 && section.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: section.messages.tooltip }, h("mg-button", { variant: "link", onClick: section.handleMassAction }, section.messages.action))))))));
+            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
+            var _a;
+            return (h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
+        })));
     }
     /**
      * render checkbox multi element
      * @returns html element
      */
     renderCheckboxMulti() {
+        var _a;
         const selectedValuesNb = this.getSelectedItems().length;
-        const checkboxes = this.getDisplayItems();
-        const checkboxPaginatedProps = {
+        const props = {
             readonly: this.readonly,
             disabled: this.disabled,
-            identifier: this.identifier,
+            checkboxes: this.getDisplayItems(),
         };
+        const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
         return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
                 if (el !== null)
                     this.mgPopover = el;
             } }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
             h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
-            this.searchValue.length > 0 ? (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab" }, checkboxPaginatedProps, { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), checkboxes: checkboxes, key: "search" }))) : (this.renderCheckboxTabs(checkboxes, checkboxPaginatedProps)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid })))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
+            this.searchValue.length > 0 ? h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
+        ]) : (h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -578,7 +595,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: 'c5797a119a653c27004a171b7b79be7d4504800d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '11b725ebb111707aaf7dc39d191fe6a9efb25ea6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -598,13 +615,14 @@ export class MgInputCheckbox {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "CheckboxValue[]",
-                    "resolved": "CheckboxValue[]",
+                    "original": "ICheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
-                        "CheckboxValue": {
+                        "ICheckboxValue": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxValue"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::ICheckboxValue",
+                            "referenceLocation": "ICheckboxValue"
                         }
                     }
                 },
@@ -627,7 +645,8 @@ export class MgInputCheckbox {
                         "CheckboxType": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType",
+                            "referenceLocation": "CheckboxType"
                         }
                     }
                 },
@@ -869,7 +888,8 @@ export class MgInputCheckbox {
                         "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"
                         }
                     }
                 },
@@ -1010,7 +1030,8 @@ export class MgInputCheckbox {
             "searchValue": {},
             "searchResults": {},
             "selectValuesButtonKey": {},
-            "activeTab": {}
+            "activeTab": {},
+            "paginatedLimits": {}
         };
     }
     static get events() {
@@ -1026,7 +1047,7 @@ export class MgInputCheckbox {
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
-                    "resolved": "CheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
                         "HTMLMgInputCheckboxElement": {
                             "location": "global",

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

@@ -758,7 +758,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'd16350f2e21e492932e7264c076454a249e1f5f2', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, 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 ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+        return (h("mg-input", { key: 'd19136f775e89188dcecf78a004abd1bc8048174', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, 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 ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
@@ -806,7 +806,8 @@ export class MgInputCombobox {
                         "Option": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -831,7 +832,8 @@ export class MgInputCombobox {
                         "Option": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -1053,7 +1055,8 @@ export class MgInputCombobox {
                         "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"
                         }
                     }
                 },
@@ -1098,7 +1101,8 @@ export class MgInputCombobox {
                         "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"
                         }
                     }
                 },
@@ -1198,12 +1202,14 @@ export class MgInputCombobox {
                         "RequestMappingType": {
                             "location": "import",
                             "path": "./mg-input-combobox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::RequestMappingType"
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::RequestMappingType",
+                            "referenceLocation": "RequestMappingType"
                         },
                         "ResponseMappingType": {
                             "location": "import",
                             "path": "./mg-input-combobox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::ResponseMappingType"
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::ResponseMappingType",
+                            "referenceLocation": "ResponseMappingType"
                         }
                     }
                 },

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

@@ -357,7 +357,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '53d23a27355884d3b3ac996188f619ad325d58b6', 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 && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '0c3e08b8c467207110ef75f7d2516c36adc2ec4c', 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 && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -621,7 +621,8 @@ export class MgInputDate {
                         "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-file/mg-input-file.js

@@ -332,9 +332,9 @@ export class MgInputFile {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '48337d8e0a059dbea60c4bfa152468429b37b897', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'b0a67412ce2a054ce84f001efe01156bfce001a1', class: "mg-c-input__file-container" }, h("input", { key: '0585b37ac4da8e5b29b94c04a298cfd8451016c9', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+        return (h("mg-input", { key: '075d0b55b004653115305f5dd0d6bc897fd3e9ed', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '16ce644751bf7e4a23876ed59e7076625661794c', class: "mg-c-input__file-container" }, h("input", { key: 'e00df3de20567ef52825ca002b838a81e586c777', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
                 this.inputElement = el;
-            } }), h("mg-button", { key: '0c71ea34375f60a357ad2aa38353c7acafc1091a', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+            } }), h("mg-button", { key: '92e356bd08d09070b4c58c525ef91ab6bdc64b74', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
                 this.fileButtonElement = el;
             } }, this.messages.input.file.browse), this.renderFiles())));
     }
@@ -615,7 +615,8 @@ export class MgInputFile {
                         "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-numeric/mg-input-numeric.js

@@ -460,7 +460,7 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '4529f67fe43372530d723e8e8a7a6c44f5057bbd', 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 && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '9bea775c3e8d7339a45d18aeb1b3974d6da9a650', 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 && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -728,7 +728,8 @@ export class MgInputNumeric {
                         "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"
                         }
                     }
                 },
@@ -772,7 +773,8 @@ export class MgInputNumeric {
                         "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"
                         }
                     }
                 },
@@ -817,7 +819,8 @@ export class MgInputNumeric {
                         "NumericType": {
                             "location": "import",
                             "path": "./mg-input-numeric.conf",
-                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::NumericType"
+                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::NumericType",
+                            "referenceLocation": "NumericType"
                         }
                     }
                 },
@@ -843,7 +846,8 @@ export class MgInputNumeric {
                         "Format": {
                             "location": "import",
                             "path": "./mg-input-numeric.conf",
-                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::Format"
+                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::Format",
+                            "referenceLocation": "Format"
                         }
                     }
                 },