@mgdis/mg-components 6.20.0 → 6.22.0

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

@@ -1,762 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, m as cleanString, i as isValidString, t as toString } from './index2.js';
-import { d as defineCustomElement$9, a as MgInputCheckboxList } from './mg-input-checkbox-paginated2.js';
-import { d as defineCustomElement$a, b as classFieldset, f as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$4, S as Status } from './mg-tabs2.js';
-import { d as defineCustomElement$f } from './mg-badge2.js';
-import { d as defineCustomElement$e } from './mg-button2.js';
-import { d as defineCustomElement$d } from './mg-card2.js';
-import { d as defineCustomElement$c } from './mg-character-left2.js';
-import { d as defineCustomElement$b } from './mg-icon2.js';
-import { d as defineCustomElement$8 } from './mg-input-text2.js';
-import { d as defineCustomElement$7 } from './mg-input-title2.js';
-import { d as defineCustomElement$6 } from './mg-popover2.js';
-import { d as defineCustomElement$5 } from './mg-popover-content2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-/**
- * List of all availables checkbox type
- */
-const checkboxTypes = ['checkbox', 'multi'];
-/**
- * mg-input-checkbox-paginated section kind value
- */
-const SectionKind = {
-    SELECTED: 'selected',
-    NOT_SELECTED: 'not-selected',
-};
-
-const mgInputCheckboxCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
-
-/**
- * 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);
-const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            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.customErrorMessage = { lock: false };
-        this.mode = 'custom';
-        // style
-        this.baseClassName = 'mg-c-input--checkbox';
-        this.classTypeMulti = 'mg-c-input--checkbox-multi';
-        this.classWithValues = 'mg-c-input--with-values';
-        this.classSearchMode = 'mg-c-input--search-mode';
-        // "multi" setup
-        this.multiStart = 5;
-        this.searchStart = 10;
-        // popover variables
-        this.hasOpenedPopover = false;
-        this.checkboxesId = 'checkboxes-list';
-        /**
-         * Define input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if inputs are display verticaly
-         */
-        this.inputVerticalList = false;
-        /**
-         * Define if mg-input-checkbox is required
-         */
-        this.required = false;
-        /**
-         * Define if mg-input-checkbox is readonly
-         */
-        this.readonly = false;
-        /**
-         * Display selected values list in "multi" type
-         * This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
-         */
-        this.displaySelectedValues = false;
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList([this.baseClassName, classFieldset]);
-        /**
-         * Formated value to display in list
-         */
-        this.checkboxItems = [];
-        /**
-         * Search value query
-         */
-        this.searchValue = '';
-        /**
-         * Search current page
-         */
-        this.searchResults = [];
-        /**
-         * Select values button text local key
-         */
-        this.selectValuesButtonKey = 'editButton';
-        /**
-         * Define <mg-tabs> active-tab
-         */
-        this.activeTab = 1;
-        /**
-         * 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();
-            this.setErrorMessage();
-        };
-        /**
-         * Keyboard handler
-         * @param event - to track "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.hasAttribute('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 === undefined))
-                    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;
-            event.stopPropagation();
-        };
-        /**
-         * Handle <mg-tabs> tab-change event
-         * @param event - tab change event
-         */
-        this.handleActiveTabChange = (event) => {
-            this.activeTab = event.detail;
-            this.resetTabsLimit();
-        };
-        /**
-         * popover display-change handler
-         * @param event - mg-popover display-change custom event
-         */
-        this.handleMgPopoverDisplayChange = (event) => {
-            // 1. update hasOpenedPopover guard with event value
-            this.hasOpenedPopover = event.detail;
-            // 2. update selected valued button text
-            this.setButtonTextKey();
-            // 3. when popover display change to hide, update reset needeed props and run checkValidity
-            if (!event.detail) {
-                // reset search value
-                this.searchValue = '';
-                this.resetTabsLimit();
-                this.checkValidity();
-            }
-            // init active tab to selected if some values are checked
-            this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
-        };
-        /**
-         * 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)));
-        };
-        /**
-         * Method 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()));
-        };
-        /**
-         * Set button text locale key
-         */
-        this.setButtonTextKey = () => {
-            // prevent key update while popover is openned
-            if (this.hasOpenedPopover)
-                return;
-            let messageKey = 'editButton';
-            if (this.disabled)
-                messageKey = 'showButton';
-            else if (this.getSelectedItems().length < 1)
-                messageKey = 'selectButton';
-            this.selectValuesButtonKey = messageKey;
-        };
-        /**
-         * Get select values button message
-         * @returns message to display
-         */
-        this.getSelectValuesButtonMessage = () => {
-            if (this.selectValuesButtonKey === 'editButton' && isValidString(this.editButtonMessage)) {
-                return this.editButtonMessage;
-            }
-            else if (this.selectValuesButtonKey === 'showButton' && isValidString(this.showButtonMessage)) {
-                return this.showButtonMessage;
-            }
-            else if (this.selectValuesButtonKey === 'selectButton' && isValidString(this.selectButtonMessage)) {
-                return this.selectButtonMessage;
-            }
-            else {
-                return this.messages.input.checkbox[this.selectValuesButtonKey];
-            }
-        };
-        /**
-         * Set input error message
-         * @param fromSetErrorContext - context come from `setError` method
-         */
-        this.setErrorMessage = (fromSetErrorContext = false) => {
-            // Set error message
-            this.errorMessage = undefined;
-            if (!this.valid) {
-                // Does have a new custom error message OR does have a custom error message locked
-                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
-                    this.errorMessage = this.customErrorMessage.message;
-                }
-                // required
-                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);
-        /**
-         * get list of selected checkboxItems
-         * @returns selected checkboxItems
-         */
-        this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
-        /**
-         * Reset <mg-input-checkbox-paginated> limit state
-         */
-        this.resetTabsLimit = () => {
-            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
-                component.resetLimit();
-            });
-        };
-        /**
-         * Renders the readonly value of the input.
-         * @returns The rendered readonly value.
-         */
-        this.renderReadonly = (readonlyValue) => {
-            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
-        };
-        /**
-         * Renders the MgInputCheckboxList component.
-         * @returns The rendered MgInputCheckboxList component.
-         */
-        this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
-    }
-    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. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateType(newValue) {
-        if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${toString(newValue)}.`);
-        }
-        else if (newValue === undefined) {
-            this.mode = 'auto';
-            this.type = checkboxTypes[0];
-        }
-        else if (newValue === 'multi') {
-            this.classCollection.add(this.classTypeMulti);
-            this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
-        }
-        else {
-            this.classCollection.delete(this.classTypeMulti);
-        }
-    }
-    watchInputVerticalList(newValue) {
-        if (newValue)
-            this.classCollection.add(classVerticalList);
-        else
-            this.classCollection.delete(classVerticalList);
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    watchDisplaySelectedValues(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classWithValues);
-        else
-            this.classCollection.delete(this.classWithValues);
-    }
-    handleValidityChange(newValue, _oldValue, prop) {
-        // if required or disabled are enabled, we force options state
-        if (newValue && prop !== 'readonly') {
-            this.updateCheckboxItems(prop, newValue);
-        }
-        // else we rebase options to inital values
-        else {
-            this.validateValue(this.value);
-        }
-        this.checkValidity();
-        if (this.hasDisplayedError) {
-            this.hasDisplayedError = prop !== 'required';
-            this.setErrorMessage();
-        }
-        this.setButtonTextKey();
-    }
-    validateDisabled(newValue) {
-        if (newValue)
-            this.classCollection.add(classDisabled);
-        else
-            this.classCollection.delete(classDisabled);
-    }
-    validateCheckboxItems(newValue) {
-        // For the 'auto' mode we update the type depending on the new value's length.
-        if (this.mode === 'auto')
-            this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';
-        // If the type is multi and the new value's length is greater than the search gauge, display the search input.
-        this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;
-        // refresh search values
-        if (this.displaySearchInput)
-            this.updateSearchResults();
-        this.setButtonTextKey();
-    }
-    watchDisplaySearchInput(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classSearchMode);
-        else
-            this.classCollection.delete(this.classSearchMode);
-    }
-    validateSearchValue() {
-        // refresh search values
-        this.updateSearchResults();
-    }
-    /**
-     * Set focus on input.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.element.shadowRoot.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                this.hasDisplayedError = this.invalid;
-                resolve();
-            });
-        });
-    }
-    /**
-     * 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
-     * @param errorMessageLock - lock the error message and validity state
-     */
-    async setError(valid, errorMessage, errorMessageLock = false) {
-        if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
-        }
-        else {
-            this.customErrorMessage = {
-                lock: valid ? false : errorMessageLock,
-                message: valid ? undefined : errorMessage,
-            };
-            this.setValidity(valid);
-            this.setErrorMessage(true);
-            this.hasDisplayedError = this.invalid;
-        }
-    }
-    /**
-     * Reset value, validity and error state
-     */
-    async reset() {
-        if (!this.readonly) {
-            this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
-            // Use `Promise` as requested for stencil method
-            // Use `requestAnimationFrame` to ensure:
-            // - DOM is fully updated before validation
-            // - Async operations are completed
-            // - No timing issues with Stencil's render cycle
-            // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
-                requestAnimationFrame(() => {
-                    // unlock validity check by reseting customErrorMessage
-                    this.customErrorMessage = { lock: false };
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
-                    resolve();
-                });
-            });
-        }
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValue = this.valid;
-        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
-            this.valid = newValue;
-        }
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.valid !== oldValue)
-            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
-        // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type
-        // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.
-        this.validateType(this.type);
-        this.validateValue(this.value);
-        this.validateDisabled(this.disabled);
-        this.watchReadonly(this.readonly);
-        this.watchInputVerticalList(this.inputVerticalList);
-        this.watchDisplaySelectedValues(this.displaySelectedValues);
-        this.watchDisplaySearchInput(this.displaySearchInput);
-        // 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 and DOM attributed
-     */
-    componentDidLoad() {
-        var _a, _b;
-        if (!this.readonly) {
-            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 checkboxes by section
-     * @param checkboxes - checkboxes to render
-     * @returns render sections of checkboxes
-     */
-    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
-        const handleMassAction = (kind) => () => {
-            const displayItems = this.getDisplayItems();
-            // update only displayed items
-            displayItems.forEach(item => {
-                if (!item.disabled) {
-                    item.value = kind !== SectionKind.SELECTED;
-                }
-            });
-            this.updateValues();
-        };
-        const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
-            acc[curr.value ? 0 : 1].push(curr);
-            return acc;
-        }, [[], []]);
-        const sections = [
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.SELECTED) }),
-        ];
-        return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
-                label: section.messages.title,
-                badge: { value: section.checkboxes.length, label: this.messages.input.checkbox.sections.badge.label, role: 'information' },
-                status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
-            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section, key) => (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab", slot: `tab_content-${key + 1}` }, section, { key: section.messages.title }), section.checkboxes.length > 0 && section.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: section.messages.tooltip }, h("mg-button", { variant: "link", onClick: section.handleMassAction }, section.messages.action))))))));
-    }
-    /**
-     * render checkbox multi element
-     * @returns html element
-     */
-    renderCheckboxMulti() {
-        const selectedValuesNb = this.getSelectedItems().length;
-        const checkboxes = this.getDisplayItems();
-        const checkboxPaginatedProps = {
-            readonly: this.readonly,
-            disabled: this.disabled,
-            identifier: this.identifier,
-        };
-        return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
-                if (el !== null)
-                    this.mgPopover = el;
-            } }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
-            h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
-            this.searchValue.length > 0 ? (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab" }, checkboxPaginatedProps, { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), checkboxes: checkboxes, key: "search" }))) : (this.renderCheckboxTabs(checkboxes, checkboxPaginatedProps)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid })))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        let inputContent;
-        const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
-        if (this.readonly) {
-            inputContent = this.renderReadonly(readonlyValue);
-        }
-        else if (this.type === 'checkbox') {
-            inputContent = this.renderMgInputCheckboxList();
-        }
-        else {
-            inputContent = this.renderCheckboxMulti();
-        }
-        return (h("mg-input", { key: '5addea288b5c87fec33a56449d14f861aefd465d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["validateValue"],
-        "type": ["validateType"],
-        "inputVerticalList": ["watchInputVerticalList"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "displaySelectedValues": ["watchDisplaySelectedValues"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "validateDisabled"],
-        "checkboxItems": ["validateCheckboxItems"],
-        "displaySearchInput": ["watchDisplaySearchInput"],
-        "searchValue": ["validateSearchValue"]
-    }; }
-    static get style() { return mgInputCheckboxCss; }
-}, [257, "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],
-        "tooltipPosition": [1, "tooltip-position"],
-        "helpText": [1, "help-text"],
-        "valid": [1028],
-        "invalid": [1028],
-        "editButtonMessage": [1, "edit-button-message"],
-        "showButtonMessage": [1, "show-button-message"],
-        "selectButtonMessage": [1, "select-button-message"],
-        "classCollection": [32],
-        "errorMessage": [32],
-        "checkboxItems": [32],
-        "displaySearchInput": [32],
-        "searchValue": [32],
-        "searchResults": [32],
-        "selectValuesButtonKey": [32],
-        "activeTab": [32],
-        "setFocus": [64],
-        "displayError": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["validateValue"],
-        "type": ["validateType"],
-        "inputVerticalList": ["watchInputVerticalList"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "displaySelectedValues": ["watchDisplaySelectedValues"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "validateDisabled"],
-        "checkboxItems": ["validateCheckboxItems"],
-        "displaySearchInput": ["watchDisplaySearchInput"],
-        "searchValue": ["validateSearchValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-checkbox", "mg-badge", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-checkbox-paginated", "mg-input-text", "mg-input-title", "mg-popover", "mg-popover-content", "mg-tabs", "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-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            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":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "mg-input-checkbox-paginated":
-            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-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-tabs":
-            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();
-
-const MgInputCheckbox = MgInputCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputCheckbox, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{C as n,m as h,i as c,t as o}from"./index2.js";import{d as l,a as m}from"./mg-input-checkbox-paginated2.js";import{a as r,d as p,c as u,b as g}from"./mg-input.conf.js";import{i as d}from"./index3.js";import{d as b,S as v}from"./mg-tabs2.js";import{d as f}from"./mg-badge2.js";import{d as y}from"./mg-button2.js";import{d as x}from"./mg-card2.js";import{d as k}from"./mg-character-left2.js";import{d as _}from"./mg-icon2.js";import{d as w}from"./mg-input2.js";import{d as z}from"./mg-input-text2.js";import{d as j}from"./mg-input-title2.js";import{d as V}from"./mg-popover2.js";import{d as E}from"./mg-popover-content2.js";import{d as C}from"./mg-tooltip2.js";import{d as I}from"./mg-tooltip-content2.js";const O=["checkbox","multi"],S="selected",T=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.mode="custom",this.baseClassName="mg-c-input--checkbox",this.classTypeMulti="mg-c-input--checkbox-multi",this.classWithValues="mg-c-input--with-values",this.classSearchMode="mg-c-input--search-mode",this.multiStart=5,this.searchStart=10,this.hasOpenedPopover=!1,this.checkboxesId="checkboxes-list",this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.inputVerticalList=!1,this.required=!1,this.readonly=!1,this.displaySelectedValues=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new n([this.baseClassName,r]),this.checkboxItems=[],this.searchValue="",this.searchResults=[],this.selectValuesButtonKey="editButton",this.activeTab=1,this.handleInput=t=>{this.updateCheckboxItems("value",!!t.target.checked,(i=>i._id===t.target.id)),this.updateValues(),this.checkValidity(),this.setErrorMessage()},this.handleKeydown=t=>{var i;if("Tab"===t.key&&(null===(i=this.mgPopover)||void 0===i?void 0:i.display)){if(this.searchInput&&t.shiftKey&&this.searchInput.id===t.target.id)return void(this.mgPopover.display=!1);const i=Array.from(this.element.shadowRoot.querySelectorAll("input")).filter((t=>!t.hasAttribute("disabled"))).map((({id:t})=>t)),e=i.findIndex((i=>i===t.target.id));(e+1>=i.length&&!t.shiftKey||0===e&&t.shiftKey&&void 0===this.searchInput)&&(this.mgPopover.display=!1)}},this.handleBlur=()=>{this.checkValidity(),this.setErrorMessage()},this.handleSearchChange=t=>{this.searchValue=t.detail,t.stopPropagation()},this.handleActiveTabChange=t=>{this.activeTab=t.detail,this.resetTabsLimit()},this.handleMgPopoverDisplayChange=t=>{this.hasOpenedPopover=t.detail,this.setButtonTextKey(),t.detail||(this.searchValue="",this.resetTabsLimit(),this.checkValidity()),this.activeTab=this.checkboxItems.some((t=>t.value))?2:1},this.updateValues=()=>{this.value=this.checkboxItems.map((t=>(delete t._handleBlur,delete t._handleInput,delete t._handleKeydown,delete t._id,t)))},this.hasInvalidInput=()=>Array.from(this.element.shadowRoot.querySelectorAll('input[type="checkbox"]')).some((t=>!t.disabled&&!t.checkValidity())),this.updateSearchResults=()=>{this.searchResults=this.checkboxItems.filter((t=>h(t.title).includes(h(this.searchValue))))},this.validateRequired=()=>!this.required||this.checkboxItems.some((({value:t})=>t)),this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||!this.hasInvalidInput()&&this.validateRequired())},this.setButtonTextKey=()=>{if(this.hasOpenedPopover)return;let t="editButton";this.disabled?t="showButton":this.getSelectedItems().length<1&&(t="selectButton"),this.selectValuesButtonKey=t},this.getSelectValuesButtonMessage=()=>"editButton"===this.selectValuesButtonKey&&c(this.editButtonMessage)?this.editButtonMessage:"showButton"===this.selectValuesButtonKey&&c(this.showButtonMessage)?this.showButtonMessage:"selectButton"===this.selectValuesButtonKey&&c(this.selectButtonMessage)?this.selectButtonMessage:this.messages.input.checkbox[this.selectValuesButtonKey],this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.validateRequired()||(this.errorMessage=this.messages.errors.required))},this.getMgPopoverIdentifier=()=>this.identifier+"-input-mg-popover",this.getDisplayItems=()=>this.searchValue.length>0?this.searchResults:this.checkboxItems,this.getSelectedItems=()=>this.checkboxItems.filter((({value:t})=>t)),this.resetTabsLimit=()=>{Array.from(this.element.shadowRoot.querySelectorAll("mg-input-checkbox-paginated")).forEach((t=>{t.resetLimit()}))},this.renderReadonly=t=>this.inputVerticalList?a("ul",{class:"mg-c-input__readonly-value"},t.map((t=>a("li",{key:t},a("b",null,t))))):a("b",{class:"mg-c-input__readonly-value"},t.join(", ")),this.renderMgInputCheckboxList=()=>a(m,{checkboxes:this.checkboxItems,id:this.checkboxesId,disabled:this.disabled,name:this.name,invalid:this.invalid})}validateValue(t){if(!(t=>Array.isArray(t)&&t.every((t=>"object"==typeof t&&"string"==typeof t.title&&(null===t.value||"boolean"==typeof t.value)&&void 0!==t.value)))(t))throw Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${o(t)}.`);this.checkboxItems=t.map(((t,i)=>Object.assign(Object.assign({},t),{_id:`${this.identifier}_${i}`,_handleInput:this.handleInput.bind(this),_handleBlur:this.handleBlur.bind(this),_handleKeydown:this.handleKeydown.bind(this)}))),this.valueChange.emit(t)}validateType(t){if(void 0!==t&&!O.includes(t))throw Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${o(t)}.`);void 0===t?(this.mode="auto",this.type=O[0]):"multi"===t?(this.classCollection.add(this.classTypeMulti),this.element.dataset.mgPopoverGuard=this.getMgPopoverIdentifier()):this.classCollection.delete(this.classTypeMulti)}watchInputVerticalList(t){t?this.classCollection.add(p):this.classCollection.delete(p)}watchReadonly(t){t?this.classCollection.add(u):this.classCollection.delete(u)}watchDisplaySelectedValues(t){t?this.classCollection.add(this.classWithValues):this.classCollection.delete(this.classWithValues)}handleValidityChange(t,i,e){t&&"readonly"!==e?this.updateCheckboxItems(e,t):this.validateValue(this.value),this.checkValidity(),this.hasDisplayedError&&(this.hasDisplayedError="required"!==e,this.setErrorMessage()),this.setButtonTextKey()}validateDisabled(t){t?this.classCollection.add(g):this.classCollection.delete(g)}validateCheckboxItems(t){"auto"===this.mode&&(this.type=t.length>this.multiStart?"multi":"checkbox"),this.displaySearchInput="multi"===this.type&&t.length>this.searchStart,this.displaySearchInput&&this.updateSearchResults(),this.setButtonTextKey()}watchDisplaySearchInput(t){t?this.classCollection.add(this.classSearchMode):this.classCollection.delete(this.classSearchMode)}validateSearchValue(){this.updateSearchResults()}async setFocus(){var t;null===(t=this.element.shadowRoot.querySelector("input"))||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!c(i))throw Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value=this.value.map((t=>Object.assign(Object.assign({},t),{value:!1}))),new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,this.valid!==i&&this.inputValid.emit(this.valid)}updateCheckboxItems(t,i,e){this.checkboxItems=this.checkboxItems.map((s=>(("function"==typeof e&&e(s)||void 0===e)&&(s[t]=i),s)))}componentWillLoad(){return this.messages=d(this.element).messages,this.validateType(this.type),this.validateValue(this.value),this.validateDisabled(this.disabled),this.watchReadonly(this.readonly),this.watchInputVerticalList(this.inputVerticalList),this.watchDisplaySelectedValues(this.displaySelectedValues),this.watchDisplaySearchInput(this.displaySearchInput),setTimeout((()=>{this.checkValidity()}),0)}componentDidLoad(){var t,i;this.readonly||(this.searchInput=null===(t=this.element.shadowRoot.querySelector("mg-input-text"))||void 0===t?void 0:t.shadowRoot.querySelector("input"),null===(i=this.searchInput)||void 0===i||i.addEventListener("keydown",this.handleKeydown))}renderCheckboxTabs(t,i){const e=t=>()=>{this.getDisplayItems().forEach((i=>{i.disabled||(i.value=t!==S)})),this.updateValues()},[s,n]=t.reduce(((t,i)=>(t[i.value?0:1].push(i),t)),[[],[]]),h=[Object.assign(Object.assign({},i),{checkboxes:n,messages:Object.assign(Object.assign({},this.messages.input.checkbox.sections.notSelected),{showMore:this.messages.input.showMore}),handleMassAction:e("not-selected")}),Object.assign(Object.assign({},i),{checkboxes:s,messages:Object.assign(Object.assign({},this.messages.input.checkbox.sections.selected),{showMore:this.messages.input.showMore}),handleMassAction:e(S)})];return a("mg-tabs",{identifier:this.identifier+"-tabs",class:"mg-c-input__tabs",label:this.messages.input.checkbox.sections.label,items:h.map(((t,i)=>({label:t.messages.title,badge:{value:t.checkboxes.length,label:this.messages.input.checkbox.sections.badge.label,role:"information"},status:i+1===this.activeTab?v.ACTIVE:v.VISIBLE}))),activeTab:this.activeTab,"onActive-tab-change":this.handleActiveTabChange},h.map(((t,i)=>a("mg-input-checkbox-paginated",Object.assign({class:"mg-c-input__tab",slot:"tab_content-"+(i+1)},t,{key:t.messages.title}),t.checkboxes.length>0&&t.checkboxes.some((t=>!0!==t.disabled))&&a("mg-tooltip",{slot:"header-action",class:"mg-c-input__tabs-action",message:t.messages.tooltip},a("mg-button",{variant:"link",onClick:t.handleMassAction},t.messages.action))))))}renderCheckboxMulti(){const t=this.getSelectedItems().length,i=this.getDisplayItems(),e={readonly:this.readonly,disabled:this.disabled,identifier:this.identifier};return a("div",{class:"mg-c-input__input-container"},a("mg-popover",{arrowHide:!0,identifier:this.getMgPopoverIdentifier(),display:this.hasOpenedPopover,"onDisplay-change":this.handleMgPopoverDisplayChange,ref:t=>{null!==t&&(this.mgPopover=t)}},a("mg-button",{variant:"secondary","aria-describedby":this.identifier+"-title"},a("mg-icon",{icon:"list"}),this.getSelectValuesButtonMessage()),a("div",{slot:"content",class:"mg-c-input__content"},this.displaySearchInput?[a("mg-input-text",{key:"input-search",identifier:this.identifier+"-input-search",icon:"magnifying-glass",type:"search",placeholder:this.messages.input.checkbox.sections.search.label,label:this.messages.input.checkbox.sections.search.label,mgWidth:"full",value:this.searchValue,labelHide:!0,characterLeftHide:!0,name:"q","onValue-change":this.handleSearchChange}),this.searchValue.length>0?a("mg-input-checkbox-paginated",Object.assign({class:"mg-c-input__tab"},e,{messages:Object.assign(Object.assign({},this.messages.input.checkbox.sections.search),{showMore:this.messages.input.showMore}),checkboxes:i,key:"search"})):this.renderCheckboxTabs(i,e)]:a(m,{checkboxes:i,id:this.checkboxesId,disabled:this.disabled,name:this.name,invalid:this.invalid}))),this.displaySelectedValues?t>0&&a("ul",{role:"list",class:"mg-c-input__input-container-list"},this.getSelectedItems().map((({title:t})=>a("li",{class:"mg-c-input__input-value",key:t},t)))):a("b",null,this.messages.input.checkbox[t>1?"selectedValues":"selectedValue"].replace("{nb}",t)))}render(){let t;const i=this.value.filter((({value:t})=>t)).map((({title:t})=>t));return t=this.readonly?this.renderReadonly(i):"checkbox"===this.type?this.renderMgInputCheckboxList():this.renderCheckboxMulti(),a("mg-input",{key:"c5797a119a653c27004a171b7b79be7d4504800d",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.readonly?void 0:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&0===i.length?"label":this.tooltipPosition,helpText:this.readonly?void 0:this.helpText,errorMessage:this.readonly?void 0:this.errorMessage},t)}get element(){return this}static get watchers(){return{value:[{validateValue:0}],type:[{validateType:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],displaySelectedValues:[{watchDisplaySelectedValues:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],checkboxItems:[{validateCheckboxItems:0}],displaySearchInput:[{watchDisplaySearchInput:0}],searchValue:[{validateSearchValue:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}"}},[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],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],editButtonMessage:[1,"edit-button-message"],showButtonMessage:[1,"show-button-message"],selectButtonMessage:[1,"select-button-message"],classCollection:[32],errorMessage:[32],checkboxItems:[32],displaySearchInput:[32],searchValue:[32],searchResults:[32],selectValuesButtonKey:[32],activeTab:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{validateValue:0}],type:[{validateType:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],displaySelectedValues:[{watchDisplaySelectedValues:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],checkboxItems:[{validateCheckboxItems:0}],displaySearchInput:[{watchDisplaySearchInput:0}],searchValue:[{validateSearchValue:0}]}]);function B(){"undefined"!=typeof customElements&&["mg-input-checkbox","mg-badge","mg-button","mg-card","mg-character-left","mg-icon","mg-input","mg-input-checkbox-paginated","mg-input-text","mg-input-title","mg-popover","mg-popover-content","mg-tabs","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-checkbox":customElements.get(t(i))||customElements.define(t(i),T);break;case"mg-badge":customElements.get(t(i))||f();break;case"mg-button":customElements.get(t(i))||y();break;case"mg-card":customElements.get(t(i))||x();break;case"mg-character-left":customElements.get(t(i))||k();break;case"mg-icon":customElements.get(t(i))||_();break;case"mg-input":customElements.get(t(i))||w();break;case"mg-input-checkbox-paginated":customElements.get(t(i))||l();break;case"mg-input-text":customElements.get(t(i))||z();break;case"mg-input-title":customElements.get(t(i))||j();break;case"mg-popover":customElements.get(t(i))||V();break;case"mg-popover-content":customElements.get(t(i))||E();break;case"mg-tabs":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||C();break;case"mg-tooltip-content":customElements.get(t(i))||I()}}))}B();const M=T,D=B;export{M as MgInputCheckbox,D as defineCustomElement}