npm - @mgdis/mg-components - Versions diffs - 5.21.1 → 5.23.0 - Mend

@mgdis/mg-components 5.21.1 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (248) hide show

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

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as isTagName } from './components.utils.js';
+import { _ as _e } from './index.es.js';
 const mgIllustratedMessageCss = ".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
+const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
 const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustratedMessage extends HTMLElement {
     constructor() {
@@ -20,7 +21,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-        if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!_e(this.element.querySelector('[slot="title"]'), headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -42,7 +43,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
             } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
     }
     get element() { return this; }
-    static get style() { return mgIllustratedMessageCss; }
+    static get style() { return MgIllustratedMessageStyle0; }
 }, [1, "mg-illustrated-message", {
         "size": [1],
         "direction": [1]

package/dist/components/mg-illustrated-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ysCAAysC;;~~MCQ5tCA~~,sBAAoB;;;;;oBAaK,SAAS;yBAKE,UAAU;;;;;;;;IASzD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,~~CAAC~~,~~SAAS~~,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACxG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,WACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,WACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage"],"sources":["../styles/dist/components/mg-illustrated-message.css?tag=mg-illustrated-message&encapsulation=shadow","src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"sourcesContent":[".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}/# sourceMappingURL=mg-illustrated-message.css.map /\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '~~../../../utils~~/~~components.utils~~';\n\n@Component({\n tag: 'mg-illustrated-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n shadow: true,\n})\nexport class MgIllustratedMessage {\n /*************\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgIllustratedMessageElement;\n\n /\n Define illustration size\n /\n @Prop() size: 'regular' \| 'small' = 'regular';\n\n /\n Define component orientation\n /\n @Prop() direction: 'vertical' \| 'horizontal' = 'vertical';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentDidLoad(): void {\n const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n } else if (slottedIllustrations.length !== 1) {\n throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n }\n\n slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-c-illustrated-message': true,\n 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n }}\n >\n <div\n class={{\n 'mg-c-illustrated-message__illustration': true,\n 'mg-c-illustrated-message__illustration--small': this.size === 'small',\n }}\n >\n <slot name=\"illustration\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__slots\">\n <div class=\"mg-c-illustrated-message__title\">\n <slot name=\"title\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__details\">\n <slot name=\"details\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ysCAAysC,CAAC;AAC1uC,mCAAe,uBAAuB;;MCOzBA,sBAAoB;;;;;oBAaK,SAAS;yBAKE,UAAU;;;;;;;;IASzD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAACC,EAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACxG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,WACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,WACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage","isTagName"],"sources":["../styles/dist/components/mg-illustrated-message.css?tag=mg-illustrated-message&encapsulation=shadow","src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"sourcesContent":[".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}/# sourceMappingURL=mg-illustrated-message.css.map /\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-illustrated-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n shadow: true,\n})\nexport class MgIllustratedMessage {\n /*************\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgIllustratedMessageElement;\n\n /\n Define illustration size\n /\n @Prop() size: 'regular' \| 'small' = 'regular';\n\n /\n Define component orientation\n /\n @Prop() direction: 'vertical' \| 'horizontal' = 'vertical';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentDidLoad(): void {\n const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n } else if (slottedIllustrations.length !== 1) {\n throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n }\n\n slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-c-illustrated-message': true,\n 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n }}\n >\n <div\n class={{\n 'mg-c-illustrated-message__illustration': true,\n 'mg-c-illustrated-message__illustration--small': this.size === 'small',\n }}\n >\n <slot name=\"illustration\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__slots\">\n <div class=\"mg-c-illustrated-message__title\">\n <slot name=\"title\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__details\">\n <slot name=\"details\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-input-checkbox-paginated.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as MgInputCheckboxPaginated$1, d as defineCustomElement$1 } from './mg-input-checkbox-paginated2.js';
+import { b as MgInputCheckboxPaginated$1, d as defineCustomElement$1 } from './mg-input-checkbox-paginated2.js';
 const MgInputCheckboxPaginated = MgInputCheckboxPaginated$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -27,6 +27,15 @@ var SectionTitleKind;
     SectionTitleKind["BUTTON"] = "button";
     SectionTitleKind["TEXT"] = "text";
 })(SectionTitleKind || (SectionTitleKind = {}));
+/**
+ * Define select values button key
+ */
+var SelectValuesButtonKey;
+(function (SelectValuesButtonKey) {
+    SelectValuesButtonKey["EDIT"] = "editButton";
+    SelectValuesButtonKey["SHOW"] = "showButton";
+    SelectValuesButtonKey["SELECT"] = "selectButton";
+})(SelectValuesButtonKey || (SelectValuesButtonKey = {}));
 /**
  * Get checkboxes list template
@@ -104,13 +113,17 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
         this.expanded = true;
     }
     validateCheckboxes(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 (this.getPageCount(newValue) === 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 (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage)
-            this.currentPage = this.getPageCount(newValue);
+        else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {
+            this.currentPage--;
+        }
     }
     validateSectionKind(newValue) {
         if (newValue === SectionKind.SELECTED)
@@ -142,10 +155,10 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
+        const getText = (checkboxes) => (h("em", { class: "mg-c-input__input-checkbox-multi-section-header-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (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', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { 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", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (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', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, h("mg-button", { 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", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get watchers() { return {
         "checkboxes": ["validateCheckboxes"],
@@ -216,6 +229,6 @@ function defineCustomElement() {
 }
 defineCustomElement();
-export { MgInputCheckboxList as M, SectionKind as S, MgInputCheckboxPaginated as a, checkboxTypes as c, defineCustomElement as d };
+export { MgInputCheckboxList as M, SelectValuesButtonKey as S, SectionKind as a, MgInputCheckboxPaginated as b, checkboxTypes as c, defineCustomElement as d };
 //# sourceMappingURL=mg-input-checkbox-paginated2.js.map

package/dist/components/mg-input-checkbox-paginated2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/*\n interface CheckboxValue\n * use to match returned value\n /\nexport interface CheckboxValue {\n title: string;\n value: boolean \| null;\n disabled?: boolean;\n required?: boolean;\n}\n\n/\n interface CheckboxItem\n * use to match checkbox attributes\n /\nexport interface CheckboxItem extends CheckboxValue {\n _id: string;\n _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n _handleBlur: () => void;\n _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/\n List of all availables checkbox type\n /\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/\n ChecboxType from checkbox types\n /\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/\n mg-input-checkbox-paginated section kind\n /\nexport enum SectionKind {\n SELECTED = 'selected',\n NOT_SELECTED = 'not-selected',\n}\n\n/\n mg-input-checkbox-paginated section title kind\n /\nexport enum SectionTitleKind {\n BUTTON = 'button',\n TEXT = 'text',\n}\n\n/\n Base mg-input-checkbox interface\n /\nexport interface IMgInputCheckboxBase {\n readonly: boolean;\n disabled: boolean;\n name: string;\n invalid: boolean;\n}\n\n/\n mg-input-checkbox-list interface\n /\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n inputVerticalList: boolean;\n type: CheckboxType;\n displaySearchInput: boolean;\n messages: Record<string, unknown>;\n checkboxes: CheckboxItem[];\n id: string;\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/\n Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n /\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n class={{\n 'mg-c-input__input-group-container': true,\n 'mg-c-input__input-group-container--vertical': props.inputVerticalList \|\| (props.type === 'multi' && !props.readonly),\n 'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n }}\n role=\"list\"\n aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n aria-live={props.displaySearchInput ? 'polite' : undefined}\n id={props.id}\n >\n {props.checkboxes\n .filter(item => !props.readonly \|\| item.value)\n .map(input => (\n <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled \|\| input.disabled }}>\n <input\n type=\"checkbox\"\n id={input._id}\n name={props.name}\n value={input.value?.toString()}\n checked={Boolean(input.value)}\n required={input.required}\n aria-invalid={props.invalid?.toString() \|\| 'false'}\n disabled={props.readonly \|\| props.disabled \|\| input.disabled}\n indeterminate={input.value === null}\n onInput={input._handleInput}\n onBlur={input._handleBlur}\n onKeyDown={input._handleKeydown}\n />\n <label htmlFor={input._id}>{input.title}</label>\n </li>\n ))}\n </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/\n Internal component use to manage sections instances\n /\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /***********\n Constantes \n **********/\n private readonly offset = 10;\n\n /**********\n Decorators \n **********/\n\n /\n * Define if mg-input-checkbox-list is readonly\n /\n @Prop() readonly: boolean;\n\n /\n Define if mg-input-checkbox-list is disabled\n /\n @Prop() disabled: boolean;\n\n /\n Define mg-input-checkbox input name\n /\n @Prop() name: string;\n\n /\n Define mg-input-checkbox input invalid\n /\n @Prop() invalid: boolean;\n\n /\n Current page\n /\n @Prop({ mutable: true }) currentPage = 1;\n\n /\n Define checkboxes to paginate\n /\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (this.getPageCount(newValue) === 1) this.currentPage = 1;\n // 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\n else if (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage) this.currentPage = this.getPageCount(newValue);\n }\n\n /\n Define section kind\n /\n @Prop() sectionKind: SectionKind;\n @Watch('sectionKind')\n validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n else this.titleKind = SectionTitleKind.TEXT;\n }\n\n /\n Define component message\n /\n @Prop() messages: Record<string, string>;\n\n /\n Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n /\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n /\n Define section title\n /\n @State() titleKind: SectionTitleKind;\n\n /\n Is checked items values expanded\n /\n @State() expanded = true;\n\n /*********\n Methods \n ********/\n\n /\n * Mass action handler\n /\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /\n Toggle items button handler\n /\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n /\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /\n Get from and to index\n * @returns [from,to] index\n /\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /*\n Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n /\n private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n /\n Handle mg-pagination current page change event\n * @param event - pagination current page change event\n /\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateSectionKind(this.sectionKind);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => <em>{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>;\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n {this.titleKind === SectionTitleKind.BUTTON ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) \|\| this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n inputVerticalList={true}\n type={'multi'}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n readonly={this.readonly}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/*\n interface CheckboxValue\n * use to match returned value\n /\nexport interface CheckboxValue {\n title: string;\n value: boolean \| null;\n disabled?: boolean;\n required?: boolean;\n}\n\n/\n interface CheckboxItem\n * use to match checkbox attributes\n /\nexport interface CheckboxItem extends CheckboxValue {\n _id: string;\n _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n _handleBlur: () => void;\n _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/\n List of all availables checkbox type\n /\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/\n ChecboxType from checkbox types\n /\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/\n mg-input-checkbox-paginated section kind\n /\nexport enum SectionKind {\n SELECTED = 'selected',\n NOT_SELECTED = 'not-selected',\n}\n\n/\n mg-input-checkbox-paginated section title kind\n /\nexport enum SectionTitleKind {\n BUTTON = 'button',\n TEXT = 'text',\n}\n\n/\n Base mg-input-checkbox interface\n /\nexport interface IMgInputCheckboxBase {\n readonly: boolean;\n disabled: boolean;\n name: string;\n invalid: boolean;\n}\n\n/\n mg-input-checkbox-list interface\n /\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n inputVerticalList: boolean;\n type: CheckboxType;\n displaySearchInput: boolean;\n messages: Record<string, unknown>;\n checkboxes: CheckboxItem[];\n id: string;\n}\n\n/\n Define select values button key\n /\nexport enum SelectValuesButtonKey {\n EDIT = 'editButton',\n SHOW = 'showButton',\n SELECT = 'selectButton',\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/\n Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n /\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n class={{\n 'mg-c-input__input-group-container': true,\n 'mg-c-input__input-group-container--vertical': props.inputVerticalList \|\| (props.type === 'multi' && !props.readonly),\n 'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n }}\n role=\"list\"\n aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n aria-live={props.displaySearchInput ? 'polite' : undefined}\n id={props.id}\n >\n {props.checkboxes\n .filter(item => !props.readonly \|\| item.value)\n .map(input => (\n <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled \|\| input.disabled }}>\n <input\n type=\"checkbox\"\n id={input._id}\n name={props.name}\n value={input.value?.toString()}\n checked={Boolean(input.value)}\n required={input.required}\n aria-invalid={props.invalid?.toString() \|\| 'false'}\n disabled={props.readonly \|\| props.disabled \|\| input.disabled}\n indeterminate={input.value === null}\n onInput={input._handleInput}\n onBlur={input._handleBlur}\n onKeyDown={input._handleKeydown}\n />\n <label htmlFor={input._id}>{input.title}</label>\n </li>\n ))}\n </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/\n Internal component use to manage sections instances\n /\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /***********\n Constantes \n **********/\n private readonly offset = 10;\n\n /**********\n Decorators \n **********/\n\n /\n * Define if mg-input-checkbox-list is readonly\n /\n @Prop() readonly: boolean;\n\n /\n Define if mg-input-checkbox-list is disabled\n /\n @Prop() disabled: boolean;\n\n /\n Define mg-input-checkbox input name\n /\n @Prop() name: string;\n\n /\n Define mg-input-checkbox input invalid\n /\n @Prop() invalid: boolean;\n\n /\n Current page\n /\n @Prop({ mutable: true }) currentPage = 1;\n\n /\n Define checkboxes to paginate\n /\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n const pageCountNewValue = this.getPageCount(newValue);\n const pageCountOldValue = this.getPageCount(oldValue);\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (pageCountNewValue === 1 \|\| (pageCountNewValue !== 0 && this.currentPage === 0)) {\n this.currentPage = 1;\n }\n // 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\n else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n this.currentPage--;\n }\n }\n\n /\n Define section kind\n /\n @Prop() sectionKind: SectionKind;\n @Watch('sectionKind')\n validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n else this.titleKind = SectionTitleKind.TEXT;\n }\n\n /\n Define component message\n /\n @Prop() messages: Record<string, string>;\n\n /\n Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n /\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n /\n Define section title\n /\n @State() titleKind: SectionTitleKind;\n\n /\n Is checked items values expanded\n /\n @State() expanded = true;\n\n /*********\n Methods \n ********/\n\n /\n * Mass action handler\n /\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /\n Toggle items button handler\n /\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n /\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /\n Get from and to index\n * @returns [from,to] index\n /\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /*\n Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n /\n private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n /\n Handle mg-pagination current page change event\n * @param event - pagination current page change event\n /\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateSectionKind(this.sectionKind);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__input-checkbox-multi-section-header-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n );\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n {this.titleKind === SectionTitleKind.BUTTON ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) \|\| this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-tooltip class=\"mg-c-input__input-checkbox-multi-section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n </mg-tooltip>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n inputVerticalList={true}\n type={'multi'}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n readonly={this.readonly}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { H as Handler, M as MgInput } from './MgInput.js';
-import { b as cleanString, C as ClassList, i as isValidString } from './components.utils.js';
+import { C as Ce, F as Fe, H as He } from './index.es.js';
 import { i as initLocales } from './index2.js';
-import { c as checkboxTypes, S as SectionKind, M as MgInputCheckboxList, d as defineCustomElement$a } from './mg-input-checkbox-paginated2.js';
+import { d as defineCustomElement$a, S as SelectValuesButtonKey, c as checkboxTypes, a as SectionKind, M as MgInputCheckboxList } from './mg-input-checkbox-paginated2.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';
@@ -16,7 +16,8 @@ import { d as defineCustomElement$4 } 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 = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.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}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content]{display:flex;flex-flow:column wrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content] .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
+const mgInputCheckboxCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.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}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--search-mode.mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{width:37rem;height:40rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-label{font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__input-checkbox-multi-section-header-tootlip){margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
+const MgInputCheckboxStyle0 = mgInputCheckboxCss;
 /**
  * type CheckboxItem validation function
@@ -40,6 +41,8 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         // "multi" setup
         this.multiStart = 5;
         this.searchStart = 10;
+        // popover variables
+        this.hasOpenedPopover = false;
         /**
          * Handle input event
          * @param event - input event
@@ -51,7 +54,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         };
         /**
          * Keyboard handler
-         * @param event - to trak "tab" key
+         * @param event - to track "tab" key
          */
         this.handleKeydown = (event) => {
             var _a;
@@ -95,6 +98,11 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @param event - mg-popover display-change custom event
          */
         this.handleMgPopoverDisplayChange = (event) => {
+            // 1. update hasOpenedPopover guard with event value
+            this.hasOpenedPopover = event.detail;
+            // 2. update selected valued button text
+            this.setButtonText();
+            // 3. when popover display change to hide, update reset needeed props and run checkValidity
             if (!event.detail) {
                 // reset search value
                 this.searchValue = '';
@@ -110,7 +118,11 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @param event - mass action event trigger a global select/unselect on values
          */
         this.handleMassAction = (event) => {
-            this.updateCheckboxItems('value', event.detail !== 'selected');
+            const displayItems = this.getDisplayItems();
+            // update only displayed items
+            displayItems.forEach(item => {
+                item.value = event.detail !== 'selected';
+            });
             this.updateValues();
         };
         /**
@@ -134,7 +146,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Ce(item.title).includes(Ce(this.searchValue)));
         };
         /**
          * Methode to validate if one of inputs value is checked id required
@@ -148,17 +160,18 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
         };
         /**
-         * Render button text
-         * @param selectedValuesNb - nb of selected values
-         * @returns translated message
+         * Set button text locale key
          */
-        this.renderButtonText = (selectedValuesNb) => {
-            let messageKey = 'editButton';
+        this.setButtonText = () => {
+            // prevent key update while popover is openned
+            if (this.hasOpenedPopover)
+                return;
+            let messageKey = SelectValuesButtonKey.EDIT;
             if (this.disabled)
-                messageKey = 'showButton';
-            else if (selectedValuesNb < 1)
-                messageKey = 'selectButton';
-            return this.messages.input.checkbox[messageKey];
+                messageKey = SelectValuesButtonKey.SHOW;
+            else if (this.getSelectedItems().length < 1)
+                messageKey = SelectValuesButtonKey.SELECT;
+            this.selectValuesButtonKey = messageKey;
         };
         /**
          * Set input error message
@@ -185,6 +198,11 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @returns items to display
          */
         this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
+        /**
+         * get list of selected checkboxItems
+         * @returns selected checkboxItems
+         */
+        this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
         this.value = undefined;
         this.type = undefined;
         this.identifier = undefined;
@@ -201,12 +219,13 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new ClassList([this.baseClassName]);
+        this.classCollection = new Fe([this.baseClassName]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
         this.searchValue = '';
         this.searchResults = [];
+        this.selectValuesButtonKey = SelectValuesButtonKey.EDIT;
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
@@ -243,6 +262,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.hasDisplayedError = prop !== 'required';
             this.setErrorMessage(this.hasDisplayedError);
         }
+        this.setButtonText();
     }
     validateDisabled(newValue) {
         const className = `${this.baseClassName}-multi-disabled`;
@@ -252,13 +272,15 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.classCollection.delete(className);
     }
     validateCheckboxItems(newValue) {
-        if (this.mode === 'auto' && newValue.length > this.multiStart)
-            this.type = 'multi';
-        if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {
-            this.displaySearchInput = this.type === 'multi';
-            // refresh search values
+        // For the 'auto' mode we update the type depending on the new value's length.
+        if (this.mode === 'auto')
+            this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';
+        // If the type is multi and the new value's length is greater than the search gauge, display the search input.
+        this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;
+        // refresh search values
+        if (this.displaySearchInput)
             this.updateSearchResults();
-        }
+        this.setButtonText();
     }
     validateSearchValue() {
         // refresh search values
@@ -284,7 +306,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (!He(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -329,6 +351,8 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         // Get locales
         this.messages = initLocales(this.element).messages;
         // Validate
+        // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type
+        // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.
         this.validateType(this.type);
         this.validateValue(this.value);
         this.validateDisabled(this.disabled);
@@ -349,21 +373,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.searchInput = (_a = this.element.shadowRoot.querySelector('mg-input-text')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('input');
         (_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleKeydown);
     }
-    /**
-     * Render checkbox multi display values
-     * @param selectedValuesNb - selected values length
-     * @returns display selected values
-     */
-    renderCheckboxMultiDisplaySelectedValues(selectedValuesNb) {
-        if (this.displaySelectedValues) {
-            return (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.checkboxItems
-                .filter(({ value }) => value)
-                .map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title))))));
-        }
-        else {
-            return h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb));
-        }
-    }
     /**
      * Render checkboxes by section
      * @param checkboxes - checkboxes to render
@@ -390,15 +399,21 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
      * @returns html element
      */
     renderCheckboxMulti() {
-        const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
+        const selectedValuesNb = this.getSelectedItems().length;
         const checkboxes = this.getDisplayItems();
-        return (h("div", { class: { 'mg-c-input__input-container': true, 'mg-c-input__input-checkbox-multi': true, 'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
+        return (h("div", { class: {
+                'mg-c-input__input-container': true,
+                'mg-c-input__input-checkbox-multi': true,
+                'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues,
+                'mg-c-input__input-checkbox-multi--search-mode': this.displaySearchInput,
+            } }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
                 if (el)
                     this.mgPopover = el;
-            } }, h("mg-button", { variant: "secondary", "aria-describedby": this.legendId }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [
+            } }, h("mg-button", { variant: "secondary", "aria-describedby": this.legendId }, h("mg-icon", { icon: "list" }), this.messages.input.checkbox[this.selectValuesButtonKey]), h("div", { slot: "content", class: "mg-c-input__input-checkbox-multi-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, displayCharacterLeft: false, 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']}`),
-        ], this.displaySearchInput ? (h("div", { class: "mg-c-input__input-checkbox-multi-sections-container" }, this.renderCheckboxBySection(checkboxes))) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, readonly: this.readonly, 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-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult))), this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb)));
+            h("div", { key: "sections-container", class: "mg-c-input__input-checkbox-multi-sections-container" }, this.renderCheckboxBySection(checkboxes)),
+        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, readonly: this.readonly, 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-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title)))))) : (h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -418,7 +433,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "checkboxItems": ["validateCheckboxItems"],
         "searchValue": ["validateSearchValue"]
     }; }
-    static get style() { return mgInputCheckboxCss; }
+    static get style() { return MgInputCheckboxStyle0; }
 }, [1, "mg-input-checkbox", {
         "value": [1040],
         "type": [1025],
@@ -442,6 +457,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         "displaySearchInput": [32],
         "searchValue": [32],
         "searchResults": [32],
+        "selectValuesButtonKey": [32],
         "displayError": [64],
         "setError": [64]
     }, undefined, {