@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { M as MgInput } from './MgInput.js';
+import { H as Handler, M as MgInput } from './MgInput.js';
 import { b as cleanString, C as ClassList, i as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { c as checkboxTypes, S as SectionKind, M as MgInputCheckboxList, d as defineCustomElement$a } from './mg-input-checkbox-paginated2.js';
@@ -16,7 +16,7 @@ import { d as defineCustomElement$4 } from './mg-popover-content2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputCheckboxCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-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-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);column-gap:2.3rem;list-style:none;row-gap:1rem}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem * 1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem * 1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem * 0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem * 2);min-height:var(--default-size);align-items:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem * 2) .4rem calc(0.4rem / 2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content]{display:flex;flex-flow:column wrap;gap:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content] .mg-c-input__input-group{margin-left:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
+const mgInputCheckboxCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-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-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);align-items:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content]{display:flex;flex-flow:column wrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi mg-popover-content [slot=content] .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
 
 /**
  * type CheckboxItem validation function
@@ -24,510 +24,508 @@ const mgInputCheckboxCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c
  * @returns match item type
  */
 const isCheckboxItems = (items) => Array.isArray(items) &&
-  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
+    items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
 const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChange = createEvent(this, "value-change", 7);
-    this.inputValid = createEvent(this, "input-valid", 7);
-    // hasDisplayedError (triggered by blur event)
-    this.hasDisplayedError = false;
-    this.mode = 'custom';
-    // style
-    this.baseClassName = 'mg-c-input--checkbox';
-    // "multi" setup
-    this.multiStart = 5;
-    this.searchStart = 10;
-    /**
-     * Handle input event
-     * @param event - input event
-     */
-    this.handleInput = (event) => {
-      this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
-      this.updateValues();
-      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.mgPopover) === null || _a === void 0 ? void 0 : _a.display)) {
-        // when search input and do a back tab we close the popover
-        if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {
-          this.mgPopover.display = false;
-          return;
-        }
-        const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
-          .filter(input => !input.getAttribute('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.searchInput))
-          this.mgPopover.display = false;
-      }
-    };
-    /**
-     * Handle blur event
-     */
-    this.handleBlur = () => {
-      // Check validity
-      this.checkValidity();
-      this.setErrorMessage();
-    };
-    /**
-     * Handle input search value-change event
-     * @param event - input value-change event
-     */
-    this.handleSearchChange = (event) => {
-      this.searchValue = event.detail;
-    };
-    /**
-     * popover display-change handler
-     * @param event - mg-popover display-change custom event
-     */
-    this.handleMgPopoverDisplayChange = (event) => {
-      // reset search value
-      if (!event.detail) {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "value-change", 7);
+        this.inputValid = createEvent(this, "input-valid", 7);
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = false;
+        this.mode = 'custom';
+        // style
+        this.baseClassName = 'mg-c-input--checkbox';
+        // "multi" setup
+        this.multiStart = 5;
+        this.searchStart = 10;
+        /**
+         * Handle input event
+         * @param event - input event
+         */
+        this.handleInput = (event) => {
+            this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
+            this.updateValues();
+            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.mgPopover) === null || _a === void 0 ? void 0 : _a.display)) {
+                // when search input and do a back tab we close the popover
+                if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {
+                    this.mgPopover.display = false;
+                    return;
+                }
+                const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
+                    .filter(input => !input.getAttribute('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.searchInput))
+                    this.mgPopover.display = false;
+            }
+        };
+        /**
+         * Handle blur event
+         */
+        this.handleBlur = () => {
+            // set guard
+            this.handlerInProgress = Handler.BLUR;
+            // Check validity
+            this.checkValidity();
+            this.setErrorMessage();
+            // reset guard
+            this.handlerInProgress = undefined;
+        };
+        /**
+         * Handle input search value-change event
+         * @param event - input value-change event
+         */
+        this.handleSearchChange = (event) => {
+            this.searchValue = event.detail;
+        };
+        /**
+         * popover display-change handler
+         * @param event - mg-popover display-change custom event
+         */
+        this.handleMgPopoverDisplayChange = (event) => {
+            // reset search value
+            if (!event.detail) {
+                this.searchValue = '';
+                this.checkValidity();
+            }
+        };
+        /**
+         * Handle select all button
+         * @param event - mass action event trigger a global select/unselect on values
+         */
+        this.handleMassAction = (event) => {
+            this.updateCheckboxItems('value', event.detail !== 'selected');
+            this.updateValues();
+        };
+        /**
+         * Update values
+         */
+        this.updateValues = () => {
+            this.value = this.checkboxItems.map(o => {
+                delete o._handleBlur;
+                delete o._handleInput;
+                delete o._handleKeydown;
+                delete o._id;
+                return o;
+            });
+        };
+        /**
+         * has invalid input
+         * @returns true if at least one input is invalid
+         */
+        this.hasInvalidInput = () => Array.from(this.element.shadowRoot.querySelectorAll('input[type="checkbox"]')).some((input) => !input.disabled && !input.checkValidity());
+        /**
+         * Method to update searchResults
+         */
+        this.updateSearchResults = () => {
+            this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));
+        };
+        /**
+         * Methode to validate if one of inputs value is checked id required
+         * @returns truthy if condition is valid
+         */
+        this.validateRequired = () => !this.required || this.checkboxItems.some(({ value }) => value);
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
+        };
+        /**
+         * 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
+         * @param displayError - dispay error condition
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (displayError = true, errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            if (displayError && !this.valid) {
+                if (errorMessage !== undefined)
+                    this.errorMessage = errorMessage;
+                else if (!this.validateRequired())
+                    this.errorMessage = this.messages.errors.required;
+            }
+        };
+        /**
+         * Method to get mg-popover identifier
+         * @returns MgPopover identifier
+         */
+        this.getMgPopoverIdentifier = () => `${this.identifier}-input-mg-popover`;
+        /**
+         * Manage items to display depending on the search state
+         * @returns items to display
+         */
+        this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
+        this.value = undefined;
+        this.type = undefined;
+        this.identifier = undefined;
+        this.name = this.identifier;
+        this.label = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.inputVerticalList = false;
+        this.required = false;
+        this.readonly = false;
+        this.displaySelectedValues = undefined;
+        this.disabled = false;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+        this.valid = undefined;
+        this.invalid = undefined;
+        this.classCollection = new ClassList([this.baseClassName]);
+        this.errorMessage = undefined;
+        this.checkboxItems = [];
+        this.displaySearchInput = undefined;
         this.searchValue = '';
+        this.searchResults = [];
+    }
+    validateValue(newValue) {
+        if (isCheckboxItems(newValue)) {
+            this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
+            this.valueChange.emit(newValue);
+        }
+        else {
+            throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
+        }
+    }
+    validateType(newValue) {
+        if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
+            throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
+        }
+        else if (newValue === undefined) {
+            this.mode = 'auto';
+            this.type = checkboxTypes[0];
+        }
+        else {
+            const className = `${this.baseClassName}-multi`;
+            if (newValue === 'multi') {
+                this.classCollection.add(className);
+                this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
+            }
+            else
+                this.classCollection.delete(className);
+        }
+    }
+    handleValidityChange(newValue, _oldValue, prop) {
+        if (prop !== 'readonly')
+            this.updateCheckboxItems(prop, newValue);
         this.checkValidity();
-      }
-    };
+        if (this.hasDisplayedError) {
+            this.hasDisplayedError = prop !== 'required';
+            this.setErrorMessage(this.hasDisplayedError);
+        }
+    }
+    validateDisabled(newValue) {
+        const className = `${this.baseClassName}-multi-disabled`;
+        if (newValue && this.type === 'multi')
+            this.classCollection.add(className);
+        else
+            this.classCollection.delete(className);
+    }
+    validateCheckboxItems(newValue) {
+        if (this.mode === 'auto' && newValue.length > this.multiStart)
+            this.type = 'multi';
+        if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {
+            this.displaySearchInput = this.type === 'multi';
+            // refresh search values
+            this.updateSearchResults();
+        }
+    }
+    validateSearchValue() {
+        // refresh search values
+        this.updateSearchResults();
+    }
     /**
-     * Handle select all button
-     * @param event - mass action event trigger a global select/unselect on values
+     * Display input error if it exists.
      */
-    this.handleMassAction = (event) => {
-      this.updateCheckboxItems('value', event.detail !== 'selected');
-      this.updateValues();
-    };
+    async displayError() {
+        this.checkValidity();
+        this.setErrorMessage();
+        this.hasDisplayedError = this.invalid;
+    }
     /**
-     * Update values
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
      */
-    this.updateValues = () => {
-      this.value = this.checkboxItems.map(o => {
-        delete o._handleBlur;
-        delete o._handleInput;
-        delete o._handleKeydown;
-        delete o._id;
-        return o;
-      });
-    };
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
+        }
+        else {
+            this.setValidity(valid);
+            this.setErrorMessage(undefined, valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
     /**
-     * get invalid element
-     * @returns element
+     * Method to set validity values
+     * @param newValue - valid new value
      */
-    this.getInvalidElement = () => {
-      const items = Array.from(this.element.shadowRoot.querySelectorAll('input[type="checkbox"]'));
-      return items.find(input => input !== null && !input.disabled && !input.checkValidity());
-    };
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        this.valid = newValue;
+        this.invalid = !this.valid;
+        // We need to send valid event even if it is the same value
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue))
+            this.inputValid.emit(this.valid);
+    }
     /**
-     * Method to update searchResults
+     * Update ckecboxes item
+     * @param key - property to update
+     * @param newValue - value to update with
+     * @param condition - condtion to applu change on item
      */
-    this.updateSearchResults = () => {
-      this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));
-    };
+    updateCheckboxItems(key, newValue, condition) {
+        this.checkboxItems = this.checkboxItems.map(item => {
+            if ((typeof condition === 'function' && condition(item)) || condition === undefined)
+                item[key] = newValue;
+            return item;
+        });
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Methode to validate if one of inputs value is checked id required
-     * @returns truthy if condition is valid
+     * Check if component props are well configured on init
+     * @returns timeout
      */
-    this.validateRequired = () => !this.required || this.checkboxItems.some(({ value }) => value);
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
+        this.validateType(this.type);
+        this.validateValue(this.value);
+        this.validateDisabled(this.disabled);
+        this.legendId = `${this.identifier}-title`;
+        // Check validity when component is ready
+        // return a promise to process action only in the FIRST render().
+        // https://stenciljs.com/docs/component-lifecycle#componentwillload
+        return setTimeout(() => {
+            this.checkValidity();
+        }, 0);
+    }
     /**
-     * Check if input is valid
+     * add listeners and DOM attributed
      */
-    this.checkValidity = () => {
-      this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));
-    };
+    componentDidLoad() {
+        var _a, _b;
+        this.element.shadowRoot.querySelector('legend').setAttribute('id', this.legendId);
+        this.searchInput = (_a = this.element.shadowRoot.querySelector('mg-input-text')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('input');
+        (_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleKeydown);
+    }
     /**
-     * Render button text
-     * @param selectedValuesNb - nb of selected values
-     * @returns translated message
+     * Render checkbox multi display values
+     * @param selectedValuesNb - selected values length
+     * @returns display selected values
      */
-    this.renderButtonText = (selectedValuesNb) => {
-      let messageKey = 'editButton';
-      if (this.disabled)
-        messageKey = 'showButton';
-      else if (selectedValuesNb < 1)
-        messageKey = 'selectButton';
-      return this.messages.input.checkbox[messageKey];
-    };
+    renderCheckboxMultiDisplaySelectedValues(selectedValuesNb) {
+        if (this.displaySelectedValues) {
+            return (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.checkboxItems
+                .filter(({ value }) => value)
+                .map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title))))));
+        }
+        else {
+            return h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb));
+        }
+    }
     /**
-     * Set input error message
-     * @param displayError - dispay error condition
-     * @param errorMessage - errorMessage override
+     * Render checkboxes by section
+     * @param checkboxes - checkboxes to render
+     * @returns render sections of checkboxes
      */
-    this.setErrorMessage = (displayError = true, errorMessage) => {
-      // Set error message
-      this.errorMessage = undefined;
-      if (displayError && !this.valid) {
-        if (errorMessage !== undefined)
-          this.errorMessage = errorMessage;
-        else if (!this.validateRequired())
-          this.errorMessage = this.messages.errors.required;
-      }
-    };
+    renderCheckboxBySection(checkboxes) {
+        const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
+            acc[curr.value ? 0 : 1].push(curr);
+            return acc;
+        }, [[], []]);
+        const baseSection = {
+            readonly: this.readonly,
+            disabled: this.disabled,
+            identifier: this.identifier,
+        };
+        const sections = [
+            Object.assign(Object.assign({}, baseSection), { sectionKind: SectionKind.SELECTED, checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
+            Object.assign(Object.assign({}, baseSection), { sectionKind: SectionKind.NOT_SELECTED, checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
+        ];
+        return sections.map(section => h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction })));
+    }
     /**
-     * Method to get mg-popover identifier
-     * @returns MgPopover identifier
+     * render checkbox multi element
+     * @returns html element
      */
-    this.getMgPopoverIdentifier = () => `${this.identifier}-input-mg-popover`;
+    renderCheckboxMulti() {
+        const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
+        const checkboxes = this.getDisplayItems();
+        return (h("div", { class: { 'mg-c-input__input-container': true, 'mg-c-input__input-checkbox-multi': true, 'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
+                if (el)
+                    this.mgPopover = el;
+            } }, h("mg-button", { variant: "secondary", "aria-describedby": this.legendId }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [
+            h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, displayCharacterLeft: false, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
+            h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
+        ], this.displaySearchInput ? (h("div", { class: "mg-c-input__input-checkbox-multi-sections-container" }, this.renderCheckboxBySection(checkboxes))) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult))), this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb)));
+    }
     /**
-     * Manage items to display depending on the search state
-     * @returns items to display
+     * Render
+     * @returns HTML Element
      */
-    this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
-    this.value = undefined;
-    this.type = undefined;
-    this.identifier = undefined;
-    this.name = this.identifier;
-    this.label = undefined;
-    this.labelOnTop = undefined;
-    this.labelHide = false;
-    this.inputVerticalList = false;
-    this.required = false;
-    this.readonly = false;
-    this.displaySelectedValues = undefined;
-    this.disabled = false;
-    this.tooltip = undefined;
-    this.helpText = undefined;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList([this.baseClassName]);
-    this.errorMessage = undefined;
-    this.checkboxItems = [];
-    this.displaySearchInput = undefined;
-    this.searchValue = '';
-    this.searchResults = [];
-  }
-  validateValue(newValue) {
-    if (isCheckboxItems(newValue)) {
-      this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
-      this.valueChange.emit(newValue);
-    }
-    else {
-      throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
-    }
-  }
-  validateType(newValue) {
-    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-      throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
-    }
-    else if (newValue === undefined) {
-      this.mode = 'auto';
-      this.type = checkboxTypes[0];
-    }
-    else {
-      const className = `${this.baseClassName}-multi`;
-      if (newValue === 'multi') {
-        this.classCollection.add(className);
-        this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
-      }
-      else
-        this.classCollection.delete(className);
-    }
-  }
-  validateDisplaySelectedValues(newValue) {
-    if (newValue !== undefined && this.type !== 'multi')
-      throw new Error('<mg-input-checkbox> prop "displaySelectedValues" can only be used with prop type "multi".');
-  }
-  handleValidityChange(newValue, _oldValue, prop) {
-    if (prop !== 'readonly')
-      this.updateCheckboxItems(prop, newValue);
-    this.checkValidity();
-    if (this.hasDisplayedError) {
-      this.hasDisplayedError = prop !== 'required';
-      this.setErrorMessage(this.hasDisplayedError);
-    }
-  }
-  validateDisabled(newValue) {
-    const className = `${this.baseClassName}-multi-disabled`;
-    if (newValue && this.type === 'multi')
-      this.classCollection.add(className);
-    else
-      this.classCollection.delete(className);
-  }
-  validateCheckboxItems(newValue) {
-    if (this.mode === 'auto' && newValue.length > this.multiStart)
-      this.type = 'multi';
-    if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {
-      this.displaySearchInput = this.type === 'multi';
-      // refresh search values
-      this.updateSearchResults();
+    render() {
+        var _a;
+        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: (_a = this.value) === null || _a === void 0 ? void 0 : _a.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 ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
     }
-  }
-  validateSearchValue() {
-    // refresh search values
-    this.updateSearchResults();
-  }
-  /**
-   * Display input error if it exists.
-   */
-  async displayError() {
-    this.checkValidity();
-    this.setErrorMessage();
-    this.hasDisplayedError = this.invalid;
-  }
-  /**
-   * Set an error and display a custom error message.
-   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-   * It must be paired with an error message to display for the given context.
-   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-   * @param valid - value indicating the validity
-   * @param errorMessage - the error message to display
-   */
-  async setError(valid, errorMessage) {
-    if (typeof valid !== 'boolean') {
-      throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
-    }
-    else if (!isValidString(errorMessage)) {
-      throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
-    }
-    else {
-      this.setValidity(valid);
-      this.setErrorMessage(undefined, valid ? undefined : errorMessage);
-      this.hasDisplayedError = this.invalid;
-    }
-  }
-  /**
-   * Method to set validity values
-   * @param newValue - valid new value
-   */
-  setValidity(newValue) {
-    this.valid = newValue;
-    this.invalid = !this.valid;
-    // We need to send valid event even if it is the same value
-    this.inputValid.emit(this.valid);
-  }
-  /**
-   * Update ckecboxes item
-   * @param key - property to update
-   * @param newValue - value to update with
-   * @param condition - condtion to applu change on item
-   */
-  updateCheckboxItems(key, newValue, condition) {
-    this.checkboxItems = this.checkboxItems.map(item => {
-      if ((typeof condition === 'function' && condition(item)) || condition === undefined)
-        item[key] = newValue;
-      return item;
-    });
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   * @returns timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Validate
-    this.validateType(this.type);
-    this.validateValue(this.value);
-    this.validateDisabled(this.disabled);
-    this.validateDisplaySelectedValues(this.displaySelectedValues);
-    // Check validity when component is ready
-    // return a promise to process action only in the FIRST render().
-    // https://stenciljs.com/docs/component-lifecycle#componentwillload
-    return setTimeout(() => {
-      this.checkValidity();
-    }, 0);
-  }
-  /**
-   * add listeners
-   */
-  componentDidLoad() {
-    var _a, _b;
-    this.searchInput = (_a = this.element.shadowRoot.querySelector('mg-input-text')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('input');
-    (_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleKeydown);
-  }
-  /**
-   * Render checkbox multi display values
-   * @param selectedValuesNb - selected values length
-   * @returns display selected values
-   */
-  renderCheckboxMultiDisplaySelectedValues(selectedValuesNb) {
-    if (this.displaySelectedValues) {
-      return (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.checkboxItems
-        .filter(({ value }) => value)
-        .map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title))))));
-    }
-    else {
-      return h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb));
-    }
-  }
-  /**
-   * Render checkboxes by section
-   * @param checkboxes - checkboxes to render
-   * @returns render sections of checkboxes
-   */
-  renderCheckboxBySection(checkboxes) {
-    const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
-      acc[curr.value ? 0 : 1].push(curr);
-      return acc;
-    }, [[], []]);
-    const baseSection = {
-      readonly: this.readonly,
-      disabled: this.disabled,
-      identifier: this.identifier,
-    };
-    const sections = [
-      Object.assign(Object.assign({}, baseSection), { sectionKind: SectionKind.SELECTED, checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
-      Object.assign(Object.assign({}, baseSection), { sectionKind: SectionKind.NOT_SELECTED, checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
-    ];
-    return sections.map(section => h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction })));
-  }
-  /**
-   * render checkbox multi element
-   * @returns html element
-   */
-  renderCheckboxMulti() {
-    const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
-    const checkboxes = this.getDisplayItems();
-    return (h("div", { class: { 'mg-c-input__input-container': true, 'mg-c-input__input-checkbox-multi': true, 'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
-        if (el)
-          this.mgPopover = el;
-      } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [
-      h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, displayCharacterLeft: false, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
-      h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
-    ], this.displaySearchInput ? (h("div", { class: "mg-c-input__input-checkbox-multi-sections-container" }, this.renderCheckboxBySection(checkboxes))) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult)))));
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    var _a;
-    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: (_a = this.value) === null || _a === void 0 ? void 0 : _a.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 ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "value": ["validateValue"],
-    "type": ["validateType"],
-    "displaySelectedValues": ["validateDisplaySelectedValues"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange", "validateDisabled"],
-    "checkboxItems": ["validateCheckboxItems"],
-    "searchValue": ["validateSearchValue"]
-  }; }
-  static get style() { return mgInputCheckboxCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "value": ["validateValue"],
+        "type": ["validateType"],
+        "required": ["handleValidityChange"],
+        "readonly": ["handleValidityChange"],
+        "disabled": ["handleValidityChange", "validateDisabled"],
+        "checkboxItems": ["validateCheckboxItems"],
+        "searchValue": ["validateSearchValue"]
+    }; }
+    static get style() { return mgInputCheckboxCss; }
 }, [1, "mg-input-checkbox", {
-    "value": [1040],
-    "type": [1025],
-    "identifier": [1],
-    "name": [1],
-    "label": [1],
-    "labelOnTop": [4, "label-on-top"],
-    "labelHide": [4, "label-hide"],
-    "inputVerticalList": [4, "input-vertical-list"],
-    "required": [4],
-    "readonly": [4],
-    "displaySelectedValues": [4, "display-selected-values"],
-    "disabled": [4],
-    "tooltip": [1],
-    "helpText": [1, "help-text"],
-    "valid": [1028],
-    "invalid": [1028],
-    "classCollection": [32],
-    "errorMessage": [32],
-    "checkboxItems": [32],
-    "displaySearchInput": [32],
-    "searchValue": [32],
-    "searchResults": [32],
-    "displayError": [64],
-    "setError": [64]
-  }, undefined, {
-    "value": ["validateValue"],
-    "type": ["validateType"],
-    "displaySelectedValues": ["validateDisplaySelectedValues"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange", "validateDisabled"],
-    "checkboxItems": ["validateCheckboxItems"],
-    "searchValue": ["validateSearchValue"]
-  }]);
+        "value": [1040],
+        "type": [1025],
+        "identifier": [1],
+        "name": [1],
+        "label": [1],
+        "labelOnTop": [4, "label-on-top"],
+        "labelHide": [4, "label-hide"],
+        "inputVerticalList": [4, "input-vertical-list"],
+        "required": [4],
+        "readonly": [4],
+        "displaySelectedValues": [4, "display-selected-values"],
+        "disabled": [4],
+        "tooltip": [1],
+        "helpText": [1, "help-text"],
+        "valid": [1028],
+        "invalid": [1028],
+        "classCollection": [32],
+        "errorMessage": [32],
+        "checkboxItems": [32],
+        "displaySearchInput": [32],
+        "searchValue": [32],
+        "searchResults": [32],
+        "displayError": [64],
+        "setError": [64]
+    }, undefined, {
+        "value": ["validateValue"],
+        "type": ["validateType"],
+        "required": ["handleValidityChange"],
+        "readonly": ["handleValidityChange"],
+        "disabled": ["handleValidityChange", "validateDisabled"],
+        "checkboxItems": ["validateCheckboxItems"],
+        "searchValue": ["validateSearchValue"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-input-checkbox", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input-checkbox-paginated", "mg-input-select", "mg-input-text", "mg-input-title", "mg-pagination", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-input-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgInputCheckbox$1);
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "mg-character-left":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "mg-input-checkbox-paginated":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "mg-input-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "mg-input-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "mg-input-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "mg-pagination":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "mg-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "mg-popover-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-tooltip-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-input-checkbox", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input-checkbox-paginated", "mg-input-select", "mg-input-text", "mg-input-title", "mg-pagination", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-input-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgInputCheckbox$1);
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "mg-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "mg-character-left":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "mg-input-checkbox-paginated":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "mg-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-popover-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();