@mgdis/mg-components 6.14.0 → 6.15.0

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

@@ -90,7 +90,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'f2bcf91e8d639736514a55a73d0182339eda1455', class: this.classCollection.join() }, h("div", { key: '46f862fc2a3daf2f217c55feebd41abb76252de2', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'e2a0e9752a6739a684fd2668a8e8f0f792a0c38b', name: "illustration" })), h("div", { key: 'b037dd43ae59c07ca122b68b56dc3230a7aa94f2', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '3a99f08cfb68bd51fbd015d213bb462acbfdda1a', name: "title" }), h("slot", { key: '14490ee1e7f9470f433c6249d502bd0a4dd77ca3', name: "details" }))));
+        return (h("div", { key: 'b7cea46c2fad219e02009fa44c772c0a09a5234f', class: this.classCollection.join() }, h("div", { key: '56b956ee405886ef2de2ef413ac1bc6902f287b3', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '33183d226a2443ccf1763ebff4c48f670d1d77ec', name: "illustration" })), h("div", { key: '69a7e034da7e2aef8dc488f9275b4546e905513c', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '0eb9d5126f3d13380ea0a13a9eb754a7543e4178', name: "title" }), h("slot", { key: '088d3bae3be0d5e5d9fc8c07fee42dda39177fd6', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -98,7 +98,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         "direction": ["watchDirection"]
     }; }
     static get style() { return mgIllustratedMessageCss; }
-}, [1, "mg-illustrated-message", {
+}, [257, "mg-illustrated-message", {
         "size": [1],
         "direction": [1],
         "classCollection": [32]

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

@@ -1,31 +1,15 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './mg-button2.js';
-import { d as defineCustomElement$7 } from './mg-icon2.js';
-import { d as defineCustomElement$6 } from './mg-input2.js';
-import { d as defineCustomElement$5 } from './mg-input-select2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-pagination2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
-
-/**
- * List of all availables checkbox type
- */
-const checkboxTypes = ['checkbox', 'multi'];
-/**
- * mg-input-checkbox-paginated section kind value
- */
-const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
-};
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { f as formatID } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-button2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
  * Get checkboxes list template
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", 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.map(input => {
+const MgInputCheckboxList = (props) => Array.isArray(props.checkboxes) &&
+    props.checkboxes.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
@@ -36,11 +20,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
     constructor() {
         super();
         this.__registerHost();
-        this.massAction = createEvent(this, "mass-action", 7);
-        /*************
-         * Constantes *
-         *************/
-        this.offset = 10;
+        this.step = 10;
         /*************
          * Decorators *
          *************/
@@ -53,76 +33,45 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
          */
         this.disabled = false;
         /**
-         * Current page
+         * Page items limit to display
          */
-        this.currentPage = 1;
-        /**
-         * Define checkboxes to paginate
-         */
-        this.checkboxes = [];
-        /**
-         * Is checked items values expanded
-         */
-        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
-         */
-        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
+         * Handle load-more <mg-button> click 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 *
@@ -131,39 +80,39 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
      * 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 watchers() { return {
-        "checkboxes": ["watchCheckboxes"]
+        "checkboxes": ["watchCheckboxes"],
+        "limit": ["watchLimit"]
     }; }
-}, [2, "mg-input-checkbox-paginated", {
+}, [262, "mg-input-checkbox-paginated", {
         "readonly": [4],
         "disabled": [4],
         "name": [1],
         "invalid": [4],
-        "currentPage": [1026, "current-page"],
         "checkboxes": [16],
         "messages": [16],
-        "expanded": [32]
+        "limit": [32],
+        "resetLimit": [64]
     }, undefined, {
-        "checkboxes": ["watchCheckboxes"]
+        "checkboxes": ["watchCheckboxes"],
+        "limit": ["watchLimit"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-pagination", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-checkbox-paginated":
             if (!customElements.get(tagName)) {
@@ -171,41 +120,11 @@ function defineCustomElement() {
             }
             break;
         case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-pagination":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "mg-tooltip-content":
+        case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -214,4 +133,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MgInputCheckboxPaginated as M, SectionKind as S, MgInputCheckboxList as a, checkboxTypes as c, defineCustomElement as d };
+export { MgInputCheckboxPaginated as M, MgInputCheckboxList as a, defineCustomElement as d };