@mgdis/mg-components 6.14.0 → 6.15.0

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

@@ -1,22 +1,36 @@
 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 defineErrorMessage } from './mg-input.utils.js';
+import { d as defineCustomElement$4, S as Status } from './mg-tabs2.js';
+import { d as defineCustomElement$g } from './mg-badge2.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$c } from './mg-details2.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__error-details{margin:0}.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 +59,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 +118,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 +170,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 +191,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
@@ -217,8 +229,18 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
+            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && !this.hasInvalidInput() && this.validateRequired()));
         };
+        /**
+         * Test if component has items
+         * @returns truthy if component has items
+         */
+        this.hasInputValue = () => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
+        /**
+         * Test if component has no value error message displayed
+         * @returns truthy if compent display no value error message
+         */
+        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Set button text locale key
          */
@@ -260,12 +282,25 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             // Set error message
             this.errorMessage = undefined;
             if (displayError && !this.valid) {
-                if (errorMessage !== undefined)
+                if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
-                else if (!this.validateRequired())
+                }
+                else if (!this.hasInputValue()) {
+                    this.errorMessage = this.messages.errors.noValue;
+                }
+                else if (!this.validateRequired()) {
                     this.errorMessage = this.messages.errors.required;
+                }
             }
         };
+        /**
+         * Reset error message
+         */
+        this.resetErrorMessage = () => {
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        };
         /**
          * Method to get mg-popover identifier
          * @returns MgPopover identifier
@@ -281,23 +316,45 @@ 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.
          */
         this.renderReadonly = (readonlyValue) => {
-            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
+            if (Array.isArray(readonlyValue)) {
+                if (this.inputVerticalList) {
+                    return (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value))))));
+                }
+                else {
+                    return h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', '));
+                }
+            }
         };
         /**
          * 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)) {
+        if ([null, undefined].includes(newValue) || newValue.length === 0) {
+            this.displayError();
+        }
+        else if (newValue.length > 0 && isCheckboxItems(newValue)) {
             this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
             this.valueChange.emit(newValue);
+            // force to reset error when noValueError is displaied
+            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
+                this.resetErrorMessage();
+            }
         }
         else {
             throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
@@ -441,9 +498,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
+                    this.resetErrorMessage();
                     resolve();
                 });
             });
@@ -516,23 +571,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,22 +603,27 @@ 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
      * @returns HTML Element
      */
     render() {
+        var _a;
         let inputContent;
-        const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
+        const readonlyValue = ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(({ value }) => value).map(({ title }) => title);
         if (this.readonly) {
             inputContent = this.renderReadonly(readonlyValue);
         }
@@ -566,7 +633,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: '6b1a72d80387da057c0d20367e141c90ff921889', 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 ? defineErrorMessage(this.errorMessage, this.noValueErrorDetail) : undefined }, inputContent));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -582,7 +649,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],
@@ -603,6 +670,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "editButtonMessage": [1, "edit-button-message"],
         "showButtonMessage": [1, "show-button-message"],
         "selectButtonMessage": [1, "select-button-message"],
+        "noValueErrorDetail": [1, "no-value-error-detail"],
         "classCollection": [32],
         "errorMessage": [32],
         "checkboxItems": [32],
@@ -610,6 +678,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "searchValue": [32],
         "searchResults": [32],
         "selectValuesButtonKey": [32],
+        "activeTab": [32],
         "setFocus": [64],
         "displayError": [64],
         "setError": [64],
@@ -630,13 +699,18 @@ 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-details", "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-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
         case "mg-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
@@ -652,22 +726,22 @@ function defineCustomElement$1() {
                 defineCustomElement$d();
             }
             break;
-        case "mg-icon":
+        case "mg-details":
             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 +756,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();
             }