@mgdis/mg-components 6.13.1 → 6.15.0

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

@@ -1,16 +1,13 @@
 import { h, Host } from "@stencil/core";
-import { SectionKind } from "../mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "../MgInputCheckboxList";
+import { formatID } from "@mgdis/core-ui-helpers/dist/utils";
 /**
  * Internal component use to manage sections instances
  * @internal
  */
 export class MgInputCheckboxPaginated {
     constructor() {
-        /*************
-         * Constantes *
-         *************/
-        this.offset = 10;
+        this.step = 10;
         /*************
          * Decorators *
          *************/
@@ -23,76 +20,45 @@ export class MgInputCheckboxPaginated {
          */
         this.disabled = false;
         /**
-         * Current page
-         */
-        this.currentPage = 1;
-        /**
-         * Define checkboxes to paginate
-         */
-        this.checkboxes = [];
-        /**
-         * Is checked items values expanded
+         * Page items limit to display
          */
-        this.expanded = true;
+        this.limit = this.step;
         /***********
          * Methods *
          ***********/
         /**
-         * Mass action handler
+         * Component has next checkboxes to display
+         * @returns truthy if have next elements
          */
-        this.massActionHandler = () => {
-            this.massAction.emit(this.sectionKind);
+        this.hasNext = () => {
+            return this.checkboxes.length > this.limit;
         };
         /**
-         * Toggle items button handler
+         * Set items from checkboxes and limit
          */
-        this.handleToggleClick = () => {
-            this.expanded = !this.expanded;
+        this.setItems = () => {
+            this.items = this.checkboxes.slice(0, this.limit);
         };
         /**
-         * Method to get a array range
-         * @param from - array start index
-         * @param to - array end index
-         * @returns array's range
+         * Handle load-more <mg-button> click event
          */
-        this.getArrayRange = (array, from, to) => array.slice(from, to);
-        /**
-         * Method to get page count from items
-         * @param items - items to count
-         * @returns page count from items
-         */
-        this.getPageCount = (items) => ((items === null || items === void 0 ? void 0 : items.length) > 0 ? Math.ceil(items.length / this.offset) : 0);
-        /**
-         * Handle mg-pagination current page change event
-         * @param event - pagination current page change event
-         */
-        this.handleCurrentPageChange = (event) => {
-            this.currentPage = Number(event.detail);
+        this.handleLoadMore = () => {
+            if (this.hasNext()) {
+                this.limit += this.step;
+            }
         };
     }
-    watchCheckboxes(newValue, oldValue) {
-        const pageCountNewValue = this.getPageCount(newValue);
-        const pageCountOldValue = this.getPageCount(oldValue);
-        // after each array.length update we reset pagination
-        // when items fill on page, we set current page to 1
-        if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {
-            this.currentPage = 1;
-        }
-        // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page
-        else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {
-            this.currentPage--;
-        }
-        this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;
+    watchCheckboxes() {
+        this.setItems();
+    }
+    watchLimit() {
+        this.setItems();
     }
     /**
-     * Get from and to index
-     * @returns [from,to] index
+     * Method to reset limit
      */
-    getFromToIndexes() {
-        const isFirstPage = this.currentPage === 1;
-        const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;
-        const to = isFirstPage ? this.offset : this.currentPage * this.offset;
-        return [from, to];
+    async resetLimit() {
+        this.limit = this.step;
     }
     /*************
      * Lifecycle *
@@ -101,18 +67,16 @@ export class MgInputCheckboxPaginated {
      * Validate props
      */
     componentWillLoad() {
-        this.watchCheckboxes(this.checkboxes);
+        this.watchCheckboxes();
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
-        const [from, to] = this.getFromToIndexes();
-        const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { key: 'ee67aa1705efa2b88010748b6978e0c1dec6e4de', hidden: this.checkboxes.length < 1 }, h("div", { key: 'b713e2a0e21f57d3b238b72163f3d7a4781b7026', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded && this.checkboxes.some(checkbox => checkbox.value === true && checkbox.disabled !== true)) ||
-            (this.sectionKind === SectionKind.NOT_SELECTED && this.checkboxes.some(checkbox => checkbox.value === false && checkbox.disabled !== true))) && (h("mg-tooltip", { key: '7e5cba3b03cdc7bab68650b9aed36c195ca4dfe6', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: '4980f26ade12cbfaa6ef6041fa84918900cb652a', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '950b07ea9c59e8bc21e236bf32e3bf0a9318a008', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: '276f679e01756d6d60f043dc1c04807b5058750a', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        const listId = formatID(this.messages.label);
+        const tabId = 'tab-info';
+        return (h(Host, { key: '8e58037e78fcd7990bbd681053758b0ec4d0c4e0' }, h("slot", { key: 'c64e9c8f65a526b2289d3663fff64df02a282c96', name: "header-action" }), h("div", { key: 'c5953bb7e970384b231865d7fa4708fe2da4b407', class: "mg-c-input__tabs-content" }, h("p", { key: 'c0899cb7e7a6dea282f05aacf0fb05acd60a9d20', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '0bb1b4160d75b00d3fb5d9c08f3a560a16105e57', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'fd1560d7254f437f284925427130f69539b5fd3b', icon: "chevron-down" }), this.messages.showMore)))));
     }
     static get is() { return "mg-input-checkbox-paginated"; }
     static get encapsulation() { return "scoped"; }
@@ -120,6 +84,7 @@ export class MgInputCheckboxPaginated {
         return {
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -134,12 +99,12 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,12 +119,12 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -174,11 +139,11 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -193,31 +158,11 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false
             },
-            "currentPage": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Current page"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "current-page",
-                "reflect": false,
-                "defaultValue": "1"
-            },
             "checkboxes": {
                 "type": "unknown",
+                "attribute": "checkboxes",
                 "mutable": false,
                 "complexType": {
                     "original": "CheckboxItem[]",
@@ -237,11 +182,11 @@ export class MgInputCheckboxPaginated {
                     "text": "Define checkboxes to paginate"
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "setter": false
             },
             "messages": {
                 "type": "unknown",
+                "attribute": "messages",
                 "mutable": false,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -266,38 +211,37 @@ export class MgInputCheckboxPaginated {
     }
     static get states() {
         return {
-            "expanded": {}
+            "limit": {}
         };
     }
-    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"
-                },
+    static get methods() {
+        return {
+            "resetLimit": {
                 "complexType": {
-                    "original": "SectionKindType",
-                    "resolved": "\"not-selected\" | \"selected\"",
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
-                        "SectionKindType": {
-                            "location": "import",
-                            "path": "../mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::SectionKindType"
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
                         }
-                    }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to reset limit",
+                    "tags": []
                 }
-            }];
+            }
+        };
     }
     static get watchers() {
         return [{
                 "propName": "checkboxes",
                 "methodName": "watchCheckboxes"
+            }, {
+                "propName": "limit",
+                "methodName": "watchLimit"
             }];
     }
 }
-//# sourceMappingURL=mg-input-checkbox-paginated.js.map

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

@@ -9,4 +9,3 @@ export const SectionKind = {
     SELECTED: 'selected',
     NOT_SELECTED: 'not-selected',
 };
-//# sourceMappingURL=mg-input-checkbox.conf.js.map