@mgdis/mg-components 5.10.1 → 5.11.0

package/dist/cjs/mg-components.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e1091ab.js');
+const index = require('./index-03d2557d.js');
 
 /*
  Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-checkbox",{"value":[1040],"type":[1],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e1091ab.js');
-const mgMenu_conf = require('./mg-menu.conf-196151fe.js');
+const index = require('./index-03d2557d.js');
+const mgMenu_conf = require('./mg-menu.conf-05ec32a3.js');
 
 /**
  * MgItemMore type guard

package/dist/cjs/{mg-menu.conf-196151fe.js → mg-menu.conf-05ec32a3.js}

@@ -18,6 +18,13 @@ const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
 	select: {
 		placeholder: "Select a value"
+	},
+	checkbox: {
+		selectedValues: "{nb} selected values",
+		selectedValue: "{nb} selected value",
+		editButton: "Edit",
+		selectButton: "Select values",
+		showButton: "Show"
 	}
 };
 const form$1 = {
@@ -93,6 +100,13 @@ const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
 	select: {
 		placeholder: "Sélectionnez une valeur"
+	},
+	checkbox: {
+		selectedValues: "{nb} valeurs selectionnées",
+		selectedValue: "{nb} valeur selectionnée",
+		editButton: "Modifier",
+		selectButton: "Sélectionner des valeurs",
+		showButton: "Voir"
 	}
 };
 const form = {

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

@@ -2,6 +2,7 @@
   position: relative;
   width: 100%;
   max-width: var(--mg-card-max-width);
+  min-width: var(--mg-card-min-width);
   padding: var(--mg-card-padding, var(--mg-card-padding-default));
   overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));
   box-sizing: border-box;
@@ -18,6 +19,7 @@
   --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-card.mg-card--info {
   overflow: hidden;

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

@@ -12,8 +12,6 @@ export class MgTooltip {
       this.tooltip.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
@@ -50,8 +48,10 @@ export class MgTooltip {
      * @param event - keyboard event
      */
     this.pressEscape = (event) => {
-      if (event.code === 'Escape')
+      if (event.code === 'Escape') {
         this.setDisplay(false);
+        this.resetGuard();
+      }
     };
     /**
      * Method to set display prop
@@ -170,7 +170,6 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
-    this.popper.update();
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -224,6 +223,12 @@ export class MgTooltip {
     this.handleDisplay(this.display);
     this.validateMessage(this.message);
   }
+  /**
+   * update popper position after props change on component did update hook to benefit from render ended
+   */
+  componentDidUpdate() {
+    this.popper.update();
+  }
   /**
    * Render
    * @returns HTML Element

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

@@ -1 +1,4 @@
-export {};
+/**
+ * List of all availables checkbox type
+ */
+export const checkboxTypes = ['checkbox', 'multi'];

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

@@ -84,7 +84,7 @@
 .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__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);
 }
 
@@ -176,4 +176,21 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
     animation: none !important;
     transition: none !important;
   }
+}
+/**
+* checkbox multi
+*/
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--mg-inputs-spacer) * 1.2);
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs {
+  margin: 0;
+}
+.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip {
+  margin-left: var(--mg-inputs-spacer);
+}
+.mg-input.mg-input--checkbox-multi mg-popover {
+  --mg-popover-min-width: 7rem;
 }

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

@@ -3,6 +3,7 @@ import { h } from '@stencil/core';
 import { MgInput } from '../MgInput';
 import { ClassList } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
+import { checkboxTypes } from './mg-input-checkbox.conf';
 /**
  * type CheckboxItem validation function
  * @param items - Checkbox item
@@ -19,6 +20,8 @@ export class MgInputCheckbox {
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
+    // style
+    this.baseClassName = 'mg-input--checkbox';
     /**
      * Handle input event
      * @param event - input event
@@ -33,6 +36,21 @@ export class MgInputCheckbox {
       this.value = this.checkboxItems.map(o => ({ value: o.value, title: o.title, disabled: o.disabled }));
       this.checkValidity();
     };
+    /**
+     * Keyboard handler
+     * @param event - to trak "tab" key
+     */
+    this.handleKeydown = (event) => {
+      var _a;
+      // track "Tab" key event when popover display (is "multi" type selected)
+      if (event.key === 'Tab' && ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.display)) {
+        const enableInputs = this.checkboxItems.filter(input => !input.disabled).map(({ id }) => id);
+        const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
+        // close popover when tab trigger focus outside its DOM
+        if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey))
+          this.popover.display = false;
+      }
+    };
     /**
      * Handle blur event
      */
@@ -55,6 +73,19 @@ export class MgInputCheckbox {
       // We need to send valid event even if it is the same value
       this.inputValid.emit(this.valid);
     };
+    /**
+     * Render button text
+     * @param selectedValuesNb - nb of selected values
+     * @returns translated message
+     */
+    this.renderButtonText = (selectedValuesNb) => {
+      let messageKey = 'editButton';
+      if (this.disabled)
+        messageKey = 'showButton';
+      else if (selectedValuesNb < 1)
+        messageKey = 'selectButton';
+      return this.messages.input.checkbox[messageKey];
+    };
     /**
      * Set input error message
      */
@@ -66,7 +97,13 @@ export class MgInputCheckbox {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    /**
+     * Method to get mg-popover identifier
+     * @returns MgPopover identifier
+     */
+    this.getMgPopoverIdentifier = () => `${this.identifier}-input-mg-popover`;
     this.value = undefined;
+    this.type = checkboxTypes[0];
     this.identifier = undefined;
     this.name = this.identifier;
     this.label = undefined;
@@ -80,14 +117,14 @@ export class MgInputCheckbox {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-input--checkbox']);
+    this.classCollection = new ClassList([this.baseClassName]);
     this.errorMessage = undefined;
     this.checkboxItems = [];
   }
   validateValue(newValue) {
     if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
-        id: `${this.identifier}_${index.toString()}`,
+        id: `${this.identifier}_${index}`,
         title: item.title,
         value: item.value,
         disabled: item.disabled,
@@ -98,6 +135,18 @@ export class MgInputCheckbox {
       throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
     }
   }
+  validateType(newValue) {
+    if (!checkboxTypes.includes(newValue)) {
+      throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
+    }
+    else {
+      const className = `${this.baseClassName}-multi`;
+      if (newValue === 'multi')
+        this.classCollection.add(className);
+      else
+        this.classCollection.delete(className);
+    }
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     this.inputs.forEach(input => {
       input[prop] = newValue;
@@ -108,6 +157,13 @@ export class MgInputCheckbox {
       this.hasDisplayedError = false;
     }
   }
+  validateDisabled(newValue) {
+    const className = `${this.baseClassName}-multi-disabled`;
+    if (newValue && this.type === 'multi')
+      this.classCollection.add(className);
+    else
+      this.classCollection.delete(className);
+  }
   /**
    * Public method to display errors
    */
@@ -126,8 +182,12 @@ export class MgInputCheckbox {
   componentWillLoad() {
     // Get locales
     this.messages = initLocales(this.element).messages;
+    if (this.type === 'multi')
+      this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
     // Validate
     this.validateValue(this.value);
+    this.validateDisabled(this.disabled);
+    this.validateType(this.type);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -136,18 +196,40 @@ export class MgInputCheckbox {
     }, 0);
   }
   /**
-   * Render
+   * render checkbox multi element
+   * @returns html element
+   */
+  renderCheckboxMulti() {
+    const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
+    return (h("div", { class: "mg-input__input-container mg-input__input-checkbox-multi" }, h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), ref: el => {
+        if (Boolean(el))
+          this.popover = el;
+      } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.renderCheckboxes()))));
+  }
+  /**
+   * Render checkbox element
    * @returns HTML Element
    */
-  render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
+  renderCheckboxes() {
+    return (h("ul", { class: {
+        'mg-input__input-group-container': true,
+        'mg-input__input-group-container--vertical': this.inputVerticalList || (this.type === 'multi' && !this.readonly),
+        'mg-input__input-checkbox-multi-inputs': this.type === 'multi' && !this.readonly,
+      }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
-      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeydown, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
-      } }), h("label", { htmlFor: input.id }, input.title)))))));
+      } }), h("label", { htmlFor: input.id }, input.title))))));
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? this.renderCheckboxes() : this.renderCheckboxMulti()));
   }
   static get is() { return "mg-input-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -183,6 +265,29 @@ export class MgInputCheckbox {
           "text": "Component value\nIf item.value is `null`, checkbox will be indeterminate by default\nRequired"
         }
       },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CheckboxType",
+          "resolved": "\"checkbox\" | \"multi\"",
+          "references": {
+            "CheckboxType": {
+              "location": "import",
+              "path": "./mg-input-checkbox.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define checkbox type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "checkboxTypes[0]"
+      },
       "identifier": {
         "type": "string",
         "mutable": false,
@@ -485,6 +590,9 @@ export class MgInputCheckbox {
     return [{
         "propName": "value",
         "methodName": "validateValue"
+      }, {
+        "propName": "type",
+        "methodName": "validateType"
       }, {
         "propName": "required",
         "methodName": "handleValidityChange"
@@ -494,6 +602,9 @@ export class MgInputCheckbox {
       }, {
         "propName": "disabled",
         "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "validateDisabled"
       }];
   }
 }

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

@@ -84,7 +84,7 @@
 .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__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);
 }
 

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

@@ -84,7 +84,7 @@
 .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__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);
 }
 

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

@@ -84,7 +84,7 @@
 .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__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);
 }
 

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

@@ -84,7 +84,7 @@
 .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__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);
 }
 

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css

@@ -84,7 +84,7 @@
 .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__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);
 }
 

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -84,7 +84,7 @@
 .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__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);
 }
 

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -84,7 +84,7 @@
 .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__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);
 }
 

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css

@@ -84,7 +84,7 @@
 .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__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);
 }
 

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

@@ -69,6 +69,7 @@
   --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,

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

@@ -63,4 +63,5 @@
   --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;
 }

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

@@ -53,4 +53,5 @@
   --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;
 }

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

@@ -18,6 +18,7 @@
 }
 .mg-popover mg-card {
   --mg-card-max-width: var(--mg-popover-max-width);
+  --mg-card-min-width: var(--mg-popover-min-width);
   position: relative;
 }
 .mg-popover[data-show] {
@@ -117,4 +118,5 @@
   --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;
 }

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

@@ -27,8 +27,6 @@ export class MgPopover {
       this.popover.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
@@ -82,6 +80,12 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * update popper position after props change on component did update hook to benefit from render ended
+   */
+  componentDidUpdate() {
+    this.popper.update();
+  }
   /**
    * Check if component props are well configured on init
    */
@@ -143,8 +147,10 @@ export class MgPopover {
     });
     // Add events to hide popover
     this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
+      if (!this.disabled && e.code === 'Escape') {
         this.display = false;
+        interactiveElement.focus();
+      }
     });
     this.handleDisplay(this.display);
   }

package/dist/collection/locales/en/messages.json

@@ -17,6 +17,13 @@
   "input": {
     "select": {
       "placeholder": "Select a value"
+    },
+    "checkbox": {
+      "selectedValues": "{nb} selected values",
+      "selectedValue": "{nb} selected value",
+      "editButton": "Edit",
+      "selectButton": "Select values",
+      "showButton": "Show"
     }
   },
   "form": {

package/dist/collection/locales/fr/messages.json

@@ -17,6 +17,13 @@
   "input": {
     "select": {
       "placeholder": "Sélectionnez une valeur"
+    },
+    "checkbox": {
+      "selectedValues": "{nb} valeurs selectionnées",
+      "selectedValue": "{nb} valeur selectionnée",
+      "editButton": "Modifier",
+      "selectButton": "Sélectionner des valeurs",
+      "showButton": "Voir"
     }
   },
   "form": {

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -6,5 +6,6 @@
     --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;
   }
 }