@mgdis/mg-components 6.14.0 → 6.16.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.3",
     "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-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-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) => (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"
             }];
     }
 }

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

@@ -4,6 +4,7 @@ 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";
 /**
  * type CheckboxItem validation function
  * @param items - Checkbox item
@@ -26,6 +27,7 @@ export class MgInputCheckbox {
         this.searchStart = 10;
         // popover variables
         this.hasOpenedPopover = false;
+        this.checkboxesId = 'checkboxes-list';
         /**
          * Define input name
          * If not set the value equals the identifier
@@ -84,6 +86,10 @@ export class MgInputCheckbox {
          * Select values button text local key
          */
         this.selectValuesButtonKey = 'editButton';
+        /**
+         * Define <mg-tabs> active-tab
+         */
+        this.activeTab = 1;
         /**
          * Handle input event
          * @param event - input event
@@ -132,6 +138,14 @@ export class MgInputCheckbox {
             this.searchValue = event.detail;
             event.stopPropagation();
         };
+        /**
+         * Handle <mg-tabs> tab-change event
+         * @param event - tab change event
+         */
+        this.handleActiveTabChange = (event) => {
+            this.activeTab = event.detail;
+            this.resetTabsLimit();
+        };
         /**
          * popover display-change handler
          * @param event - mg-popover display-change custom event
@@ -145,26 +159,11 @@ export class MgInputCheckbox {
             if (!event.detail) {
                 // reset search value
                 this.searchValue = '';
-                // reset pagintated section current page
-                Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {
-                    element.currentPage = 1;
-                });
+                this.resetTabsLimit();
                 this.checkValidity();
             }
-        };
-        /**
-         * Handle select all button
-         * @param event - mass action event trigger a global select/unselect on values
-         */
-        this.handleMassAction = (event) => {
-            const displayItems = this.getDisplayItems();
-            // update only displayed items
-            displayItems.forEach(item => {
-                if (item.disabled !== true) {
-                    item.value = event.detail !== SectionKind.SELECTED;
-                }
-            });
-            this.updateValues();
+            // init active tab to selected if some values are checked
+            this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
         };
         /**
          * Update values
@@ -262,6 +261,14 @@ export class MgInputCheckbox {
          * @returns selected checkboxItems
          */
         this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
+        /**
+         * Reset <mg-input-checkbox-paginated> limit state
+         */
+        this.resetTabsLimit = () => {
+            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
+                component.resetLimit();
+            });
+        };
         /**
          * Renders the readonly value of the input.
          * @returns The rendered readonly value.
@@ -273,7 +280,7 @@ export class MgInputCheckbox {
          * Renders the MgInputCheckboxList component.
          * @returns The rendered MgInputCheckboxList component.
          */
-        this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid }));
+        this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
@@ -497,23 +504,30 @@ export class MgInputCheckbox {
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    renderCheckboxBySection(checkboxes) {
+    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
+        const handleMassAction = (kind) => () => {
+            const displayItems = this.getDisplayItems();
+            // update only displayed items
+            displayItems.forEach(item => {
+                if (!item.disabled) {
+                    item.value = kind !== SectionKind.SELECTED;
+                }
+            });
+            this.updateValues();
+        };
         const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
             acc[curr.value ? 0 : 1].push(curr);
             return acc;
         }, [[], []]);
-        const baseSection = {
-            readonly: this.readonly,
-            disabled: this.disabled,
-            identifier: this.identifier,
-        };
         const sections = [
-            Object.assign(Object.assign({}, baseSection), { checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
-            Object.assign(Object.assign({}, baseSection), { checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
+            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) }),
         ];
-        return sections
-            .filter(section => section.checkboxes.length)
-            .map(section => h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction, key: section.messages })));
+        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))))))));
     }
     /**
      * render checkbox multi element
@@ -522,14 +536,18 @@ export class MgInputCheckbox {
     renderCheckboxMulti() {
         const selectedValuesNb = this.getSelectedItems().length;
         const checkboxes = this.getDisplayItems();
+        const checkboxPaginatedProps = {
+            readonly: this.readonly,
+            disabled: this.disabled,
+            identifier: this.identifier,
+        };
         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.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
-            h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
-            h("div", { key: "sections-container", class: "mg-c-input__sections" }, this.renderCheckboxBySection(checkboxes)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), 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)))));
+            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)))));
     }
     /**
      * Render
@@ -547,7 +565,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: 'a6afc33b5c437000945fca2d825526123a7c4fdf', 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: '84d13ac702497773013daa72357e4d1dcf4ebb30', 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"; }
@@ -979,7 +997,8 @@ export class MgInputCheckbox {
             "displaySearchInput": {},
             "searchValue": {},
             "searchResults": {},
-            "selectValuesButtonKey": {}
+            "selectValuesButtonKey": {},
+            "activeTab": {}
         };
     }
     static get events() {

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

@@ -175,6 +175,7 @@ export class MgInputCombobox {
          * @param event - keyboard event
          */
         this.handleFilterKeydown = (event) => {
+            var _a;
             if (this.disabled || event.ctrlKey || event.shiftKey)
                 return;
             let guard = false;
@@ -183,10 +184,11 @@ export class MgInputCombobox {
                 case Keys.TAB:
                 case Keys.ENTER:
                     guard = event.key === Keys.ENTER;
-                    const option = this.option || this.options.items.find(this.isCurrentOption);
+                    const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
                     // Sets the value to the content of the focused option in the listbox.
-                    if (this.popoverDisplay)
-                        this.setValue(this.page.total > 0 ? option : null);
+                    if (this.popoverDisplay) {
+                        this.setValue(option);
+                    }
                     // Closes the popover.
                     this.popoverDisplay = false;
                     break;
@@ -353,8 +355,8 @@ export class MgInputCombobox {
             else if (this.loadingAction === 'load-more') {
                 index = this.page.items.length - this.page.baseIndex;
             }
-            // when action require a loadMore we fetch the API else we report action to next tick
-            // Set "load more" if action match OR if next item not available in the current page
+            // when action require a showMore we fetch the API else we report action to next tick
+            // Set "Show more" if action match OR if next item not available in the current page
             if (action.name === 'load-more') {
                 // wait for new element render and update scroll position
                 // set component loading
@@ -400,7 +402,7 @@ export class MgInputCombobox {
          * @returns promise
          */
         this.goToNextPage = () => {
-            this.loadMore.emit();
+            this.showMore.emit();
             if (Boolean(this.fetchurl)) {
                 return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
                     if (!Boolean(nextPage))
@@ -739,7 +741,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: '08016aeb2db2bd5c700faa5951166a39d14dc045', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+        return (h("mg-input", { key: '79e5263cd3b1c0fa0b3f386a547f2bdd48a33b28', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
@@ -760,7 +762,7 @@ export class MgInputCombobox {
             this.page.next && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, disabled: this.isLoading, "full-width": true, "disable-on-click": true, onClick: this.handleLoadMoreButton, "aria-controls": listId, ref: (el) => {
                     if (el !== null)
                         this.loadMoreElement = el;
-                } }, h("mg-icon", { icon: "chevron-down" }), this.messages.input.combobox.loadMore)),
+                } }, h("mg-icon", { icon: "chevron-down" }), this.messages.input.showMore)),
         ], popoverContent === 'notfound' && (h("p", { id: popoverContent, class: "mg-c-input__popover-info" }, this.messages.input.combobox.notFound)), popoverContent === 'notavailable' && (h("p", { id: popoverContent, class: "mg-c-input__popover-info" }, this.messages.input.combobox.notAvailable)))))));
     }
     static get is() { return "mg-input-combobox"; }
@@ -1291,7 +1293,7 @@ export class MgInputCombobox {
                     "references": {}
                 }
             }, {
-                "method": "loadMore",
+                "method": "showMore",
                 "name": "load-more",
                 "bubbles": true,
                 "cancelable": true,

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

@@ -362,7 +362,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '1c9a935b76acf5c3ca6a2f53904f31508d265b49', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '71daaa8818ab7120c61a45399ae016a4621c8f50', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));

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

@@ -241,6 +241,11 @@ export class MgInputNumeric {
         var _a;
         // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
         if (typeof newValue === 'string') {
+            // Check if integer value starts with '0' (leading zero)
+            if (newValue.startsWith('0') && parseInt(newValue, 10) > 0) {
+                // Remove leading zero
+                newValue = newValue.substring(1);
+            }
             // Split number and decimal
             const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
             // Regex
@@ -457,7 +462,7 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '61da1f6ccfcb9932895dc79e7e189fca7083a4ee', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'ca551b49b1b4dc98fd4e943e51de8a32bc78882b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {

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

@@ -237,7 +237,7 @@ export class MgInputPassword {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b10f4e1d629bc56d0505739d19047a2b73c6baaa', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '4bdaa6d26811f66fa43b580ac6e85c61b308ee92', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));

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

@@ -272,7 +272,7 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '704aded91c21206a8b8ccced19a1a9c1ad55745e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: '048aa732e7f8593701c9397e571b97584bc5e37b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));