@mgdis/mg-components 5.13.1 → 5.15.0

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -39,6 +39,9 @@
   gap: 0.6rem;
   min-height: calc(var(--font-size) * var(--line-height));
 }
+.mg-details__toggle-icon.mg-details__toggle-icon--reverse {
+  transform: rotate(180deg);
+}
 .mg-details__details {
   margin-top: var(--mg-details-spacing);
 }

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -35,7 +35,7 @@ export class MgDetails {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -14,18 +14,23 @@ export class MgForm {
       this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
-      if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
-        // Get required fields
-        const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !input.readonly);
-        // All fields are required
+      const isEditable = input => !(input.disabled || input.readonly);
+      const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
+      if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
+        // Get editable inputs
+        const editableInputs = this.mgInputs.filter(isEditable);
+        // Get required inputs
         // mg-input-toggle can not be required
-        if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
+        const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+        // All inputs are required
+        if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
+          (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
+          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'allRequiredSingle' : 'allRequired'];
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
+          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'requiredSingle' : 'required'];
         }
       }
     };
@@ -126,7 +131,7 @@ export class MgForm {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
         });
       }
     });

package/dist/collection/components/molecules/mg-message/mg-message.css

@@ -5,6 +5,10 @@
   --mg-card-overflow: hidden;
 }
 
+:host([hide]) {
+  display: none;
+}
+
 .mg-message {
   display: inline-block;
   min-height: var(--default-size);

package/dist/collection/components/molecules/mg-modal/mg-modal.js

@@ -3,43 +3,60 @@ import { createID, ClassList, focusableElements } from '../../../utils/component
 import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    // Modal focusable elements
+    this.modalFocusableElements = [];
     // Classes
     this.classHide = 'mg-modal--hide';
     // IDs
-    this.closeButtonId = '';
     this.titleId = '';
+    /**
+     * Handle last focusable element
+     * @param event - keyboard event
+     */
+    this.handleLastFocusableElement = (event) => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        event.preventDefault();
+        this.modalFocusableElements[0].focus();
+      }
+    };
+    /**
+     * Handle first focusable element
+     * @param event - keyboard event
+     */
+    this.handleFirstFocusableElement = (event) => {
+      if (event.key === 'Tab' && event.shiftKey) {
+        event.preventDefault();
+        this.getLastFocusableElement().focus();
+      }
+    };
+    /**
+     * Get last focusablmeElement
+     * @returns last modal focusable element
+     */
+    this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
     /**
      * Method to manage focus on modal focusable elements
      */
     this.setFocus = () => {
       // Get all focusable elements
-      this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
-        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
-        return acc;
-      }, []);
-      // When close button is enabled it's the first focusable element.
-      if (this.closeButton) {
-        this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
-      }
-      // It at least one
-      if (this.modalFocusableElements.length >= 1) {
-        // Set focus on first element
-        this.modalFocusableElements[0].focus();
+      const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
+      // If at least one
+      if (allFocusableElements.length > 0) {
+        this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {
+          acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+          return acc;
+        }, []);
+        // When close button is enabled it's the first focusable element.
+        if (this.closeButton && this.closeButtonElement !== undefined) {
+          this.modalFocusableElements.unshift(this.closeButtonElement);
+        }
         // Add event listener on last element
-        const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
-        lastFocusableElement.addEventListener('keydown', event => {
-          if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            this.modalFocusableElements[0].focus();
-          }
-        });
+        this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
         // Add event listener on first element (case shift + tab)
-        this.modalFocusableElements[0].addEventListener('keydown', event => {
-          if (event.key === 'Tab' && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableElement.focus();
-          }
-        });
+        this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
       }
     };
     /*************
@@ -65,15 +82,21 @@ export class MgModal {
     }
   }
   validateHide(newValue) {
+    var _a;
     if (newValue) {
       this.componentHide.emit();
       this.classCollection.add(this.classHide);
       document.body.style.overflow = this.bodyOverflow;
+      // reset focus handlers
+      (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
+      if (this.modalFocusableElements.length > 0)
+        this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
     }
     else {
       this.componentShow.emit();
       this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
+      this.setFocus();
     }
   }
   /**
@@ -100,9 +123,6 @@ export class MgModal {
     // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
     this.titleId = `${this.identifier}-title`;
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
@@ -112,21 +132,26 @@ export class MgModal {
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
-      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
-        this.setFocus();
+      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
+      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
+        // Set focus on first element
+        this.modalFocusableElements[0].focus();
       }
     }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
-    // Set focus if display on load
-    if (!this.hide) {
-      this.setFocus();
-    }
   }
   /**
    * Render
    * @returns HTML Element
    */
   render() {
-    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
+        if (el !== null) {
+          // store closeButton Element
+          this.closeButtonElement = el;
+          // add close button element to modalFocusableElements when it is render
+          this.modalFocusableElements.unshift(this.closeButtonElement);
+        }
+      } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { NavigationAction } from './mg-pagination.conf';
 import { initLocales } from './../../../locales';
@@ -98,7 +98,7 @@ export class MgPagination {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-    return (h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+    return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
   }
   static get is() { return "mg-pagination"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -41,6 +41,9 @@
   --font-size: 1.4rem;
   --mg-button-font-weight: 600;
 }
+.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse {
+  transform: rotate(180deg);
+}
 .mg-panel__content {
   padding: var(--mg-panel-content-padding);
 }

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -60,7 +60,7 @@ export class MgPanel {
      * Render collapse button
      * @returns collpase button
      */
-    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
     /**
      * Render edit button
      * @returns edit Button

package/dist/collection/styles/global.scss

@@ -30,13 +30,6 @@
 // Utilities
 @import './utilities.scss';
 
-/**
- * Components style
- * molecules
- */
-
-@import './components.scss';
-
 /* Atoms */
 
 // <mg-badge>

package/dist/components/mg-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
+const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle-icon.mg-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -43,7 +43,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],

package/dist/components/mg-form.js

@@ -22,18 +22,23 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
-      if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
-        // Get required fields
-        const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !input.readonly);
-        // All fields are required
+      const isEditable = input => !(input.disabled || input.readonly);
+      const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
+      if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
+        // Get editable inputs
+        const editableInputs = this.mgInputs.filter(isEditable);
+        // Get required inputs
         // mg-input-toggle can not be required
-        if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
+        const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+        // All inputs are required
+        if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
+          (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
+          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'allRequiredSingle' : 'allRequired'];
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
+          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'requiredSingle' : 'required'];
         }
       }
     };
@@ -134,7 +139,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
         });
       }
     });

package/dist/components/mg-icon2.js

@@ -82,6 +82,7 @@ const iconList = [
 	"exclamation-circle-outline",
 	"exclamation-stamp",
 	"exclamation-triangle",
+	"exclamation-triangle-outline",
 	"eye",
 	"eye-slash",
 	"file",
@@ -110,6 +111,7 @@ const iconList = [
 	"home",
 	"home-outline",
 	"info-circle",
+	"info-circle-outline",
 	"key",
 	"laptop",
 	"life-ring",
@@ -156,6 +158,8 @@ const iconList = [
 	"user",
 	"user-circle",
 	"user-group",
+	"user-lock",
+	"user-outline",
 	"user-pen-fancy-outline",
 	"user-plus",
 	"user-question-outline",
@@ -231,7 +235,8 @@ const icons = {
 'exclamation-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" stroke="currentColor" d="M8.75 9.5h.5v-6h-2.5v6h2Zm.5 1V10h-2.5v2.5h2.5v-2ZM1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z"/></svg>',
 'exclamation-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4h1.5Zm0 8v-1.5h-1.5V12h1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8Z"/></svg>',
 'exclamation-stamp': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01Zm-6.36 3.35H7.36v-1.34h1.28v1.34Zm0-2.67H7.36V4.67h1.28v4.01Z"/></svg>',
-'exclamation-triangle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z"/></svg>',
+'exclamation-triangle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1L8 2Zm-.75 4.5h1.5V10h-1.5V6.5Zm1.5 6V11h-1.5v1.5h1.5Z" clip-rule="evenodd"/></svg>',
+'exclamation-triangle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5h1.5Zm0 6V11h-1.5v1.5h1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14L8 2Zm0 1.985L2.741 13h10.518L8 3.985Z" clip-rule="evenodd"/></svg>',
 'eye': '<svg aria-hidden="true" viewBox="0 0 16 16"><circle cx="8.01" cy="7.96" r="2.44" fill="currentColor"/><path fill="currentColor" d="M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z"/></svg>',
 'eye-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M10.25 7a2.43 2.43 0 0 0-2.08-1.46Zm-3.8-.9a2.43 2.43 0 1 0 3.85 2.69Z"/><path fill="currentColor" d="M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z"/></svg>',
 'file': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z"/><path fill="currentColor" d="M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z"/></svg>',
@@ -259,7 +264,8 @@ const icons = {
 'history': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67a6.37 6.37 0 0 0-4.4 1.75l-.91-.91a.6.6 0 0 0-.85 0 .58.58 0 0 0-.18.43v3.43a.61.61 0 0 0 .58.63h3.44a.62.62 0 0 0 .62-.62.69.69 0 0 0-.18-.38L5.05 4.87a4.29 4.29 0 1 1 .1 6.36.3.3 0 0 0-.41 0l-1 1a.3.3 0 0 0 0 .42A6.33 6.33 0 1 0 8 1.67Z"/><path fill="currentColor" d="m9.85 9.3-.36.36a.3.3 0 0 1-.43 0L7.45 8V5.15a.3.3 0 0 1 .3-.3h.5a.3.3 0 0 1 .3.3v2.43l1.3 1.3a.31.31 0 0 1 0 .42Z"/></svg>',
 'home': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83Z"/></svg>',
 'home-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83Zm-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13Z"/></svg>',
-'info-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67ZM9 12a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V7.32A.29.29 0 0 1 7.33 7h1.32a.29.29 0 0 1 .35.3Zm0-6.74a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V4a.29.29 0 0 1 .28-.3h1.32a.29.29 0 0 1 .3.28V4Z"/></svg>',
+'info-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7.75 4V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z" clip-rule="evenodd"/></svg>',
+'info-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0Z" clip-rule="evenodd"/></svg>',
 'key': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67H8.44ZM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33C5.4 6.67 6 7.27 6 8c0 .73-.58 1.32-1.31 1.33h-.02Z"/></svg>',
 'laptop': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.89 12.08c.68-.02 1.23-.58 1.22-1.26v-6.9c0-.68-.54-1.24-1.22-1.25H3.11c-.68.01-1.23.57-1.22 1.25v6.9c-.01.68.53 1.25 1.22 1.26H.67c-.01.68.53 1.24 1.21 1.25h12.23c.68 0 1.23-.56 1.22-1.24h-2.44ZM3.11 3.92h9.78v6.9H3.11v-6.9ZM8 12.71c-.34 0-.62-.29-.61-.63 0-.34.27-.61.61-.61.34 0 .61.27.61.61 0 .34-.27.63-.61.63Z"/></svg>',
 'life-ring': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm5.14 3.53-1.88 1.88a3.91 3.91 0 0 0-1.34-1.34l1.88-1.88a6.55 6.55 0 0 1 1.34 1.34ZM8 10.84A2.84 2.84 0 1 1 10.84 8 2.84 2.84 0 0 1 8 10.84Zm-3.8-8 1.88 1.9a3.91 3.91 0 0 0-1.34 1.34L2.86 4.2A6.55 6.55 0 0 1 4.2 2.86ZM2.86 11.8l1.88-1.88a3.91 3.91 0 0 0 1.34 1.34L4.2 13.14a6.55 6.55 0 0 1-1.34-1.34Zm8.94 1.34-1.88-1.88a3.91 3.91 0 0 0 1.34-1.34l1.88 1.88a6.55 6.55 0 0 1-1.34 1.34Z"/></svg>',
@@ -303,9 +309,11 @@ const icons = {
 'unlink': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38Zm-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09-.67-.72-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38L8.64 9.76Zm4.61-7h-.02a3.778 3.778 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32Zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03 11.55 11.55Z"/></svg>',
 'unlock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 13.94V7a1.37 1.37 0 0 0-1.28-1.44h-.72v-1.4A3.422 3.422 0 0 0 8 .67 3.4 3.4 0 0 0 4.68 4h1.26C6 2.9 6.9 2.03 8 2c1.17.03 2.1 1 2.07 2.17v1.39H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39ZM8 11.84c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Z"/></svg>',
 'upload': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z"/></svg>',
-'user': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z"/></svg>',
+'user': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 9a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4H6Z" clip-rule="evenodd"/></svg>',
 'user-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z"/></svg>',
 'user-group': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z"/></svg>',
+'user-lock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM5 8a4 4 0 0 0-4 4 1 1 0 0 0 1 1h7v-1.5a1.5 1.5 0 0 1 1.036-1.427c.109-.63.452-1.178.938-1.553A3.982 3.982 0 0 0 9 8H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M10.5 11h.5v-.5a1.5 1.5 0 0 1 3 0v.5h.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5Zm2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0Z" clip-rule="evenodd"/></svg>',
+'user-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm1 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-8 8a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3H3Zm-1 0a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>',
 'user-pen-fancy-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3Zm3.62 8.46-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57Zm3.44-3.24-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78ZM9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z"/></svg>',
 'user-plus': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2a.36.36 0 0 0-.35-.33h-.65a.36.36 0 0 0-.35.33v1.33H10a.34.34 0 0 0-.33.34v.66a.34.34 0 0 0 .33.34h1.3V6a.37.37 0 0 0 .35.33h.65a.37.37 0 0 0 .35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34ZM9.28 9.77h-.2a5.19 5.19 0 0 1-3.91 0H5a3 3 0 0 0-3.3 2.69v.72A1.27 1.27 0 0 0 3 14.33h8.25a1.26 1.26 0 0 0 1.36-1.14v-.68a3 3 0 0 0-3.24-2.75h-.09ZM7.13 3.7A2.64 2.64 0 1 1 4.5 6.34 2.64 2.64 0 0 1 7.13 3.7Z"/></svg>',
 'user-question-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z"/></svg>',

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

@@ -66,7 +66,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
      * Toogle items button handler
      */
     this.handleToggleClick = () => {
-      this.itemsExpanded = !this.itemsExpanded;
+      this.expanded = !this.expanded;
     };
     /**
      * Method to get a array range
@@ -96,7 +96,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
     this.messages = undefined;
     this.titleKind = undefined;
     this.currentPage = 1;
-    this.itemsExpanded = true;
+    this.expanded = true;
   }
   validateCheckboxes(newValue, oldValue) {
     // after each array.length update we reset pagination
@@ -140,7 +140,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
     const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
     const itemsContainerId = `items-${this.sectionKind}-container`;
     const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
-    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.itemsExpanded.toString() }, h("mg-icon", { icon: this.itemsExpanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.itemsExpanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.itemsExpanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
+    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (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', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { 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 > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
   }
   static get watchers() { return {
     "checkboxes": ["validateCheckboxes"],
@@ -155,7 +155,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
     "messages": [16],
     "titleKind": [32],
     "currentPage": [32],
-    "itemsExpanded": [32]
+    "expanded": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-input-select2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './mg-icon2.js';
 import { d as defineCustomElement$2 } from './mg-input-title2.js';
 import { d as defineCustomElement$1 } from './mg-tooltip2.js';
 
-const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
+const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
 
 /**
  * Check if item is a well configured option
@@ -277,7 +277,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "required": [4],
     "readonly": [4],
     "disabled": [4],
-    "mgWidth": [8, "mg-width"],
+    "mgWidth": [520, "mg-width"],
     "tooltip": [1],
     "helpText": [1, "help-text"],
     "valid": [1028],

package/dist/components/mg-message.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
 
-const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-message,mg-message{max-width:100%}";
 
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {