@mgdis/mg-components 6.21.0 → 6.22.1

package/dist/collection/collection-manifest.json

@@ -3,7 +3,6 @@
     "components/atoms/mg-badge/mg-badge.js",
     "components/atoms/mg-button/mg-button.js",
     "components/atoms/mg-icon/mg-icon.js",
-    "components/molecules/menus/mg-menu/mg-menu.js",
     "components/molecules/internals/mg-item-more/mg-item-more.js",
     "components/molecules/menus/mg-menu-item/mg-menu-item.js",
     "components/atoms/internals/mg-character-left/mg-character-left.js",
@@ -14,7 +13,6 @@
     "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-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",
@@ -27,8 +25,10 @@
     "components/molecules/inputs/mg-input-text/mg-input-text.js",
     "components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
     "components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
+    "components/molecules/menus/mg-menu/mg-menu.js",
     "components/molecules/mg-action-more/mg-action-more.js",
     "components/molecules/mg-alert/mg-alert.js",
+    "components/molecules/mg-breadcrumb/mg-breadcrumb.js",
     "components/molecules/mg-details/mg-details.js",
     "components/molecules/mg-fieldset/mg-fieldset.js",
     "components/molecules/mg-form/mg-form.js",
@@ -45,9 +45,10 @@
     "components/molecules/mg-table/mg-table.js",
     "components/molecules/mg-tabs/mg-tabs.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.40.1",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js

@@ -37,7 +37,7 @@ export class MgCharacterLeft {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '22f23b636aaebc8857e4efa2fdb87a85977c59bf', id: this.identifier, "aria-live": "polite" }, h("span", { key: '55addb97bc00800b1ec644b0eff68e779a03528a', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd5bd60b48b6a02cdaff4166f14e4ea6cf921f749', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '41b489eafc25e9fe2e32b54a72542090d79e1052', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'c9dd3eb15ebc866333d4e911e1a560cac1c07ef7', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '0e4664f577b8db68f0355fc92f9df251f945dedd', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     static get is() { return "mg-character-left"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js

@@ -42,7 +42,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a  
-        return (h(TagName, { key: '860f74509c87626d4af51641f0f48db99fa194b0', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '5eb0ca4d7f4061c0cff01e2de3adb9c98c42955a' }), this.required && !this.readonly && (h("span", { key: '0637de0d0dca9b7f87c9bb04fd44eadc6d0606cc', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'b5736467e3fd759eeabe9cf8ee6ed3cf73b8ebfc', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: 'd61ed048e1b2bb124281eb4067894d9a35abf778', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '3bad02b10f8e9bb536c5eba9bf85d4b4967a9d97' }), this.required && !this.readonly && (h("span", { key: 'f0fd90a79f4449a1a3b7ec76a3eeb96bcc2e4ee6', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '7ea29cfc494c5c5c2b65b62ea27caee5a41062ca', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }

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

@@ -126,7 +126,8 @@ export class MgBadge {
                         "BadgeVariantType": {
                             "location": "import",
                             "path": "./mg-badge.conf",
-                            "id": "src/components/atoms/mg-badge/mg-badge.conf.ts::BadgeVariantType"
+                            "id": "src/components/atoms/mg-badge/mg-badge.conf.ts::BadgeVariantType",
+                            "referenceLocation": "BadgeVariantType"
                         }
                     }
                 },

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

@@ -231,7 +231,8 @@ export class MgButton {
                         "VariantType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType",
+                            "referenceLocation": "VariantType"
                         }
                     }
                 },
@@ -276,7 +277,8 @@ export class MgButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -301,7 +303,8 @@ export class MgButton {
                         "SizeType": {
                             "location": "import",
                             "path": "./mg-button.conf",
-                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::SizeType"
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::SizeType",
+                            "referenceLocation": "SizeType"
                         }
                     }
                 },

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

@@ -50,7 +50,7 @@ export class MgCard {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
+        return (h("div", { key: 'fe5eff1e1d7c533cd533e27d3fb070a4e57194a8', class: this.classCollection.join() }, h("slot", { key: 'ca27dc4039d7bcaa21284714b7820de257625009' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +96,8 @@ export class MgCard {
                         "RadiusSizeType": {
                             "location": "import",
                             "path": "./mg-card.conf",
-                            "id": "src/components/atoms/mg-card/mg-card.conf.ts::RadiusSizeType"
+                            "id": "src/components/atoms/mg-card/mg-card.conf.ts::RadiusSizeType",
+                            "referenceLocation": "RadiusSizeType"
                         }
                     }
                 },

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

@@ -14,7 +14,7 @@ export class MgDivider {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
+        return (h("div", { key: 'a1b0e3b95ed9f52febab9f8d50b4053d1c13f7fb', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
             } }));

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

@@ -28,7 +28,7 @@ export class MgIcon {
             svgContainer.innerHTML = icons[icon];
             this.element.shadowRoot.append(svgContainer.firstChild);
             svgContainer.remove();
-            // update svg attributes
+            // Update svg attributes
             this.svg = this.element.shadowRoot.querySelector('svg');
             this.svg.setAttribute('aria-hidden', 'true');
             this.svg.setAttribute('focusable', 'false');
@@ -144,12 +144,13 @@ export class MgIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"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\" | \"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\" | \"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\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"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-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"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\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"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\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"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": "\"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\" | \"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\" | \"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\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"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-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"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\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"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\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"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",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -174,7 +175,8 @@ export class MgIcon {
                         "IconSizeType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType",
+                            "referenceLocation": "IconSizeType"
                         }
                     }
                 },
@@ -200,7 +202,8 @@ export class MgIcon {
                         "IconVariantType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType",
+                            "referenceLocation": "IconVariantType"
                         }
                     }
                 },
@@ -225,7 +228,8 @@ export class MgIcon {
                         "IconVariantStyleType": {
                             "location": "import",
                             "path": "./mg-icon.conf",
-                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType"
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType",
+                            "referenceLocation": "IconVariantStyleType"
                         }
                     }
                 },

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

@@ -84,7 +84,7 @@ export class MgTag {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '8edd72c80d7179fdb5c1c37caeaecb54c086df8c', class: this.classCollection.join() }, h("slot", { key: 'e6bf4574a943f83856a6a61cba480d54ff153cb3' })));
+        return (h("span", { key: '3604851191691e002f8f7a701e37abe0059238e3', class: this.classCollection.join() }, h("slot", { key: 'c51e18e61908772878f380d1ae798e5e5f43ca02' })));
     }
     static get is() { return "mg-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -110,7 +110,8 @@ export class MgTag {
                         "TagVariantType": {
                             "location": "import",
                             "path": "./mg-tag.conf",
-                            "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType"
+                            "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType",
+                            "referenceLocation": "TagVariantType"
                         }
                     }
                 },

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js

@@ -11,7 +11,7 @@ export class MgTooltipContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
+        return (h(Host, { key: 'efe7a2b2622713929caf9a2e114e7a1267643f5e', role: "tooltip" }, h("span", { key: '00f0066cfa058e55a88533f8b6daaa8ab283b29c', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'fd952c4db7b77b54591bf2c58012096579de45c2', name: "arrow" })));
     }
     static get is() { return "mg-tooltip-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -364,7 +364,7 @@ export class MgTooltip {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '1f5ee653d58185c2ab15b213ad323adaabca605f' }, h("slot", { key: 'd0c615db4429e84a295d01269c268f9239da85c5' }), h("slot", { key: 'e6c6deb2f94ab883da2a62fa53cb299f5ec83a06', name: "content" })));
+        return (h(Host, { key: '8d1a0690f0b44381de181c2ea1f9e4c883a1af57' }, h("slot", { key: 'ae45df312e6a251a72b8ace11eb154c5ad13b4ae' }), h("slot", { key: 'fdbb17e42291cd785ff188df14029bcd59ba4c13', name: "content" })));
     }
     static get is() { return "mg-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -429,7 +429,8 @@ export class MgTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },

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

@@ -339,7 +339,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
+        return (h(Host, { key: 'a1db280d19eead30e7ae27eb6e395e58b35baa63', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '282f5776a9269272507f3e00f5dce690c9a604f4', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'b122979a159912d9c34bb024021257f9f88e6ff4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '098d3a7329fa0b5f37534fdf2df89e0468dcbe2a', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -443,7 +443,8 @@ export class MgInput {
                         "labelHeading": {
                             "location": "import",
                             "path": "./mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading",
+                            "referenceLocation": "labelHeading"
                         }
                     }
                 },
@@ -507,7 +508,8 @@ export class MgInput {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "./mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

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

@@ -4,7 +4,7 @@ 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-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
+export const MgInputCheckboxList = (props) => (h("div", { class: "mg-c-input__input-group-container", "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)));
+    return (h("div", { 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/MgInputCheckboxPaginated.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+import { MgInputCheckboxList } from "./MgInputCheckboxList";
+import { formatID } from "@mgdis/core-ui-helpers/dist/utils";
+/**
+ * Get items from checkboxes and limit
+ * @param checkboxes - checkboxes to slice
+ * @param limit - number of items to return
+ * @returns list of items to display in section
+ */
+const getItems = (checkboxes, limit) => [...checkboxes].slice(0, limit);
+/**
+ * Component has next checkboxes to display
+ * @param checkboxes - checkboxes to check
+ * @param limit - number of items to display
+ * @returns truthy if have next elements
+ */
+const hasNext = (checkboxes, limit) => checkboxes.length > limit;
+/**
+ * Internal component use to manage sections instances
+ * @param props - MgInputCheckboxList Interface Props
+ * @returns input template
+ */
+export const MgInputCheckboxPaginated = (props) => {
+    const items = getItems(props.checkboxes, props.limit);
+    const listId = formatID(props.messages.label);
+    const tabId = `tab-info-${props.key}`;
+    /**
+     * Handle load-more <mg-button> click event
+     */
+    const handleLoadMoreClick = () => {
+        if (hasNext(props.checkboxes, props.limit)) {
+            props.handleLoadMore();
+        }
+    };
+    return (h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` }, 
+    // Mass action depends on all checkboxes list, not only displayed items
+    typeof props.handleMassAction === 'function' && props.checkboxes.length > 0 && props.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), h("div", { class: "mg-c-input__tabs-content" }, h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0 ? props.messages.noValue : props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
+};

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

@@ -6,6 +6,7 @@ export const checkboxTypes = ['checkbox', 'multi'];
  * mg-input-checkbox-paginated section kind value
  */
 export const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
+    NOT_SELECTED: 0,
+    SELECTED: 1,
+    SEARCH: 2,
 };

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

@@ -1,12 +1,13 @@
 import { h } from "@stencil/core";
 import { ClassList, cleanString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { checkboxTypes, SectionKind } from "./mg-input-checkbox.conf";
+import { checkboxTypes, SectionKind, } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
 import { classDisabled, classReadonly, classFieldset, classVerticalList } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Status } from "../../mg-tabs/mg-tabs.conf";
+import { MgInputCheckboxPaginated } from "./MgInputCheckboxPaginated";
 /**
- * type CheckboxItem validation function
+ * type ICheckboxItem validation function
  * @param items - Checkbox item
  * @returns match item type
  */
@@ -26,6 +27,7 @@ export class MgInputCheckbox {
         // "multi" setup
         this.multiStart = 5;
         this.searchStart = 10;
+        this.paginatedStep = 10;
         // popover variables
         this.hasOpenedPopover = false;
         this.checkboxesId = 'checkboxes-list';
@@ -91,6 +93,10 @@ export class MgInputCheckbox {
          * Define <mg-tabs> active-tab
          */
         this.activeTab = 1;
+        /**
+         * Paginated sections limit per key
+         */
+        this.paginatedLimits = {};
         /**
          * Handle input event
          * @param event - input event
@@ -136,8 +142,9 @@ export class MgInputCheckbox {
          * @param event - input value-change event
          */
         this.handleSearchChange = (event) => {
-            this.searchValue = event.detail;
             event.stopPropagation();
+            event.preventDefault();
+            this.searchValue = event.detail;
         };
         /**
          * Handle <mg-tabs> tab-change event
@@ -269,9 +276,15 @@ export class MgInputCheckbox {
          * Reset <mg-input-checkbox-paginated> limit state
          */
         this.resetTabsLimit = () => {
-            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
-                component.resetLimit();
-            });
+            this.paginatedLimits = {};
+        };
+        /**
+         * Handle load-more action for a paginated section
+         * @param key - section key
+         */
+        this.handlePaginatedLoadMore = (key) => {
+            var _a;
+            this.paginatedLimits = Object.assign(Object.assign({}, this.paginatedLimits), { [key]: ((_a = this.paginatedLimits[key]) !== null && _a !== void 0 ? _a : this.paginatedStep) + this.paginatedStep });
         };
         /**
          * Renders the readonly value of the input.
@@ -292,7 +305,7 @@ export class MgInputCheckbox {
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, ICheckboxItem. Passed value: ${toString(newValue)}.`);
         }
     }
     validateType(newValue) {
@@ -517,7 +530,7 @@ export class MgInputCheckbox {
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
+    renderCheckboxTabs(props) {
         const handleMassAction = (kind) => () => {
             const displayItems = this.getDisplayItems();
             // update only displayed items
@@ -528,39 +541,43 @@ export class MgInputCheckbox {
             });
             this.updateValues();
         };
-        const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
+        const [checkedValues, notCheckedValues] = props.checkboxes.reduce((acc, curr) => {
             acc[curr.value ? 0 : 1].push(curr);
             return acc;
         }, [[], []]);
         const sections = [
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), key: SectionKind.NOT_SELECTED, handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), key: SectionKind.SELECTED, handleMassAction: handleMassAction(SectionKind.SELECTED) }),
         ];
         return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
                 label: section.messages.title,
                 badge: { value: section.checkboxes.length, label: this.messages.input.checkbox.sections.badge.label, role: 'information' },
                 status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
-            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section, key) => (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab", slot: `tab_content-${key + 1}` }, section, { key: section.messages.title }), section.checkboxes.length > 0 && section.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: section.messages.tooltip }, h("mg-button", { variant: "link", onClick: section.handleMassAction }, section.messages.action))))))));
+            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
+            var _a;
+            return (h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
+        })));
     }
     /**
      * render checkbox multi element
      * @returns html element
      */
     renderCheckboxMulti() {
+        var _a;
         const selectedValuesNb = this.getSelectedItems().length;
-        const checkboxes = this.getDisplayItems();
-        const checkboxPaginatedProps = {
+        const props = {
             readonly: this.readonly,
             disabled: this.disabled,
-            identifier: this.identifier,
+            checkboxes: this.getDisplayItems(),
         };
+        const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
         return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
                 if (el !== null)
                     this.mgPopover = el;
             } }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
             h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
-            this.searchValue.length > 0 ? (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab" }, checkboxPaginatedProps, { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), checkboxes: checkboxes, key: "search" }))) : (this.renderCheckboxTabs(checkboxes, checkboxPaginatedProps)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid })))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
+            this.searchValue.length > 0 ? h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
+        ]) : (h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -578,7 +595,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '5addea288b5c87fec33a56449d14f861aefd465d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '11b725ebb111707aaf7dc39d191fe6a9efb25ea6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -598,13 +615,14 @@ export class MgInputCheckbox {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "CheckboxValue[]",
-                    "resolved": "CheckboxValue[]",
+                    "original": "ICheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
-                        "CheckboxValue": {
+                        "ICheckboxValue": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxValue"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::ICheckboxValue",
+                            "referenceLocation": "ICheckboxValue"
                         }
                     }
                 },
@@ -627,7 +645,8 @@ export class MgInputCheckbox {
                         "CheckboxType": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType",
+                            "referenceLocation": "CheckboxType"
                         }
                     }
                 },
@@ -869,7 +888,8 @@ export class MgInputCheckbox {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -1010,7 +1030,8 @@ export class MgInputCheckbox {
             "searchValue": {},
             "searchResults": {},
             "selectValuesButtonKey": {},
-            "activeTab": {}
+            "activeTab": {},
+            "paginatedLimits": {}
         };
     }
     static get events() {
@@ -1026,7 +1047,7 @@ export class MgInputCheckbox {
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
-                    "resolved": "CheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
                         "HTMLMgInputCheckboxElement": {
                             "location": "global",