@mgdis/mg-components 5.12.0 → 5.13.0

package/dist/cjs/mg-components.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"currentSearchPage":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-action-more_32.cjs",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"titleEditable":[1028,"title-editable"],"titlePosition":[1,"title-position"],"expanded":[1028],"expandToggleDisplay":[1,"expand-toggle-display"],"expandToggleDisabled":[4,"expand-toggle-disabled"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[2,"mg-input-checkbox-paginated",{"readonly":[4],"disabled":[4],"name":[1],"checkboxes":[16],"sectionKind":[1,"section-kind"],"messages":[16],"titleKind":[32],"currentPage":[32],"itemsExpanded":[32]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"hidePageCount":[4,"hide-page-count"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-03d2557d.js');
-const mgMenu_conf = require('./mg-menu.conf-79f0c761.js');
+const mgMenu_conf = require('./mg-menu.conf-857748e1.js');
 
 /**
  * MgItemMore type guard

package/dist/cjs/{mg-menu.conf-79f0c761.js → mg-menu.conf-857748e1.js}

@@ -29,7 +29,19 @@ const input$1 = {
 		result: "result",
 		results: "results",
 		searchResults: "Search result(s) list.",
-		noResult: "No result."
+		noResult: "No result.",
+		sections: {
+			selected: {
+				title: "Selected",
+				titlePlurial: "Selected",
+				action: "Unselect all"
+			},
+			notSelected: {
+				title: "Not selected",
+				titlePlurial: "Not selected",
+				action: "Select all"
+			}
+		}
 	}
 };
 const form$1 = {
@@ -116,7 +128,13 @@ const input = {
 		result: "resultat",
 		results: "resultats",
 		searchResults: "List de resultat(s) de la recherche.",
-		noResult: "Aucun resultat."
+		noResult: "Aucun resultat.",
+		checkedItem: "Sélectionné",
+		checkedItems: "Sélectionnés",
+		notCheckedItem: "Non sélectionné",
+		notCheckedItems: "Non sélectionnés",
+		unselectAll: "Tout désélectionner",
+		selectAll: "Tout sélectionner"
 	}
 };
 const form = {

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "./components/atoms/mg-tag/mg-tag.js",
     "./components/atoms/mg-tooltip/mg-tooltip.js",
     "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js",
+    "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js",
     "./components/molecules/inputs/mg-input-date/mg-input-date.js",
     "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.js",
     "./components/molecules/inputs/mg-input-password/mg-input-password.js",

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

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+/**
+ * Get checkboxes list template
+ * @param props - MgInputCheckboxList Interface Props
+ * @returns input template
+ */
+export const MgInputCheckboxList = (props) => (
+// eslint-disable-next-line jsx-a11y/no-redundant-roles
+h("ul", { class: {
+    'mg-input__input-group-container': true,
+    'mg-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),
+    'mg-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,
+  }, role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes
+  .filter(item => !props.readonly || item.value)
+  .map(input => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: props.name, value: input.value && input.value.toString(), checked: Boolean(input.value), required: input.required, disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input.handleInput, onBlur: input.handleBlur, onKeyDown: input.handleKeydown }), h("label", { htmlFor: input.id }, input.title))))));

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

@@ -0,0 +1,259 @@
+import { h, Host } from '@stencil/core';
+import { SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';
+import { MgInputCheckboxList } from '../MgInputCheckboxList';
+/**
+ * Internal component use to manage sections instances
+ */
+export class MgInputCheckboxPaginated {
+  constructor() {
+    /*************
+     * Constantes *
+     *************/
+    this.offset = 10;
+    /***********
+     * Methods *
+     ***********/
+    /**
+     * Mass action handler
+     */
+    this.massActionHandler = () => {
+      this.massAction.emit(this.sectionKind);
+    };
+    /**
+     * Toogle items button handler
+     */
+    this.handleToggleClick = () => {
+      this.itemsExpanded = !this.itemsExpanded;
+    };
+    /**
+     * Method to get a array range
+     * @param from - array start index
+     * @param to - array end index
+     * @returns array's range
+     */
+    this.getArrayRange = (array, from, to) => array.slice(from, to);
+    /**
+     * Method to get page count from items
+     * @param items - items to count
+     * @returns page count from items
+     */
+    this.getPageCount = (item) => Math.ceil(item.length / this.offset);
+    /**
+     * Handle mg-pagination current page change event
+     * @param event - pagination current page change event
+     */
+    this.handleCurrentPageChange = (event) => {
+      this.currentPage = Number(event.detail);
+    };
+    this.readonly = undefined;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.checkboxes = [];
+    this.sectionKind = undefined;
+    this.messages = undefined;
+    this.titleKind = undefined;
+    this.currentPage = 1;
+    this.itemsExpanded = true;
+  }
+  validateCheckboxes(newValue, 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)
+      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);
+  }
+  validateSectionKind(newValue) {
+    if (newValue === SectionKind.SELECTED)
+      this.titleKind = SectionTitleKind.BUTTON;
+    else
+      this.titleKind = SectionTitleKind.TEXT;
+  }
+  /**
+   * Get from and to index
+   * @returns [from,to] index
+   */
+  getFromToIndexes() {
+    const isFirstPage = this.currentPage === 1;
+    const checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;
+    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;
+    return [checkboxItemsFromIndex, checkboxItemsToIndex];
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateSectionKind(this.sectionKind);
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
+    const itemsContainerId = `items-${this.sectionKind}-container`;
+    const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
+    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.itemsExpanded.toString() }, h("mg-icon", { icon: this.itemsExpanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.itemsExpanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.itemsExpanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
+  }
+  static get is() { return "mg-input-checkbox-paginated"; }
+  static get encapsulation() { return "scoped"; }
+  static get properties() {
+    return {
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if mg-input-checkbox-list is readonly"
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if mg-input-checkbox-list is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define mg-input-checkbox input name"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "checkboxes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CheckboxItem[]",
+          "resolved": "CheckboxItem[]",
+          "references": {
+            "CheckboxItem": {
+              "location": "import",
+              "path": "../mg-input-checkbox.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define checkboxes to paginate"
+        },
+        "defaultValue": "[]"
+      },
+      "sectionKind": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SectionKind",
+          "resolved": "SectionKind.NOT_SELECTED | SectionKind.SELECTED",
+          "references": {
+            "SectionKind": {
+              "location": "import",
+              "path": "../mg-input-checkbox.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define section kind"
+        },
+        "attribute": "section-kind",
+        "reflect": false
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record<string, string>",
+          "resolved": "{ [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define component message"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "titleKind": {},
+      "currentPage": {},
+      "itemsExpanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "massAction",
+        "name": "mass-action",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emit 'mass-action' event\nused to informe that select-all/unselect-all button listner is triggered"
+        },
+        "complexType": {
+          "original": "MgInputCheckboxPaginated['sectionKind']",
+          "resolved": "SectionKind.NOT_SELECTED | SectionKind.SELECTED",
+          "references": {
+            "MgInputCheckboxPaginated": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "checkboxes",
+        "methodName": "validateCheckboxes"
+      }, {
+        "propName": "sectionKind",
+        "methodName": "validateSectionKind"
+      }];
+  }
+}

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

@@ -2,3 +2,19 @@
  * List of all availables checkbox type
  */
 export const checkboxTypes = ['checkbox', 'multi'];
+/**
+ * mg-input-checkbox-paginated section kind
+ */
+export var SectionKind;
+(function (SectionKind) {
+  SectionKind["SELECTED"] = "selected";
+  SectionKind["NOT_SELECTED"] = "not-selected";
+})(SectionKind || (SectionKind = {}));
+/**
+ * mg-input-checkbox-paginated section title kind
+ */
+export var SectionTitleKind;
+(function (SectionTitleKind) {
+  SectionTitleKind["BUTTON"] = "button";
+  SectionTitleKind["TEXT"] = "text";
+})(SectionTitleKind || (SectionTitleKind = {}));

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

@@ -191,7 +191,8 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
 .mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-values-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.4rem;
+  gap: calc(0.4rem * 1);
+  flex-direction: row;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -204,26 +205,63 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
   min-height: var(--default-size);
   min-width: var(--default-size);
   padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
-  background-color: var(--mg-color-dark-5-hsl);
+  background-color: hsl(var(--mg-color-dark-5-hsl));
   border-radius: 0.3rem;
   font-size: var(--font-size);
 }
 .mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-no-result {
   text-align: center;
 }
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-text, .mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title {
+  display: inline;
+  margin: 0;
+  color: hsl(var(--mg-color-dark-40-hsl));
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title {
+  margin: 0 1.1rem;
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.4rem * 1);
+  flex-direction: column;
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections-container {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: calc(0.4rem * 0);
+  flex-direction: column;
+  max-height: 80vh;
+  padding-right: 1rem;
+  overflow-y: auto;
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.4rem * 2);
+  flex-direction: row;
+  align-items: center;
+  min-height: var(--default-size);
+}
 .mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs {
   margin: 0;
+  padding: 0.4rem calc(0.4rem * 2) 0.4rem calc(0.4rem / 2);
 }
 .mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip {
   margin-left: var(--mg-inputs-spacer);
 }
 .mg-input.mg-input--checkbox-multi mg-popover {
   --mg-popover-min-width: 7rem;
+  --mg-card-padding: calc(0.4rem * 2);
 }
 .mg-input.mg-input--checkbox-multi mg-popover [slot=content] {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: calc(0.4rem * 2);
+  flex-direction: column;
+}
+.mg-input.mg-input--checkbox-multi mg-popover [slot=content] .mg-input__input-group {
+  margin-left: calc(0.4rem * 2);
 }
 .mg-input.mg-input--checkbox-multi mg-input-text {
   --mg-inputs-margin-bottom: 0;