@mgdis/mg-components 6.22.0 → 6.22.1

package/dist/cjs/{mg-action-more_37.cjs.entry.js → mg-action-more_36.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');
 var index$2 = require('./index-BxB20_Vw.js');
 var events_utils = require('./events.utils-D5SAtkpQ.js');
@@ -169,7 +169,7 @@ const MgActionMore = class {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, index.h("mg-icon", { icon: "chevron-down" })));
         }
-        return (index.h(index.Host, { key: 'bef7d0e0c5a991f321ca930d65fa458873fc7564', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '4e47d1513749cc1ac15ef8febd2fb914e362bbee', class: this.classBase }, index.h("mg-popover", { key: 'ab6dfc93422f03b49a78d2896196aa6901841aef', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: '921f17c4ede5f1783dc336429539b0b082902fdd', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: '19bf9e015cbd82d8dffc62269de735607ab4f2bb' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '56a43a5adebd31264742c0ef8905ccb0bd8fb581', slot: "content" }, index.h("mg-menu", { key: '70520957ac07a3190ef753ee435996af96dbc5b5', direction: directions$1.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (index.h(index.Host, { key: '184355435ec346d682c2df4aa8b33bf5f54e77e7', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '8176489e5dd7741311745d015b8ef7f2a4f63ea9', class: this.classBase }, index.h("mg-popover", { key: '3ee64b21556ee9e910939ad2fc9e3fbf8e4bd964', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: 'cf8f7f4f736d6a8338a4f6eebce04b4e2be49825', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'ee8b4f13bac85ccdd5e9d72edbaa957054c304ec' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '1c78fb9a98d59fa5422c5105ecb13d2f2884c7d2', slot: "content" }, index.h("mg-menu", { key: '522d915d4a38529f7709640bb96eebb81ccc86af', direction: directions$1.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
@@ -691,7 +691,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, index.h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), index.h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, index.h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+        return (index.h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, index.h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), index.h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, index.h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -984,7 +984,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("form", { key: 'b1a6b50f2bbb9b71cecd23d419771cf1b40e13b4', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '9c878f3730a06e1b683240057511b588edf5e887', innerHTML: this.requiredMessageText }), index.h("slot", { key: '3cf5ca0f07e2f3573615cf6566e230f4d5678b31' }), !this.readonly && !this.disabled && index.h("slot", { key: '6cbfd58e9600f7a9d9b55ec23bdd64877c03f0d7', name: "actions" })));
+        return (index.h("form", { key: 'e528a49eba4e57f809dd0a6dd5462c2be3677da5', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '37eb0c30984b998ef8d78ff8ae74949c4761c21a', innerHTML: this.requiredMessageText }), index.h("slot", { key: '8ae80522118a3e87ca735545a48844c1e4e3ab30' }), !this.readonly && !this.disabled && index.h("slot", { key: '4cdeba849881f9753ff08df6c456397e859c6a0d', name: "actions" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1262,7 +1262,7 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'ed3b924f5c5a75706aef03ef8798cb699679012d', class: this.classCollection.join() }, index.h("div", { key: '59b7f7b3fe4ad808377094f93e8b6e86ba2f49ec', class: "mg-c-illustrated-message__illustration" }, index.h("slot", { key: 'd28aa873cd7025647f56f3a4ed62d9e35dde25d3', name: "illustration" })), index.h("div", { key: '3b150411a26531827c988a2d34e2990a2302f982', class: "mg-c-illustrated-message__slots" }, index.h("slot", { key: '8ffea6e50bf5dc4b870d414cb710fc88e0984f61', name: "title" }), index.h("slot", { key: 'ec85b4a50d28ddf14dbd6b0feff59e2030348b68', name: "details" }))));
+        return (index.h("div", { key: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, index.h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, index.h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), index.h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, index.h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), index.h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', name: "details" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1685,8 +1685,9 @@ const checkboxTypes = ['checkbox', 'multi'];
  * mg-input-checkbox-paginated section kind value
  */
 const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
+    NOT_SELECTED: 0,
+    SELECTED: 1,
+    SEARCH: 2,
 };
 
 /**
@@ -1709,10 +1710,46 @@ const Status = {
     ACTIVE: 'active',
 };
 
+/**
+ * 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
+ */
+const MgInputCheckboxPaginated = (props) => {
+    const items = getItems(props.checkboxes, props.limit);
+    const listId = index$1.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 (index.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) && (index.h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, index.h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), index.h("div", { class: "mg-c-input__tabs-content" }, index.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 && (index.h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (index.h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, index.h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
+};
+
 const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}`;
 
 /**
- * type CheckboxItem validation function
+ * type ICheckboxItem validation function
  * @param items - Checkbox item
  * @returns match item type
  */
@@ -1735,6 +1772,7 @@ const MgInputCheckbox = class {
         // "multi" setup
         this.multiStart = 5;
         this.searchStart = 10;
+        this.paginatedStep = 10;
         // popover variables
         this.hasOpenedPopover = false;
         this.checkboxesId = 'checkboxes-list';
@@ -1800,6 +1838,10 @@ const MgInputCheckbox = class {
          * Define <mg-tabs> active-tab
          */
         this.activeTab = 1;
+        /**
+         * Paginated sections limit per key
+         */
+        this.paginatedLimits = {};
         /**
          * Handle input event
          * @param event - input event
@@ -1845,8 +1887,9 @@ const MgInputCheckbox = class {
          * @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
@@ -1978,9 +2021,15 @@ const MgInputCheckbox = class {
          * 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.
@@ -2001,7 +2050,7 @@ const MgInputCheckbox = class {
             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: ${index$1.toString(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, ICheckboxItem. Passed value: ${index$1.toString(newValue)}.`);
         }
     }
     validateType(newValue) {
@@ -2226,7 +2275,7 @@ const MgInputCheckbox = class {
      * @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
@@ -2237,39 +2286,43 @@ const MgInputCheckbox = class {
             });
             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 (index.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) => (index.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) && (index.h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: section.messages.tooltip }, index.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 (index.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 (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
                 if (el !== null)
                     this.mgPopover = el;
             } }, index.h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, index.h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), index.h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
             index.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 ? (index.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)),
-        ]) : (index.h(MgInputCheckboxList, { checkboxes: checkboxes, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid })))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
+            this.searchValue.length > 0 ? index.h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
+        ]) : (index.h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -2287,7 +2340,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (index.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 (index.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));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -2329,90 +2382,6 @@ const MgInputCheckbox = class {
 };
 MgInputCheckbox.style = mgInputCheckboxCss();
 
-const MgInputCheckboxPaginated = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.step = 10;
-        /*************
-         * Decorators *
-         *************/
-        /**
-         * Define if mg-input-checkbox-list is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if mg-input-checkbox-list is disabled
-         */
-        this.disabled = false;
-        /**
-         * Page items limit to display
-         */
-        this.limit = this.step;
-        /***********
-         * Methods *
-         ***********/
-        /**
-         * Component has next checkboxes to display
-         * @returns truthy if have next elements
-         */
-        this.hasNext = () => {
-            return this.checkboxes.length > this.limit;
-        };
-        /**
-         * Set items from checkboxes and limit
-         */
-        this.setItems = () => {
-            this.items = this.checkboxes.slice(0, this.limit);
-        };
-        /**
-         * Handle load-more <mg-button> click event
-         */
-        this.handleLoadMore = () => {
-            if (this.hasNext()) {
-                this.limit += this.step;
-            }
-        };
-    }
-    watchCheckboxes() {
-        this.setItems();
-    }
-    watchLimit() {
-        this.setItems();
-    }
-    /**
-     * Method to reset limit
-     */
-    async resetLimit() {
-        this.limit = this.step;
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Validate props
-     */
-    componentWillLoad() {
-        this.watchCheckboxes();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        const listId = index$1.formatID(this.messages.label);
-        const tabId = 'tab-info';
-        return (index.h(index.Host, { key: 'ce0fe4a842cc21f7f981b6a9286d592c2c28819b' }, index.h("slot", { key: '683c26f98e76262c565613529c76e7f3b27efbc5', name: "header-action" }), index.h("div", { key: 'eb9e9bfa54a467b44f4e90a8575ae8b1fe40ea10', class: "mg-c-input__tabs-content" }, index.h("p", { key: '6eeb40f89a0cc0b8ea0837f44babe8cd440ced0f', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (index.h(MgInputCheckboxList, { key: '1625b0bdbb1de6ef0c55850e3a08a2cf322da317', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (index.h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, index.h("mg-icon", { key: '8f10cc6152899cf869023ff1c465763e9a05d7b6', icon: "chevron-down" }), this.messages.showMore)))));
-    }
-    static get watchers() { return {
-        "checkboxes": [{
-                "watchCheckboxes": 0
-            }],
-        "limit": [{
-                "watchLimit": 0
-            }]
-    }; }
-};
-
 const DEFAULT_MAX_DATE = '9999-12-31';
 
 const mgInputDateCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}`;
@@ -2773,7 +2742,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.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 (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.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;
             } }))));
@@ -3274,7 +3243,7 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 (index.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()
             : [
                 index.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) => {
@@ -3578,7 +3547,7 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '7154d79c2c609f47ae7c9542cffd1c92d26ce383', 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.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: 'bfa5f289eb4d357c21cd9a753550bab1df846df8', 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.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
@@ -3895,7 +3864,7 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'bdeb5a98bc7f4567beb293c1fcf4f99169089fa6', 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 ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (index.h("mg-input", { key: 'a24a80156ef3e7760d02a52900d93099cd570db8', 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 ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index$1] = el;
             } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
@@ -4060,11 +4029,19 @@ const MgInputSelect = class {
             }
         };
         /**
-         * Method to compare item.title with input.value
+         * Method to compare item 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); };
+        this.isInputValue = (item) => {
+            if (this.input === undefined)
+                return false;
+            // String items keep native DOM values.
+            if (index$1.allItemsAreString(this.items))
+                return item.title === this.input.value;
+            // Object items use stringified values.
+            return index$1.toString(item.value) === this.input.value;
+        };
         /**
          * Handle blur event
          */
@@ -4109,7 +4086,10 @@ const MgInputSelect = class {
          * @param option - to render
          * @returns render option
          */
-        this.renderOption = (option) => (index.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) => {
+            const serializedValue = index$1.allItemsAreString(this.items) ? option.title : index$1.toString(option.value);
+            return (index.h("option", { key: serializedValue, value: serializedValue, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
+        };
     }
     validateValue(newValue) {
         setTimeout(() => {
@@ -4303,7 +4283,7 @@ const MgInputSelect = class {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.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) => {
+        return (index.h("mg-input", { key: '7d544e8f67a37d5781697da10d3d4f47cc5027e3', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.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
@@ -4719,7 +4699,7 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 (index.h("mg-input", { key: '068e38b82ef4e2254fb8d37f21ecf11dc4f3a012', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 index.h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
@@ -5064,7 +5044,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
+        return (index.h("mg-input", { key: '021aa902aa952730d98fbc2eaa5136975b484319', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -5434,7 +5414,7 @@ const MgInputToggle = class {
      */
     render() {
         const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (index.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 (index.h("mg-input", { key: '3f440a16156b4fc89590addba025b350218ccf9c', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && index.h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (index.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;
             } }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
@@ -5784,7 +5764,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '17b5111014e866939f58170452ca74ee40c8454c', role: "list", "aria-label": this.label }, index.h("slot", { key: '7c2a9aafccbc7526c74acaf7a505d7a33befc5ad' })));
+        return (index.h(index.Host, { key: 'c16a69485fabb9a7a91efe032501fafa98862882', role: "list", "aria-label": this.label }, index.h("slot", { key: 'f5bca6fdb93d9273e5fcc753d2c58c0a0504c0d0' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -6296,9 +6276,9 @@ const MgMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '516691c613b30edf92d43fb9596169459dd8058a', class: this.classCollection.join() }, index.h("mg-card", { key: '2be929dd6ed5458927b155d2f4c94fa15f9717e9', shadow: true }, this.variantStyle === 'bar-left' && index.h("span", { key: '604d5a7bd37abc571b40f8be09ac5dadbde69ec1', class: "mg-c-message__bar" }), index.h("span", { key: '837cce7c506997955de6efb4cffc53e5107fb602', class: "mg-c-message__icon" }, index.h("mg-icon", { key: '3fd70f747cad5605f129bec491aa1bfd5ea42a95', icon: this.getIcon() })), index.h("div", { key: 'bf0b166fee2c94014fc35980b06a45dfc91b8596', class: "mg-c-message__content" }, index.h("span", { key: '305f79545b87055a954831c7355e7685340d1aa6', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'd25113f6305d8ceaa39d12672fecc4e4bf6ffb49' })), this.hasActions && [
+        return (index.h("div", { key: 'f99bf527eb2c6005eeaec11f89aaa08f8865ea57', class: this.classCollection.join() }, index.h("mg-card", { key: 'beede3cd97b022d947c216b6bba454a104ba5790', shadow: true }, this.variantStyle === 'bar-left' && index.h("span", { key: '515828d725a996c9d57b39ad75e9373150a1b78a', class: "mg-c-message__bar" }), index.h("span", { key: '02ae41c66af25c2611b9b6cb8c87a1ad99346fa3', class: "mg-c-message__icon" }, index.h("mg-icon", { key: '3eadb40ed0dfa5ec51155608a67769c5fee3d402', icon: this.getIcon() })), index.h("div", { key: 'b832251e8f330d00b512bcd508ae9bf6e5f511cb', class: "mg-c-message__content" }, index.h("span", { key: 'c3520fc49bd5c3c187a83823050ceb9ca8c12d46', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'f4064dff9536cbb76e45c5c4c1a89621da9531b2' })), this.hasActions && [
             index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '744098ecfdcc8bb5f5e0b913884126498c21d3f0', name: "actions" })),
+            index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b', name: "actions" })),
         ]))));
     }
     get element() { return index.getElement(this); }
@@ -6424,11 +6404,11 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("dialog", { key: 'fe7c7abaf53fbc5c87d2855cc72de2212dfe8642', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (index.h("dialog", { key: '2d99322fd3c80b8cbfea70589cf579e0c1c6f06b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, index.h("mg-card", { key: '4b361ad45cd0b20253cf82e8f68c574429dd451c', shadow: true }, index.h("div", { key: '90f5490fb82f2900403f0a7549b338e884eea171', class: "mg-c-modal__dialog" }, index.h("header", { key: 'a58be90f41ad4448c387b1d18372aa31522d8d35', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'd9a0f9c1944b89b4a64f35fc9c1b70bea60f5423', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'd7ecae6a2c2b2b094fea6b4a6d3c761f0f975b29', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '54b91decfd0deb5e452e03c23f68bac58d97677a', icon: "cross" })))), index.h("h1", { key: '7dc2519bdf97ebc5cc18505fbbd347c7b1a4c336', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: 'b6a27c0bb6e5a350e10addbd0325b04626b07239', class: "mg-c-modal__content" }, index.h("slot", { key: '41acebdafae6289d2f03fc3226eb7f3c4334e33f' })), this.hasActions && (index.h("footer", { key: '04a934a044bfbfa64f65642361e1962d2f599bf9', class: "mg-c-modal__footer" }, index.h("slot", { key: '8d72488a4095c245b638d7d0e5fdbda77fa5ab01', name: "actions" })))))));
+            } }, index.h("mg-card", { key: '32692a6d41ef30b3d3e61ddcfea47350d374ed09', shadow: true }, index.h("div", { key: 'c87bb43bb069671b65a9759ee293e77975707597', class: "mg-c-modal__dialog" }, index.h("header", { key: '1272a946878efcf8c69f3b09852ba6938cbe31b0', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: '0704656c7c5ac4c8d405f2cd673e91f72763ee8f', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: '4402971c763ee34145de5bd69d367fde68f9d1a2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '9e16add6a3e387971507a252671c895b6c94a586', icon: "cross" })))), index.h("h1", { key: '3e4fc2b4419398528565d382b728b8b752758ddd', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: '170ff6bd9592687baa4c561615f540ad1c7400e4', class: "mg-c-modal__content" }, index.h("slot", { key: 'cb710e2a57e4c997deac367169b56047af1200b1' })), this.hasActions && (index.h("footer", { key: '1e08d67caeaaaf75eb97faa11528719ea537c24c', class: "mg-c-modal__footer" }, index.h("slot", { key: '461ec8e4117477aef08dc6d346ad0bf6007ec12d', name: "actions" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -6840,7 +6820,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (index.h("section", { key: 'e92b270e15717a1b6ab7d938674ccd785fe3ee97', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '40647ea277463f5e915c2fb5aa982f22527545ea', shadow: this.shadow }, index.h("header", { key: '604611af47d683cf1f0d3ffc8b5873be390e3fb9', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: 'ff640071dd4813aa113f5928b2a0350f4528a22c', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: 'fe54d2ca332c573e8dfa782a3e72454501b47adf' })))));
+        return (index.h("section", { key: '3662204d763051c34ea13de4b7b3f7abc7914b81', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '46f113258172b1d040f65a4d312554b0c0551489', shadow: this.shadow }, index.h("header", { key: '1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: 'ab0aec831cc79d982b7556d6e245c80ae2979083', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: 'e831573fe9d5ff783073d123b7e2a54baad73bfc' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8902,7 +8882,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '530971c84be3edae39c5aed0013d0c5b9005a1c1' }, index.h("slot", { key: '6e717bc8c5aa3d58fc048c4232e706cc78ab66ec' }), index.h("slot", { key: 'e779db01e55a28ffaedde21e9944f5ef3c79fa29', name: "content" })));
+        return (index.h(index.Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, index.h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), index.h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8968,7 +8948,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '56962c792e0015e1b52f8121914829b7da136283' }, index.h("mg-card", { key: '05b557704fd10e1be87e1931fe672f5c29d3afc4', class: this.classCollection.join(), shadow: true }, this.closeButton && (index.h("mg-button", { key: 'd2fc38c5be7ea92d0d0efc36133d6c683baa4e68', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '5d2091d064f3908a291af3b90acaddc59e2b9268', icon: "cross" }))), index.h("div", { key: 'd599231cfe330cdbc73f4bf7553b2cc66baf4889', class: "mg-c-popover-content__title" }, index.h("slot", { key: 'fbb836bac9d9f5f2327ecba13ddc3b1cab974930', name: "title" })), index.h("slot", { key: 'bdb29d255f35931efa24be57c13c4303ba326778', name: "content" })), index.h("slot", { key: 'b09b667ea04096baaeac07fac9097a3a22335f2b', name: "arrow" })));
+        return (index.h(index.Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, index.h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (index.h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), index.h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, index.h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), index.h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), index.h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -9013,7 +8993,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("nav", { key: 'b126d6fe3aa2553562fe18a0d4340205e178fbe0', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: '1028704238d5119f67cf2e7a77282dec504bbc4f', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (index.h("nav", { key: '5bf4427662bdca6512969bee91aa03f43a126743', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: '1d2b2a56b3960f70a3d37b333c77bf686643e0fd', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9547,7 +9527,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'c971ca94267dd64a173740d9d7a81c0ea00852b9', class: this.classCollection.join() }, index.h("header", { key: 'd160fdca50842a310fe2b710f8ffcc6f7cd1bd3d', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
+        return (index.h("div", { key: 'c58c255ddffc83ad6d911d37f626bcadaea61747', class: this.classCollection.join() }, index.h("header", { key: 'ba6d581a4a8bc4338d6341372c267a28df882113', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -10098,7 +10078,6 @@ exports.mg_icon = MgIcon;
 exports.mg_illustrated_message = MgIllustratedMessage;
 exports.mg_input = MgInput;
 exports.mg_input_checkbox = MgInputCheckbox;
-exports.mg_input_checkbox_paginated = MgInputCheckboxPaginated;
 exports.mg_input_date = MgInputDate;
 exports.mg_input_numeric = MgInputNumeric;
 exports.mg_input_password = MgInputPassword;

package/dist/cjs/mg-alert.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');
 var index$2 = require('./index-BxB20_Vw.js');
 
@@ -155,7 +155,7 @@ const MgAlert = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-message", { key: '6085a45d00c4762bae88d98e89f44c20d5f9b6c4', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, index.h("slot", { key: '55491d1b41609883958680c14a2ddb8dd84a3bd4' }), this.hasActions ? (index.h("span", { slot: "actions" }, index.h("slot", { name: "actions" }))) : (index.h("span", { class: "mg-c-alert__close-button" }, index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" }))))));
+        return (index.h("mg-message", { key: '9041d8643bf4d0d44f20d30ac3c1d9aa46d6e060', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, index.h("slot", { key: '94d1a430e9af605fa2ea2b557e82fc15f1cc148b' }), this.hasActions ? (index.h("span", { slot: "actions" }, index.h("slot", { name: "actions" }))) : (index.h("span", { class: "mg-c-alert__close-button" }, index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mg-breadcrumb.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');
 
@@ -46,7 +46,7 @@ const MgBreadcrumb = class {
         this.messages = index$2.initLocales(this.element).messages.breadcrumb;
     }
     render() {
-        return (index.h("nav", { key: '5181512072a7de6e161adcbb9988ae3407f61301', "aria-label": this.messages.label, class: "mg-c-breadcrumb" }, index.h("ol", { key: '2a4cec366a72027091ebcbccd78d552884005b93', class: "mg-c-breadcrumb__list" }, this.items.map((item, index$1) => {
+        return (index.h("nav", { key: 'af5c541e6a268af67762eb9d384269511fe0be17', "aria-label": this.messages.label, class: "mg-c-breadcrumb" }, index.h("ol", { key: 'b5fdfe61eb2c826b3462bdd65cacfb73d4f00484', class: "mg-c-breadcrumb__list" }, this.items.map((item, index$1) => {
             var _a;
             return (index.h("li", { key: `${index$1}-${(_a = item.href) !== null && _a !== void 0 ? _a : item.label}`, class: "mg-c-breadcrumb__list-item" }, this.renderItem(item, index$1 === this.items.length - 1)));
         }))));