@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -5,278 +5,278 @@ 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);
-    };
-    /**
-     * Toggle items button handler
-     */
-    this.handleToggleClick = () => {
-      this.expanded = !this.expanded;
-    };
+    constructor() {
+        /*************
+         * Constantes *
+         *************/
+        this.offset = 10;
+        /***********
+         * Methods *
+         ***********/
+        /**
+         * Mass action handler
+         */
+        this.massActionHandler = () => {
+            this.massAction.emit(this.sectionKind);
+        };
+        /**
+         * Toggle items button handler
+         */
+        this.handleToggleClick = () => {
+            this.expanded = !this.expanded;
+        };
+        /**
+         * 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.invalid = undefined;
+        this.checkboxes = [];
+        this.sectionKind = undefined;
+        this.messages = undefined;
+        this.titleKind = undefined;
+        this.currentPage = 1;
+        this.expanded = 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;
+    }
     /**
-     * Method to get a array range
-     * @param from - array start index
-     * @param to - array end index
-     * @returns array's range
+     * Get from and to index
+     * @returns [from,to] index
      */
-    this.getArrayRange = (array, from, to) => array.slice(from, to);
+    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 *
+     *************/
     /**
-     * Method to get page count from items
-     * @param items - items to count
-     * @returns page count from items
+     * Check if component props are well configured on init
      */
-    this.getPageCount = (item) => Math.ceil(item.length / this.offset);
+    componentWillLoad() {
+        this.validateSectionKind(this.sectionKind);
+    }
     /**
-     * Handle mg-pagination current page change event
-     * @param event - pagination current page change event
+     * Render
+     * @returns HTML Element
      */
-    this.handleCurrentPageChange = (event) => {
-      this.currentPage = Number(event.detail);
-    };
-    this.readonly = undefined;
-    this.disabled = undefined;
-    this.name = undefined;
-    this.invalid = undefined;
-    this.checkboxes = [];
-    this.sectionKind = undefined;
-    this.messages = undefined;
-    this.titleKind = undefined;
-    this.currentPage = 1;
-    this.expanded = 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-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 > 1 ? this.currentPage : 1, "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, checkboxItemsFromIndex, checkboxItemsToIndex), 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 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
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define mg-input-checkbox input invalid"
-        },
-        "attribute": "invalid",
-        "reflect": false
-      },
-      "checkboxes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "CheckboxItem[]",
-          "resolved": "CheckboxItem[]",
-          "references": {
-            "CheckboxItem": {
-              "location": "import",
-              "path": "../mg-input-checkbox.conf",
-              "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxItem"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::SectionKind"
-            }
-          }
-        },
-        "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",
-              "id": "global::Record"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define component message"
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "titleKind": {},
-      "currentPage": {},
-      "expanded": {}
-    };
-  }
-  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",
-              "id": "global::MgInputCheckboxPaginated"
+    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-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 > 1 ? this.currentPage : 1, "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, checkboxItemsFromIndex, checkboxItemsToIndex), 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 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
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define mg-input-checkbox input invalid"
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "checkboxes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxItem[]",
+                    "resolved": "CheckboxItem[]",
+                    "references": {
+                        "CheckboxItem": {
+                            "location": "import",
+                            "path": "../mg-input-checkbox.conf",
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxItem"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::SectionKind"
+                        }
+                    }
+                },
+                "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",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component message"
+                }
             }
-          }
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "checkboxes",
-        "methodName": "validateCheckboxes"
-      }, {
-        "propName": "sectionKind",
-        "methodName": "validateSectionKind"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "titleKind": {},
+            "currentPage": {},
+            "expanded": {}
+        };
+    }
+    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": "HTMLMgInputCheckboxPaginatedElement['sectionKind']",
+                    "resolved": "SectionKind.NOT_SELECTED | SectionKind.SELECTED",
+                    "references": {
+                        "HTMLMgInputCheckboxPaginatedElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputCheckboxPaginatedElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "checkboxes",
+                "methodName": "validateCheckboxes"
+            }, {
+                "propName": "sectionKind",
+                "methodName": "validateSectionKind"
+            }];
+    }
 }
 //# sourceMappingURL=mg-input-checkbox-paginated.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["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   * 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<MgInputCheckboxPaginated['sectionKind']>;\n\n  /**\n   * Define section title\n   */\n  @State() titleKind: SectionTitleKind;\n\n  /**\n   * Current page\n   */\n  @State() currentPage = 1;\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 checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [checkboxItemsFromIndex, checkboxItemsToIndex];\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 [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => <em>{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>;\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 > 1 ? this.currentPage : 1}\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, checkboxItemsFromIndex, checkboxItemsToIndex)}\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,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["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   * 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   * Current page\n   */\n  @State() currentPage = 1;\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 checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [checkboxItemsFromIndex, checkboxItemsToIndex];\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 [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => <em>{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>;\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 > 1 ? this.currentPage : 1}\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, checkboxItemsFromIndex, checkboxItemsToIndex)}\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"]}

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

@@ -7,15 +7,15 @@ export const checkboxTypes = ['checkbox', 'multi'];
  */
 export var SectionKind;
 (function (SectionKind) {
-  SectionKind["SELECTED"] = "selected";
-  SectionKind["NOT_SELECTED"] = "not-selected";
+    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["BUTTON"] = "button";
+    SectionTitleKind["TEXT"] = "text";
 })(SectionTitleKind || (SectionTitleKind = {}));
 //# sourceMappingURL=mg-input-checkbox.conf.js.map