@mgdis/mg-components 6.14.0 → 6.16.0

package/dist/components/mg-illustrated-message.js

@@ -90,7 +90,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'f2bcf91e8d639736514a55a73d0182339eda1455', class: this.classCollection.join() }, h("div", { key: '46f862fc2a3daf2f217c55feebd41abb76252de2', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'e2a0e9752a6739a684fd2668a8e8f0f792a0c38b', name: "illustration" })), h("div", { key: 'b037dd43ae59c07ca122b68b56dc3230a7aa94f2', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '3a99f08cfb68bd51fbd015d213bb462acbfdda1a', name: "title" }), h("slot", { key: '14490ee1e7f9470f433c6249d502bd0a4dd77ca3', name: "details" }))));
+        return (h("div", { key: 'b7cea46c2fad219e02009fa44c772c0a09a5234f', class: this.classCollection.join() }, h("div", { key: '56b956ee405886ef2de2ef413ac1bc6902f287b3', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '33183d226a2443ccf1763ebff4c48f670d1d77ec', name: "illustration" })), h("div", { key: '69a7e034da7e2aef8dc488f9275b4546e905513c', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '0eb9d5126f3d13380ea0a13a9eb754a7543e4178', name: "title" }), h("slot", { key: '088d3bae3be0d5e5d9fc8c07fee42dda39177fd6', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -98,7 +98,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         "direction": ["watchDirection"]
     }; }
     static get style() { return mgIllustratedMessageCss; }
-}, [1, "mg-illustrated-message", {
+}, [257, "mg-illustrated-message", {
         "size": [1],
         "direction": [1],
         "classCollection": [32]

package/dist/components/mg-input-checkbox-paginated2.js

@@ -1,31 +1,14 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './mg-button2.js';
-import { d as defineCustomElement$7 } from './mg-icon2.js';
-import { d as defineCustomElement$6 } from './mg-input2.js';
-import { d as defineCustomElement$5 } from './mg-input-select2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-pagination2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
-
-/**
- * List of all availables checkbox type
- */
-const checkboxTypes = ['checkbox', 'multi'];
-/**
- * mg-input-checkbox-paginated section kind value
- */
-const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
-};
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { f as formatID } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-button2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
  * Get checkboxes list template
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
+const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
@@ -36,11 +19,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
     constructor() {
         super();
         this.__registerHost();
-        this.massAction = createEvent(this, "mass-action", 7);
-        /*************
-         * Constantes *
-         *************/
-        this.offset = 10;
+        this.step = 10;
         /*************
          * Decorators *
          *************/
@@ -53,76 +32,45 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
          */
         this.disabled = false;
         /**
-         * Current page
+         * Page items limit to display
          */
-        this.currentPage = 1;
-        /**
-         * Define checkboxes to paginate
-         */
-        this.checkboxes = [];
-        /**
-         * Is checked items values expanded
-         */
-        this.expanded = true;
+        this.limit = this.step;
         /***********
          * Methods *
          ***********/
         /**
-         * Mass action handler
+         * Component has next checkboxes to display
+         * @returns truthy if have next elements
          */
-        this.massActionHandler = () => {
-            this.massAction.emit(this.sectionKind);
+        this.hasNext = () => {
+            return this.checkboxes.length > this.limit;
         };
         /**
-         * Toggle items button handler
+         * Set items from checkboxes and limit
          */
-        this.handleToggleClick = () => {
-            this.expanded = !this.expanded;
+        this.setItems = () => {
+            this.items = this.checkboxes.slice(0, this.limit);
         };
         /**
-         * Method to get a array range
-         * @param from - array start index
-         * @param to - array end index
-         * @returns array's range
-         */
-        this.getArrayRange = (array, from, to) => array.slice(from, to);
-        /**
-         * Method to get page count from items
-         * @param items - items to count
-         * @returns page count from items
-         */
-        this.getPageCount = (items) => ((items === null || items === void 0 ? void 0 : items.length) > 0 ? Math.ceil(items.length / this.offset) : 0);
-        /**
-         * Handle mg-pagination current page change event
-         * @param event - pagination current page change event
+         * Handle load-more <mg-button> click event
          */
-        this.handleCurrentPageChange = (event) => {
-            this.currentPage = Number(event.detail);
+        this.handleLoadMore = () => {
+            if (this.hasNext()) {
+                this.limit += this.step;
+            }
         };
     }
-    watchCheckboxes(newValue, oldValue) {
-        const pageCountNewValue = this.getPageCount(newValue);
-        const pageCountOldValue = this.getPageCount(oldValue);
-        // after each array.length update we reset pagination
-        // when items fill on page, we set current page to 1
-        if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {
-            this.currentPage = 1;
-        }
-        // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page
-        else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {
-            this.currentPage--;
-        }
-        this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;
+    watchCheckboxes() {
+        this.setItems();
+    }
+    watchLimit() {
+        this.setItems();
     }
     /**
-     * Get from and to index
-     * @returns [from,to] index
+     * Method to reset limit
      */
-    getFromToIndexes() {
-        const isFirstPage = this.currentPage === 1;
-        const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;
-        const to = isFirstPage ? this.offset : this.currentPage * this.offset;
-        return [from, to];
+    async resetLimit() {
+        this.limit = this.step;
     }
     /*************
      * Lifecycle *
@@ -131,39 +79,39 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
      * Validate props
      */
     componentWillLoad() {
-        this.watchCheckboxes(this.checkboxes);
+        this.watchCheckboxes();
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
-        const [from, to] = this.getFromToIndexes();
-        const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { key: 'ee67aa1705efa2b88010748b6978e0c1dec6e4de', hidden: this.checkboxes.length < 1 }, h("div", { key: 'b713e2a0e21f57d3b238b72163f3d7a4781b7026', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded && this.checkboxes.some(checkbox => checkbox.value === true && checkbox.disabled !== true)) ||
-            (this.sectionKind === SectionKind.NOT_SELECTED && this.checkboxes.some(checkbox => checkbox.value === false && checkbox.disabled !== true))) && (h("mg-tooltip", { key: '7e5cba3b03cdc7bab68650b9aed36c195ca4dfe6', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: '4980f26ade12cbfaa6ef6041fa84918900cb652a', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '950b07ea9c59e8bc21e236bf32e3bf0a9318a008', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: '276f679e01756d6d60f043dc1c04807b5058750a', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        const listId = formatID(this.messages.label);
+        const tabId = 'tab-info';
+        return (h(Host, { key: '8e58037e78fcd7990bbd681053758b0ec4d0c4e0' }, h("slot", { key: 'c64e9c8f65a526b2289d3663fff64df02a282c96', name: "header-action" }), h("div", { key: 'c5953bb7e970384b231865d7fa4708fe2da4b407', class: "mg-c-input__tabs-content" }, h("p", { key: 'c0899cb7e7a6dea282f05aacf0fb05acd60a9d20', 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 && (h(MgInputCheckboxList, { key: '0bb1b4160d75b00d3fb5d9c08f3a560a16105e57', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (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 }, h("mg-icon", { key: 'fd1560d7254f437f284925427130f69539b5fd3b', icon: "chevron-down" }), this.messages.showMore)))));
     }
     static get watchers() { return {
-        "checkboxes": ["watchCheckboxes"]
+        "checkboxes": ["watchCheckboxes"],
+        "limit": ["watchLimit"]
     }; }
-}, [2, "mg-input-checkbox-paginated", {
+}, [262, "mg-input-checkbox-paginated", {
         "readonly": [4],
         "disabled": [4],
         "name": [1],
         "invalid": [4],
-        "currentPage": [1026, "current-page"],
         "checkboxes": [16],
         "messages": [16],
-        "expanded": [32]
+        "limit": [32],
+        "resetLimit": [64]
     }, undefined, {
-        "checkboxes": ["watchCheckboxes"]
+        "checkboxes": ["watchCheckboxes"],
+        "limit": ["watchLimit"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-pagination", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-checkbox-paginated":
             if (!customElements.get(tagName)) {
@@ -171,41 +119,11 @@ function defineCustomElement() {
             }
             break;
         case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-pagination":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "mg-tooltip-content":
+        case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -214,4 +132,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MgInputCheckboxPaginated as M, SectionKind as S, MgInputCheckboxList as a, checkboxTypes as c, defineCustomElement as d };
+export { MgInputCheckboxPaginated as M, MgInputCheckboxList as a, defineCustomElement as d };

package/dist/components/mg-input-checkbox.js

@@ -1,22 +1,34 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, e as cleanString, i as isValidString, t as toString } from './index2.js';
-import { d as defineCustomElement$a, S as SectionKind, a as MgInputCheckboxList, c as checkboxTypes } from './mg-input-checkbox-paginated2.js';
-import { d as defineCustomElement$b, b as classFieldset, e as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
+import { C as ClassList, m as cleanString, i as isValidString, t as toString } from './index2.js';
+import { d as defineCustomElement$9, a as MgInputCheckboxList } from './mg-input-checkbox-paginated2.js';
+import { d as defineCustomElement$a, b as classFieldset, e as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$f } from './mg-button2.js';
-import { d as defineCustomElement$e } from './mg-card2.js';
-import { d as defineCustomElement$d } from './mg-character-left2.js';
-import { d as defineCustomElement$c } from './mg-icon2.js';
-import { d as defineCustomElement$9 } from './mg-input-select2.js';
+import { d as defineCustomElement$4, S as Status } from './mg-tabs2.js';
+import { d as defineCustomElement$f } from './mg-badge2.js';
+import { d as defineCustomElement$e } from './mg-button2.js';
+import { d as defineCustomElement$d } from './mg-card2.js';
+import { d as defineCustomElement$c } from './mg-character-left2.js';
+import { d as defineCustomElement$b } from './mg-icon2.js';
 import { d as defineCustomElement$8 } from './mg-input-text2.js';
 import { d as defineCustomElement$7 } from './mg-input-title2.js';
-import { d as defineCustomElement$6 } from './mg-pagination2.js';
-import { d as defineCustomElement$5 } from './mg-popover2.js';
-import { d as defineCustomElement$4 } from './mg-popover-content2.js';
+import { d as defineCustomElement$6 } from './mg-popover2.js';
+import { d as defineCustomElement$5 } from './mg-popover-content2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-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-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__sections{max-height:100%;padding-right:var(--mg-b-size-8);overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;min-height:var(--mg-b-size-min-height);flex-wrap:wrap;flex-wrap:nowrap;align-items:center;gap:var(--mg-b-size-8);text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:var(--mg-b-color-neutral-80)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 var(--mg-b-size-12)}.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 .mg-c-input__input-no-result{text-align:center}.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));height:calc(50*var(--mg-b-size-8));max-height:calc(100vh - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-8)}.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)}";
+/**
+ * List of all availables checkbox type
+ */
+const checkboxTypes = ['checkbox', 'multi'];
+/**
+ * mg-input-checkbox-paginated section kind value
+ */
+const SectionKind = {
+    SELECTED: 'selected',
+    NOT_SELECTED: 'not-selected',
+};
+
+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
@@ -45,6 +57,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.searchStart = 10;
         // popover variables
         this.hasOpenedPopover = false;
+        this.checkboxesId = 'checkboxes-list';
         /**
          * Define input name
          * If not set the value equals the identifier
@@ -103,6 +116,10 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Select values button text local key
          */
         this.selectValuesButtonKey = 'editButton';
+        /**
+         * Define <mg-tabs> active-tab
+         */
+        this.activeTab = 1;
         /**
          * Handle input event
          * @param event - input event
@@ -151,6 +168,14 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.searchValue = event.detail;
             event.stopPropagation();
         };
+        /**
+         * Handle <mg-tabs> tab-change event
+         * @param event - tab change event
+         */
+        this.handleActiveTabChange = (event) => {
+            this.activeTab = event.detail;
+            this.resetTabsLimit();
+        };
         /**
          * popover display-change handler
          * @param event - mg-popover display-change custom event
@@ -164,26 +189,11 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             if (!event.detail) {
                 // reset search value
                 this.searchValue = '';
-                // reset pagintated section current page
-                Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {
-                    element.currentPage = 1;
-                });
+                this.resetTabsLimit();
                 this.checkValidity();
             }
-        };
-        /**
-         * Handle select all button
-         * @param event - mass action event trigger a global select/unselect on values
-         */
-        this.handleMassAction = (event) => {
-            const displayItems = this.getDisplayItems();
-            // update only displayed items
-            displayItems.forEach(item => {
-                if (item.disabled !== true) {
-                    item.value = event.detail !== SectionKind.SELECTED;
-                }
-            });
-            this.updateValues();
+            // init active tab to selected if some values are checked
+            this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
         };
         /**
          * Update values
@@ -281,6 +291,14 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @returns selected checkboxItems
          */
         this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
+        /**
+         * Reset <mg-input-checkbox-paginated> limit state
+         */
+        this.resetTabsLimit = () => {
+            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
+                component.resetLimit();
+            });
+        };
         /**
          * Renders the readonly value of the input.
          * @returns The rendered readonly value.
@@ -292,7 +310,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Renders the MgInputCheckboxList component.
          * @returns The rendered MgInputCheckboxList component.
          */
-        this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid }));
+        this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
@@ -516,23 +534,30 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    renderCheckboxBySection(checkboxes) {
+    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
+        const handleMassAction = (kind) => () => {
+            const displayItems = this.getDisplayItems();
+            // update only displayed items
+            displayItems.forEach(item => {
+                if (!item.disabled) {
+                    item.value = kind !== SectionKind.SELECTED;
+                }
+            });
+            this.updateValues();
+        };
         const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
             acc[curr.value ? 0 : 1].push(curr);
             return acc;
         }, [[], []]);
-        const baseSection = {
-            readonly: this.readonly,
-            disabled: this.disabled,
-            identifier: this.identifier,
-        };
         const sections = [
-            Object.assign(Object.assign({}, baseSection), { checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
-            Object.assign(Object.assign({}, baseSection), { checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
+            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) }),
         ];
-        return sections
-            .filter(section => section.checkboxes.length)
-            .map(section => h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction, key: section.messages })));
+        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))))))));
     }
     /**
      * render checkbox multi element
@@ -541,14 +566,18 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
     renderCheckboxMulti() {
         const selectedValuesNb = this.getSelectedItems().length;
         const checkboxes = this.getDisplayItems();
+        const checkboxPaginatedProps = {
+            readonly: this.readonly,
+            disabled: this.disabled,
+            identifier: this.identifier,
+        };
         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.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
-            h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
-            h("div", { key: "sections-container", class: "mg-c-input__sections" }, this.renderCheckboxBySection(checkboxes)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), 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)))));
+            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)))));
     }
     /**
      * Render
@@ -566,7 +595,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: 'a6afc33b5c437000945fca2d825526123a7c4fdf', 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: '84d13ac702497773013daa72357e4d1dcf4ebb30', 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 this; }
     static get watchers() { return {
@@ -582,7 +611,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "searchValue": ["validateSearchValue"]
     }; }
     static get style() { return mgInputCheckboxCss; }
-}, [1, "mg-input-checkbox", {
+}, [257, "mg-input-checkbox", {
         "value": [1040],
         "type": [1025],
         "identifier": [1],
@@ -610,6 +639,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "searchValue": [32],
         "searchResults": [32],
         "selectValuesButtonKey": [32],
+        "activeTab": [32],
         "setFocus": [64],
         "displayError": [64],
         "setError": [64],
@@ -630,44 +660,44 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-checkbox", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-checkbox-paginated", "mg-input-select", "mg-input-text", "mg-input-title", "mg-pagination", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-checkbox", "mg-badge", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-checkbox-paginated", "mg-input-text", "mg-input-title", "mg-popover", "mg-popover-content", "mg-tabs", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-checkbox":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputCheckbox$1);
             }
             break;
-        case "mg-button":
+        case "mg-badge":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "mg-card":
+        case "mg-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "mg-character-left":
+        case "mg-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "mg-icon":
+        case "mg-character-left":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "mg-input":
+        case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "mg-input-checkbox-paginated":
+        case "mg-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "mg-input-select":
+        case "mg-input-checkbox-paginated":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
@@ -682,17 +712,17 @@ function defineCustomElement$1() {
                 defineCustomElement$7();
             }
             break;
-        case "mg-pagination":
+        case "mg-popover":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "mg-popover":
+        case "mg-popover-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "mg-popover-content":
+        case "mg-tabs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }