@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -5,834 +5,832 @@ import { ClassList, cleanString, isValidString } from "../../../../utils/compone
 import { initLocales } from "../../../../locales";
 import { checkboxTypes, SectionKind } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
+import { Handler } from "../MgInput.conf";
 /**
  * type CheckboxItem validation function
  * @param items - Checkbox item
  * @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);
 export class MgInputCheckbox {
-  constructor() {
-    // 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() {
+        // 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);
+    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())));
     }
-  }
-  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();
+    static get is() { return "mg-input-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css"]
+        };
     }
-  }
-  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');
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css"]
+        };
     }
-    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))))));
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "CheckboxValue[]",
+                    "resolved": "CheckboxValue[]",
+                    "references": {
+                        "CheckboxValue": {
+                            "location": "import",
+                            "path": "./mg-input-checkbox.conf",
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxValue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component value\nIf item.value is `null`, checkbox will be indeterminate by default"
+                }
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "CheckboxType",
+                    "resolved": "\"checkbox\" | \"multi\"",
+                    "references": {
+                        "CheckboxType": {
+                            "location": "import",
+                            "path": "./mg-input-checkbox.conf",
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input name\nIf not set the value equals the identifier"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.identifier"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "attribute": "label-on-top",
+                "reflect": false
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputVerticalList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if inputs are display verticaly"
+                },
+                "attribute": "input-vertical-list",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if mg-input-checkbox is required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if mg-input-checkbox is readonly"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "displaySelectedValues": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display selected values list in \"multi\" type\nThis prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type."
+                },
+                "attribute": "display-selected-values",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input valid state"
+                },
+                "attribute": "valid",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input invalid state"
+                },
+                "attribute": "invalid",
+                "reflect": false
+            }
+        };
     }
-    else {
-      return h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb));
+    static get states() {
+        return {
+            "classCollection": {},
+            "errorMessage": {},
+            "checkboxItems": {},
+            "displaySearchInput": {},
+            "searchValue": {},
+            "searchResults": {}
+        };
     }
-  }
-  /**
-   * 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())));
-  }
-  static get is() { return "mg-input-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "CheckboxValue[]",
-          "resolved": "CheckboxValue[]",
-          "references": {
-            "CheckboxValue": {
-              "location": "import",
-              "path": "./mg-input-checkbox.conf",
-              "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxValue"
-            }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component value\nIf item.value is `null`, checkbox will be indeterminate by default"
-        }
-      },
-      "type": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "CheckboxType",
-          "resolved": "\"checkbox\" | \"multi\"",
-          "references": {
-            "CheckboxType": {
-              "location": "import",
-              "path": "./mg-input-checkbox.conf",
-              "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled"
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input name\nIf not set the value equals the identifier"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.identifier"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input label"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelOnTop": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is displayed on top"
-        },
-        "attribute": "label-on-top",
-        "reflect": false
-      },
-      "labelHide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is visible"
-        },
-        "attribute": "label-hide",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "inputVerticalList": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if inputs are display verticaly"
-        },
-        "attribute": "input-vertical-list",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if mg-input-checkbox is required"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if mg-input-checkbox is readonly"
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "displaySelectedValues": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display selected values list in \"multi\" type"
-        },
-        "attribute": "display-selected-values",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a tooltip message next to the input"
-        },
-        "attribute": "tooltip",
-        "reflect": false
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a help text under the input, usually expected data format and example"
-        },
-        "attribute": "help-text",
-        "reflect": false
-      },
-      "valid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input valid state"
-        },
-        "attribute": "valid",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input invalid state"
-        },
-        "attribute": "invalid",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {},
-      "errorMessage": {},
-      "checkboxItems": {},
-      "displaySearchInput": {},
-      "searchValue": {},
-      "searchResults": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "value-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted event when value change"
-        },
-        "complexType": {
-          "original": "MgInputCheckbox['value']",
-          "resolved": "CheckboxValue[]",
-          "references": {
-            "MgInputCheckbox": {
-              "location": "global",
-              "id": "global::MgInputCheckbox"
-            }
-          }
-        }
-      }, {
-        "method": "inputValid",
-        "name": "input-valid",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when checking validity"
-        },
-        "complexType": {
-          "original": "MgInputCheckbox['valid']",
-          "resolved": "boolean",
-          "references": {
-            "MgInputCheckbox": {
-              "location": "global",
-              "id": "global::MgInputCheckbox"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "displayError": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Display input error if it exists.",
-          "tags": []
-        }
-      },
-      "setError": {
-        "complexType": {
-          "signature": "(valid: MgInputCheckbox['valid'], errorMessage: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "valid - value indicating the validity"
-                }],
-              "text": "- value indicating the validity"
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputCheckboxElement['value']",
+                    "resolved": "CheckboxValue[]",
+                    "references": {
+                        "HTMLMgInputCheckboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputCheckboxElement"
+                        }
+                    }
+                }
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "errorMessage - the error message to display"
-                }],
-              "text": "- the error message to display"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when checking validity"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputCheckboxElement['valid']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgInputCheckboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputCheckboxElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
             },
-            "MgInputCheckbox": {
-              "location": "global",
-              "id": "global::MgInputCheckbox"
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: MgInputCheckbox['valid'], errorMessage: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "valid - value indicating the validity"
+                                }],
+                            "text": "- value indicating the validity"
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "errorMessage - the error message to display"
+                                }],
+                            "text": "- the error message to display"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MgInputCheckbox": {
+                            "location": "global",
+                            "id": "global::MgInputCheckbox"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
-          "tags": [{
-              "name": "param",
-              "text": "valid - value indicating the validity"
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "validateValue"
             }, {
-              "name": "param",
-              "text": "errorMessage - the error message to display"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "validateValue"
-      }, {
-        "propName": "type",
-        "methodName": "validateType"
-      }, {
-        "propName": "displaySelectedValues",
-        "methodName": "validateDisplaySelectedValues"
-      }, {
-        "propName": "required",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "readonly",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "validateDisabled"
-      }, {
-        "propName": "checkboxItems",
-        "methodName": "validateCheckboxItems"
-      }, {
-        "propName": "searchValue",
-        "methodName": "validateSearchValue"
-      }];
-  }
+                "propName": "type",
+                "methodName": "validateType"
+            }, {
+                "propName": "required",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "validateDisabled"
+            }, {
+                "propName": "checkboxItems",
+                "methodName": "validateCheckboxItems"
+            }, {
+                "propName": "searchValue",
+                "methodName": "validateSearchValue"
+            }];
+    }
 }
 //# sourceMappingURL=mg-input-checkbox.js.map