@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/collection/collection-manifest.json

@@ -14,8 +14,8 @@
     "components/atoms/mg-tooltip/mg-tooltip.js",
     "components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js",
     "components/molecules/inputs/mg-input/mg-input.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-checkbox/mg-input-checkbox.js",
     "components/molecules/inputs/mg-input-combobox/mg-input-combobox.js",
     "components/molecules/inputs/mg-input-date/mg-input-date.js",
     "components/molecules/inputs/mg-input-numeric/mg-input-numeric.js",
@@ -45,7 +45,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.0",
+    "version": "4.36.2",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -139,7 +139,7 @@ export class MgIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -10,3 +10,9 @@ export const classFieldset = 'mg-c-input--fieldset';
 export const classDisabled = 'mg-c-input--disabled';
 export const classReadonly = 'mg-c-input--readonly';
 export const classVerticalList = 'mg-c-input--vertical-list';
+/**
+ * Define cutom errors
+ */
+export const CustomError = {
+    NoValue: 'noValue',
+};

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

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
-import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { isObject, isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList } from "./mg-input.conf";
+import { initLocales } from "../../../../locales";
+const isValidErrorMessageType = (msg) => isObject(msg) && ['summary', 'details'].every(key => typeof msg[key] === 'string');
 /**
  * @slot - Input content
  */
@@ -8,6 +10,8 @@ export class MgInput {
     constructor() {
         this.slotLabel = 'label';
         this.slotError = 'error';
+        this.slotSummary = 'summary';
+        this.slotDetails = 'details';
         this.slotHelpText = 'help-text';
         // style
         this.classInput = 'mg-c-input';
@@ -49,6 +53,44 @@ export class MgInput {
          * Element is disabled
          */
         this.isVerticalList = false;
+        /**
+         * Render error message details element
+         */
+        this.renderErrorDetailsMessage = (message) => {
+            var _a, _b;
+            // remove error slot if it is NOT a MG-DETAIL
+            if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'MG-DETAILS') {
+                (_b = this.errorMessageSlotElement) === null || _b === void 0 ? void 0 : _b.remove();
+            }
+            // create OR update error summary
+            let summarySlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotSummary}]`);
+            if (summarySlotElement === null) {
+                summarySlotElement = document.createElement('span');
+                summarySlotElement.setAttribute('slot', this.slotSummary);
+            }
+            summarySlotElement.innerHTML = message.summary;
+            // create OR update error details
+            let detailsSlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotDetails}]`);
+            if (detailsSlotElement === null) {
+                detailsSlotElement = document.createElement('p');
+                detailsSlotElement.setAttribute('slot', this.slotDetails);
+                detailsSlotElement.classList.add('mg-c-input__error-details');
+            }
+            detailsSlotElement.innerHTML = message.details;
+            // create error mg-details
+            let mgDetails = this.element.querySelector(`mg-details[slot=${this.slotError}]`);
+            if (mgDetails === null) {
+                mgDetails = document.createElement('mg-details');
+                mgDetails.classList.add('mg-c-input__error');
+                mgDetails.toggleClosed = this.messages.details.toggleClosed;
+                mgDetails.toggleOpened = this.messages.details.toggleOpened;
+                mgDetails.hideSummary = true;
+                mgDetails.appendChild(summarySlotElement);
+                mgDetails.appendChild(detailsSlotElement);
+                this.element.appendChild(mgDetails);
+            }
+            this.errorMessageSlotElement = mgDetails;
+        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
@@ -86,16 +128,14 @@ export class MgInput {
         }
     }
     watchErrorMessage(newValue) {
-        var _a;
-        if (newValue !== undefined) {
+        if (isValidString(newValue) || isValidErrorMessageType(newValue)) {
             this.element.classList.add(this.classHasError);
-            this.renderErrorMessage();
         }
         else {
             this.element.classList.remove(this.classHasError);
-            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
-            this.errorMessageSlotElement = undefined;
         }
+        // update error message slot
+        this.renderErrorMessageSlot();
     }
     watchHelpText(newValue) {
         var _a;
@@ -124,14 +164,12 @@ export class MgInput {
         // Help text
         if (this.helpText !== undefined) {
             this.renderHelpText();
-            if (!ariaDescribedbyIDs.has(this.helpTextId))
-                ariaDescribedbyIDs.add(this.helpTextId);
+            ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
         if (this.errorMessage !== undefined) {
-            this.renderErrorMessage();
-            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
-                ariaDescribedbyIDs.add(this.helpTextErrorId);
+            this.renderErrorMessageSlot();
+            ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
             if (ariaDescribedbyIDs.size > 0) {
@@ -197,17 +235,41 @@ export class MgInput {
         this.element.appendChild(labelSlotElement);
     }
     /**
-     * Render error message
+     * Render error message element
      */
-    renderErrorMessage() {
-        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessageSlotElement === null) {
+    renderErrorStringMessage(message) {
+        var _a;
+        // remove error slot if it is a MG-DETAIL
+        if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-DETAILS') {
+            this.errorMessageSlotElement.remove();
+        }
+        // create element if it does NOT exist
+        else if (this.errorMessageSlotElement === null) {
             this.errorMessageSlotElement = document.createElement('div');
-            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
             this.element.appendChild(this.errorMessageSlotElement);
         }
-        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
-        this.errorMessageSlotElement.innerHTML = this.errorMessage;
+        this.errorMessageSlotElement.innerHTML = message;
+    }
+    /**
+     * Render error message slot element
+     */
+    renderErrorMessageSlot() {
+        var _a;
+        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
+        if (this.errorMessage !== undefined) {
+            if (typeof this.errorMessage === 'string') {
+                this.renderErrorStringMessage(this.errorMessage);
+            }
+            else {
+                this.renderErrorDetailsMessage(this.errorMessage);
+            }
+            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
+            this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
+        }
+        else {
+            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.errorMessageSlotElement = undefined;
+        }
     }
     /**
      * Render help text message
@@ -229,6 +291,9 @@ export class MgInput {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
         this.watchIdentifier(this.identifier);
         this.watchLabel();
         this.watchClass();
@@ -253,7 +318,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
+        return (h(Host, { key: '0641f834a725708ce254e82a86c3a75f1c183c0a', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '7d96f125694996407b8cecd9491366c39fd0d05f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '43720fcecc55de1cae61607b2ae2c3b224e18dbd', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1d9c6fc50758fd2b87d9a15b9983f6e944a9851e', class: "mg-c-input__input-container" }, h("div", { key: '983153a1e0d5777d11cc61af47a4231f093d7e9e', class: "mg-c-input__input" }, h("slot", { key: 'e3ae53d7484b193538c7c5ed68d02ddf3428eff4' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '2981238a76e52f4a9c5da6465934bb4edd653e96', class: "mg-c-input__help-text" }, h("slot", { key: 'feee3da8096260e11419b82cb2d281c8d73541d1', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '1d5a709cfe3c9a1f7da68a260dd480f189ee5301', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '4f9f9545ffbdc7c53b77c5153daaf9b15b360fd7', name: this.slotError }))))));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -417,9 +482,15 @@ export class MgInput {
                 "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "string | ErrorMessageDetailsType",
+                    "resolved": "string | { summary: string; details: string; }",
+                    "references": {
+                        "ErrorMessageDetailsType": {
+                            "location": "import",
+                            "path": "./mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::ErrorMessageDetailsType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -0,0 +1,21 @@
+import { isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+/**
+ * Define error message
+ * @param message - message to display
+ * @param details - message detail to display
+ * @returns formated MgInput["errorMessage"]
+ */
+export const defineErrorMessage = (message, details) => {
+    if (isValidString(message) && isValidString(details)) {
+        return {
+            summary: message,
+            details,
+        };
+    }
+    else if (isValidString(message)) {
+        return message;
+    }
+    else {
+        return undefined;
+    }
+};

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

@@ -4,7 +4,8 @@ import { h } from "@stencil/core";
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-export 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 => {
+export 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 }), 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

@@ -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
-         */
-        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 *
@@ -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"; }
@@ -196,26 +160,6 @@ export class MgInputCheckboxPaginated {
                 "setter": false,
                 "reflect": false
             },
-            "currentPage": {
-                "type": "number",
-                "attribute": "current-page",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Current page"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "1"
-            },
             "checkboxes": {
                 "type": "unknown",
                 "attribute": "checkboxes",
@@ -238,8 +182,7 @@ export class MgInputCheckboxPaginated {
                     "text": "Define checkboxes to paginate"
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "setter": false
             },
             "messages": {
                 "type": "unknown",
@@ -268,37 +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"
             }];
     }
 }