@nova-design-system/nova-webcomponents 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/cjs/nv-fieldmultiselect.cjs.entry.js

@@ -1,368 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b925c7f5.js');
-const v4 = require('./v4-7014b8b0.js');
-
-const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldmultiselect .input-container-multiselect.focus-within,nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldmultiselect hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container-multiselect.focus-within,.input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
-const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
-
-const NvFieldmultiselect = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged", 7);
-        this.multiselectChange = index.createEvent(this, "multiselectChange", 7);
-        /**
-         * Handle click on the input container.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.handleInputContainerClick = (event) => {
-            if (this.disabled || this.readonly) {
-                return; // Do nothing if the dropdown is disabled or read-only
-            }
-            const target = event.target;
-            // Check if it is the paragraph or another part of the container
-            if (target.tagName === 'P' || target.tagName === 'SPAN') {
-                this.open = true;
-                this.popoverElement.show();
-                // Simulate focus to trigger "focus-within" style
-                const inputContainer = this.el.querySelector('.input-container');
-                if (inputContainer) {
-                    inputContainer.classList.add('focus-within');
-                    // Remove the "focus-within" class after a delay or when the popover is closed
-                    const removeFocusWithin = () => {
-                        inputContainer.classList.remove('focus-within');
-                    };
-                    // Or remove the class when the popover is closed
-                    this.popoverElement.addEventListener('hide', removeFocusWithin);
-                }
-            }
-        };
-        /**
-         * Handle input change.
-         * @param {Event} event - The input event.
-         */
-        this.handleInput = (event) => {
-            if (!this.filterable)
-                return; // Do not filter if `filterable` is false
-            if (this.disabled || this.readonly) {
-                return; // Do not toggle the state if the dropdown is disabled or read-only
-            }
-            const input = event.target;
-            this.filterText = input.value.toLowerCase();
-            this.value = input.value; // Update the value
-            this.valueChanged.emit(input.value); // Emit an event if needed
-            this.filterItems(); // Update the visibility of items
-        };
-        /**
-         * Handle input focus.
-         */
-        this.handleInputFocus = () => {
-            if (this.disabled || this.readonly) {
-                return; // Do not toggle the state if the dropdown is disabled or read-only
-            }
-            this.open = true; // Force the popover to open
-        };
-        /**
-         * Handle input blur.
-         */
-        this.handleInputBlur = () => {
-            // Use a delay to check if the focus is still within the popover
-            setTimeout(() => {
-                if (!this.el.contains(document.activeElement)) {
-                    this.open = false;
-                    this.popoverElement.hide(); // Close the popover if the focus is outside the component
-                }
-            }, 150);
-        };
-        /**
-         * Toggle the dropdown popover.
-         * @returns {void}
-         */
-        this.togglePopover = () => {
-            if (this.disabled || this.readonly) {
-                return; // Do not toggle if disabled or read-only
-            }
-            this.open = !this.open;
-            if (this.open) {
-                this.popoverElement.show();
-                // Si le dropdown n'est pas filtrable, focus sur le premier élément
-                if (!this.filterable) {
-                    this.focusFirstItem();
-                }
-            }
-            else {
-                this.popoverElement.hide();
-            }
-        };
-        this.maxHeight = '200px';
-        this.selectedValues = [];
-        this.badgeLabel = 'selected';
-        this.options = [];
-        this.clearable = false;
-        this.inputId = v4.v4();
-        this.label = undefined;
-        this.description = undefined;
-        this.placeholder = undefined;
-        this.name = undefined;
-        this.open = false;
-        this.autocomplete = 'off';
-        this.value = undefined;
-        this.required = false;
-        this.error = false;
-        this.errorDescription = undefined;
-        this.readonly = false;
-        this.disabled = false;
-        this.emptyresult = 'No results found';
-        this.filterText = '';
-        this.filterable = false;
-        this.isFilterable = this.filterable;
-    }
-    handleOpenChanged(event) {
-        this.open = event.detail; // Update `open` based on the popover state
-    }
-    watchFilterableHandler(newValue) {
-        this.isFilterable = newValue;
-        this.filterable = newValue;
-    }
-    watchValueHandler() {
-        // Handle value change and update the corresponding dropdown item if it exists
-        this.setInitialSelection();
-    }
-    /**
-     * Listen for the `itemChecked` event emitted by child items.
-     * Updates the selected values accordingly.
-     * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
-     */
-    handleItemChecked(event) {
-        if (this.disabled || this.readonly)
-            return;
-        const { value, checked } = event.detail;
-        // Si une valeur est définie, met à jour `selectedValues`.
-        if (value) {
-            if (checked) {
-                // Ajoute la valeur si elle est cochée
-                this.selectedValues = [...this.selectedValues, value];
-            }
-            else {
-                // Retire la valeur si elle est décochée
-                this.selectedValues = this.selectedValues.filter(val => val !== value);
-            }
-        }
-        // Émet l'événement `multiselectChange` avec la nouvelle liste des valeurs sélectionnées
-        this.multiselectChange.emit(this.selectedValues);
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Subscribe to click outside event.
-     */
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Handle pre-selection during component initialization
-        this.setInitialSelection();
-        // Apply filtering if the dropdown is filterable and there is a value
-        if (this.filterable && this.value) {
-            this.filterText = this.value.toLowerCase();
-            this.filterItems(); // Update the visibility of items
-        }
-        else {
-            // Ensure all items are visible if no filtering is applied
-            this.resetFilter();
-        }
-    }
-    /**
-     * Set the initial selection based on the current value and update the inputElement value.
-     */
-    setInitialSelection() {
-        var _a;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        const selectedItem = items.find(item => {
-            var _a;
-            return item.getAttribute('label') === this.value ||
-                item.getAttribute('value') === this.value ||
-                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
-        });
-        // Remove 'selected' from all items first to reset the state
-        items.forEach(item => {
-            item.removeAttribute('selected');
-            item.classList.remove('selected');
-        });
-        if (selectedItem) {
-            // Add the `selected` attribute and `selected` class for visual styling
-            selectedItem.setAttribute('selected', 'true');
-            selectedItem.classList.add('selected');
-            // Update the value and inputElement value to reflect the pre-selected item
-            this.value =
-                selectedItem.getAttribute('label') ||
-                    selectedItem.getAttribute('value') ||
-                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
-                    '';
-            if (this.inputElement) {
-                this.inputElement.value = this.value;
-            }
-        }
-    }
-    /**
-     * Unsubscribe from click outside event.
-     */
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
-    }
-    /**
-     * Filter dropdown items based on the text entered by the user.
-     * If no items are found, display a message indicating no results.
-     */
-    filterItems() {
-        var _a;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        // Remove the "no results found" item if it exists
-        const existingEmptyItem = this.el.querySelector('nv-fielddropdownitemcheck[data-empty]');
-        if (existingEmptyItem) {
-            existingEmptyItem.remove();
-        }
-        let hasVisibleItems = false;
-        // Iterate over all items and adjust their visibility
-        items.forEach(item => {
-            var _a, _b;
-            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ''; // Get the textual content of the slot
-            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || ''; // Get the value of the `value` attribute
-            // Check if the filtered text is present either in the value or in the textual content
-            const shouldShow = value.includes(this.filterText) ||
-                textContent.includes(this.filterText);
-            item.style.display = shouldShow ? '' : 'none'; // Hide or show the item
-            if (shouldShow) {
-                hasVisibleItems = true;
-            }
-        });
-        // If no items are visible, add the "no results found" item
-        if (!hasVisibleItems) {
-            const emptyItem = document.createElement('nv-fielddropdownitemcheck');
-            emptyItem.setAttribute('data-empty', 'true');
-            emptyItem.setAttribute('disabled', 'true');
-            emptyItem.textContent = this.emptyresult;
-            (_a = this.el.querySelector('ul[slot="content"]')) === null || _a === void 0 ? void 0 : _a.appendChild(emptyItem);
-        }
-    }
-    /**
-     * Reset the filter and make all items visible.
-     */
-    resetFilter() {
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        items.forEach(item => {
-            item.style.display = '';
-        });
-    }
-    /**
-     * Retrieves the current filter text entered by the user.
-     * @returns {string} The filter text.
-     */
-    async getFilterText() {
-        return this.filterText;
-    }
-    /**
-     * Handle click outside the component.
-     * @param {MouseEvent} event - The click event.
-     */
-    handleClickOutside(event) {
-        if (this.el.contains(event.target) ||
-            (this.inputElement && this.inputElement.contains(event.target))) {
-            // If the click is inside the component or on the input, do not close the popover
-            return;
-        }
-        this.popoverElement.hide(); // Close the popover if the click is outside the component
-    }
-    handleKeyDown(event) {
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                this.popoverElement.show();
-                // Focus sur le premier élément si la liste n'est pas filtrable
-                if (!this.filterable) {
-                    this.focusFirstItem();
-                }
-                event.preventDefault();
-                return;
-            }
-            return;
-        }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        if (items.length === 0) {
-            console.warn('No dropdown items found to navigate');
-            return;
-        }
-        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            currentIndex = (currentIndex + 1) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
-        }
-        else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            currentIndex = (currentIndex - 1 + items.length) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
-        }
-        else if (event.key === 'Enter' && currentIndex >= 0) {
-            event.preventDefault();
-            items[currentIndex].click();
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            this.open = false;
-            this.popoverElement.hide();
-            if (this.inputElement) {
-                this.inputElement.blur();
-            }
-        }
-    }
-    updateHighlightedItem(items, index) {
-        items.forEach((item, i) => {
-            if (i === index) {
-                item.classList.add('highlighted');
-                item.setAttribute('tabindex', '0');
-                item.focus();
-            }
-            else {
-                item.classList.remove('highlighted');
-                item.setAttribute('tabindex', '-1');
-            }
-        });
-    }
-    focusFirstItem() {
-        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck');
-        if (firstItem) {
-            firstItem.setAttribute('tabindex', '0');
-            firstItem.classList.add('highlighted');
-            firstItem.focus();
-        }
-        else {
-            console.warn('No first item found to focus');
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '8491eef8fe6d3df7b6cc1992c2894e8dd2513a6c' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '79c49fdbcdf7ca404880d318c59afe5096bf4b9e', htmlFor: this.inputId }, index.h("slot", { key: 'f4eba554fc97e2ae1a24f01a20d3e37ab84acae4', name: "label" }, this.label))), index.h("nv-popover", { key: '46b5a94caa12e50b592de484b158ba67715cec14', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '473a98f6c7636d65b1d9d35beb6f3c5ba012179f', class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { key: '4038e51342c18e735ea2c164a1658f0928f3f7e1', name: "before-input" }), index.h("div", { key: 'cb53b835fb716e20f79593cdf7874f64987a8cc5', class: "input-container-multiselect", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c5879628d28b7901bca1da93499ed83f661e1fe3', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.value || this.placeholder))), index.h("nv-iconbutton", { key: '8459a377fbee5cebc457bcc53385a6e8832e4781', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover })), index.h("slot", { key: 'f338a93f4eaac472817ce32f72695e8ea026b3d7', name: "after-input" })), index.h("slot", { key: 'e9c871135bbed4f64113ab6a7ff5342a3374860e', name: "content" }, index.h("ul", { key: 'd129ae2fcf0d84d7337b886fbd7a0b64dc6e0c3e' }, this.options.map(option => (index.h("li", { class: {
-                'dropdown-item': true,
-                'is-selected': this.selectedValues.includes(option.value),
-            }, "aria-selected": this.selectedValues
-                .includes(option.value)
-                .toString(), role: "option" }, index.h("nv-fielddropdownitemcheck", { value: option.value, label: option.label, checked: this.selectedValues.includes(option.value) }))))))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '66ce27f7c0ee316381c12664130518e84e080fd4', class: "description" }, index.h("slot", { key: '9a7bd32d04f2b451fff8d6546273097c7bf8b0cc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ffcc1911fb6485e2b34dbb1dfb775d2800bfd940', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'd77fe0f486d0d0e9a905463f85fb91edbf7c0854', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "filterable": ["watchFilterableHandler"],
-        "value": ["watchValueHandler"]
-    }; }
-};
-NvFieldmultiselect.style = NvFieldmultiselectStyle0;
-
-exports.nv_fieldmultiselect = NvFieldmultiselect;
-
-//# sourceMappingURL=nv-fieldmultiselect.cjs.entry.js.map

package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nv-fieldmultiselect.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host"],"sources":["src/components/nv-fieldmultiselect/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["// // @import '../../styles/form-field';\n\n// // nv-fieldmultiselect {\n// //   @include form-field-variables();\n// //   @include form-field-root();\n\n// //   &[readonly]:not([readonly='false']) {\n// //     @include form-field-readonly-variables();\n// //   }\n\n// //   &[error]:not([error='false']) {\n// //     @include form-field-error-variables();\n// //   }\n\n// //   &[required]:not([required='false']) label {\n// //     @include form-field-label-required();\n// //   }\n\n// //   label {\n// //     @include form-field-label();\n// //   }\n\n// //   nv-popover {\n// //     width: 100%;\n// //     display: block;\n// //   }\n\n// //   .input-wrapper {\n// //     @include form-field-input-wrapper();\n// //     width: 100%;\n// //   }\n\n// //   // .input-container {\n// //   //   @include form-field-input-container();\n// //   //   display: flex;\n// //   //   align-items: center;\n// //   //   position: relative;\n// //   //   width: 100%;\n// //   //   min-height: 40px;\n\n// //   //   input,\n// //   //   p.non-filterable-text {\n// //   //     @include form-field-input();\n// //   //     width: 100%;\n// //   //     padding-right: 2rem;\n// //   //     flex-grow: 1;\n// //   //     margin: 0;\n// //   //     min-height: 100%;\n// //   //     box-sizing: border-box;\n// //   //   }\n\n// //   //   .toggle-dropdown-icon {\n// //   //     position: absolute;\n// //   //     right: 0;\n// //   //     top: 50%;\n// //   //     transform: translateY(-50%);\n// //   //     z-index: 2;\n// //   //   }\n\n// //   //   nv-icon.validation {\n// //   //     @include form-field-icon();\n// //   //     position: absolute;\n// //   //     right: 50px;\n// //   //   }\n\n// //   //   &.focus-within,\n// //   //   &:hover {\n// //   //     border-color: var(--nv-field-border-focus);\n// //   //     box-shadow: 0px 0px 0px var(--focus-field-stroke)\n// //   //       var(--nv-field-focus-box-shadow);\n// //   //   }\n// //   // }\n\n// //   .non-filterable-text {\n// //     display: block;\n// //     border-radius: var(--form-field-radius);\n// //     background-color: var(--nv-field-background);\n// //     color: var(--components-form-field-content-text);\n// //     font-size: var(--form-field-font-size);\n// //     font-weight: 500;\n// //     line-height: var(--form-field-line-height);\n// //     box-sizing: border-box;\n// //     cursor: pointer;\n// //     height: 100%;\n// //     min-height: 40px;\n\n// //     span {\n// //       display: inline-block;\n// //       width: 100%;\n// //       overflow: hidden;\n// //       text-overflow: ellipsis;\n// //     }\n// //   }\n\n// //   .dropdown-list {\n// //     max-height: var(--dropdown-max-height, 200px);\n// //     overflow-y: auto;\n// //     list-style: none;\n// //     margin: 0;\n// //     padding: 0;\n// //     background-color: var(--nv-field-background);\n// //     border: 1px solid var(--nv-field-border);\n// //     border-radius: var(--form-field-radius);\n\n// //     li {\n// //       padding: 0.5rem 1rem;\n// //       display: flex;\n// //       align-items: center;\n// //       cursor: pointer;\n// //       transition: background-color 0.2s ease;\n\n// //       &.dropdown-item {\n// //         &:hover {\n// //           background-color: rgba(var(--nv-primary-rgb), 0.1);\n// //         }\n\n// //         &.is-selected {\n// //           background-color: rgba(var(--nv-primary-rgb), 0.2);\n// //         }\n\n// //         // input[type='checkbox'] {\n// //         //   margin-right: 0.5rem;\n// //         // }\n// //       }\n\n// //       &.disabled {\n// //         color: var(--nv-field-disabled-text);\n// //         cursor: not-allowed;\n// //       }\n// //     }\n// //   }\n\n// //   // .badge {\n// //   //   display: inline-flex;\n// //   //   align-items: center;\n// //   //   background-color: var(--nv-primary);\n// //   //   color: var(--nv-field-background);\n// //   //   padding: 0.25rem 0.5rem;\n// //   //   border-radius: 12px;\n// //   //   font-size: 0.75rem;\n\n// //   //   .close-icon {\n// //   //     margin-left: 0.25rem;\n// //   //     cursor: pointer;\n\n// //   //     &:hover {\n// //   //       color: rgba(var(--nv-primary-rgb), 0.8);\n// //   //     }\n// //   //   }\n// //   // }\n\n// //   .description {\n// //     @include form-field-description();\n// //   }\n\n// //   .error-description {\n// //     @include form-field-error-description();\n// //   }\n\n// //   hr {\n// //     border: none;\n// //     border-top: 1px solid var(--dropdown-divider-color, #ccc);\n// //     margin: 0.5rem 0;\n// //   }\n// // }\n\n// // .input-container.focus-within,\n// // .input-container:hover {\n// //   border-color: var(--nv-field-border-focus);\n// //   box-shadow: 0px 0px 0px var(--focus-field-stroke)\n// //     var(--nv-field-focus-box-shadow);\n// // }\n\n// @import '../../styles/form-field';\n\n// nv-fieldmultiselect {\n//   @include form-field-variables();\n//   @include form-field-root();\n\n//   &[readonly]:not([readonly='false']) {\n//     @include form-field-readonly-variables();\n//   }\n\n//   &[error]:not([error='false']) {\n//     @include form-field-error-variables();\n//   }\n\n//   &[required]:not([required='false']) label {\n//     @include form-field-label-required();\n//   }\n\n//   label {\n//     @include form-field-label();\n//   }\n//   // display: flex;\n//   // align-items: center;\n//   // justify-content: space-between;\n//   // max-width: 300px;\n//   // width: 100%;\n//   // padding: var(--menu-contextual-item-padding-y)\n//   //   var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n//   // font-size: var(--menu-contextual-item-font-size);\n//   // font-weight: var(--menu-contextual-item-font-weight);\n//   // color: var(--components-menu-contextual-item-content);\n//   // border-radius: var(--menu-contextual-item-radius);\n//   // transition: background-color 150ms ease-out, color 150ms ease-out;\n//   // cursor: pointer;\n\n//   // &:hover,\n//   // &:focus,\n//   // &:focus-within {\n//   //   background-color: var(--components-menu-contextual-item-background-hover);\n//   //   color: var(--components-menu-contextual-item-content-hover);\n//   // }\n\n//   // &.selected {\n//   //   background-color: var(\n//   //     --components-menu-contextual-item-background-selected\n//   //   );\n//   //   color: var(--components-menu-contextual-item-content-selected);\n//   // }\n\n//   // &[disabled]:not([disabled='false']) {\n//   //   cursor: not-allowed;\n//   //   background-color: unset;\n//   //   color: var(--components-menu-contextual-item-content-disabled);\n//   // }\n\n//   // [data-scope='text'] {\n//   //   flex-grow: 1;\n//   //   overflow: hidden;\n//   //   text-overflow: ellipsis;\n//   //   white-space: nowrap;\n//   // }\n\n//   // .selection-icon {\n//   //   padding-left: 10px;\n//   //   color: var(--components-menu-contextual-item-icon-selected);\n//   //   align-self: center;\n//   // }\n// }\n\n// :root {\n//   --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n//   --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n//   --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n//   --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n//   --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n// }\n\n\n@import '../../styles/form-field';\n\nnv-fieldmultiselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    width: 100%;\n    display: block;\n  }\n\n  .input-wrapper-multiselect {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container-multiselect {\n    @include form-field-input-container();\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      padding-right: 2rem;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    .toggle-dropdown-icon {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      position: absolute;\n      right: 50px;\n    }\n\n    &.focus-within,\n    &:hover {\n      border-color: var(--nv-field-border-focus);\n      box-shadow: 0px 0px 0px var(--focus-field-stroke)\n        var(--nv-field-focus-box-shadow);\n    }\n  }\n\n  .non-filterable-text {\n    display: block;\n    border-radius: var(--form-field-radius);\n    background-color: var(--nv-field-background);\n    color: var(--components-form-field-content-text);\n    font-size: var(--form-field-font-size);\n    font-weight: 500;\n    line-height: var(--form-field-line-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    height: 100%;\n    min-height: 40px;\n\n    span {\n      display: inline-block;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  hr {\n    border: none;\n    border-top: 1px solid var(--dropdown-divider-color, #ccc);\n    margin: 0.5rem 0;\n  }\n}\n\n.input-container-multiselect.focus-within,\n.input-container-multiselect:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke)\n    var(--nv-field-focus-box-shadow);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n// import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitemcheck/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - The content of the list.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fieldmultiselect',\n  styleUrl: 'nv-fieldmultiselect.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldmultiselect {\n  @Element() el: HTMLNvFieldmultiselectElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Maximum height of the dropdown list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '200px';\n\n  /**\n   * List of selected values in the multiselect.\n   */\n  @State()\n  selectedValues: string[] = [];\n\n  /**\n   * Text for the badge showing the number of selected items.\n   */\n  @Prop({ reflect: true })\n  readonly badgeLabel: string = 'selected';\n\n  /**\n   * List of options available in the dropdown.\n   */\n  @Prop()\n  readonly options: Array<{ label: string; value: string }> = [];\n\n  /**\n   * Enables a clear-all button for the selection.\n   */\n  @Prop({ reflect: true })\n  readonly clearable: boolean = false;\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyresult: string = 'No results found';\n\n  /**\n   * The text entered by the user for filtering dropdown items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  // @State()\n  // selectedValues: Set<string> = new Set();\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler() {\n    // Handle value change and update the corresponding dropdown item if it exists\n    this.setInitialSelection();\n  }\n\n  /**\n   * Event emitted when the selection changes in the multiselect.\n   * Emits the current list of selected values.\n   */\n  @Event()\n  multiselectChange: EventEmitter<string[]>;\n\n  /**\n   * Listen for the `itemChecked` event emitted by child items.\n   * Updates the selected values accordingly.\n   * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.\n   */\n  @Listen('itemChecked')\n  handleItemChecked(\n    event: CustomEvent<{ value: string | undefined; checked: boolean }>,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const { value, checked } = event.detail;\n\n    // Si une valeur est définie, met à jour `selectedValues`.\n    if (value) {\n      if (checked) {\n        // Ajoute la valeur si elle est cochée\n        this.selectedValues = [...this.selectedValues, value];\n      } else {\n        // Retire la valeur si elle est décochée\n        this.selectedValues = this.selectedValues.filter(val => val !== value);\n      }\n    }\n\n    // Émet l'événement `multiselectChange` avec la nouvelle liste des valeurs sélectionnées\n    this.multiselectChange.emit(this.selectedValues);\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Handle pre-selection during component initialization\n    this.setInitialSelection();\n\n    // Apply filtering if the dropdown is filterable and there is a value\n    if (this.filterable && this.value) {\n      this.filterText = this.value.toLowerCase();\n      this.filterItems(); // Update the visibility of items\n    } else {\n      // Ensure all items are visible if no filtering is applied\n      this.resetFilter();\n    }\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    const selectedItem = items.find(\n      item =>\n        item.getAttribute('label') === this.value ||\n        item.getAttribute('value') === this.value ||\n        item.textContent?.trim() === this.value,\n    );\n\n    // Remove 'selected' from all items first to reset the state\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      // Add the `selected` attribute and `selected` class for visual styling\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n\n      // Update the value and inputElement value to reflect the pre-selected item\n      this.value =\n        selectedItem.getAttribute('label') ||\n        selectedItem.getAttribute('value') ||\n        selectedItem.textContent?.trim() ||\n        '';\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Handle click on the input container.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return; // Do nothing if the dropdown is disabled or read-only\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if it is the paragraph or another part of the container\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return; // Do not filter if `filterable` is false\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.value = input.value; // Update the value\n    this.valueChanged.emit(input.value); // Emit an event if needed\n    this.filterItems(); // Update the visibility of items\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitemcheck');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyresult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Handle click outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside(event: MouseEvent) {\n    if (\n      this.el.contains(event.target as Node) ||\n      (this.inputElement && this.inputElement.contains(event.target as Node))\n    ) {\n      // If the click is inside the component or on the input, do not close the popover\n      return;\n    }\n\n    this.popoverElement.hide(); // Close the popover if the click is outside the component\n  }\n\n  /**\n   * Handle input focus.\n   */\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    this.open = true; // Force the popover to open\n  };\n\n  /**\n   * Handle input blur.\n   */\n  private handleInputBlur = () => {\n    // Use a delay to check if the focus is still within the popover\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        this.open = false;\n        this.popoverElement.hide(); // Close the popover if the focus is outside the component\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the dropdown popover.\n   * @returns {void}\n   */\n  private togglePopover = (): void => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle if disabled or read-only\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      this.popoverElement.show();\n\n      // Si le dropdown n'est pas filtrable, focus sur le premier élément\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    } else {\n      this.popoverElement.hide();\n    }\n  };\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        this.popoverElement.show();\n\n        // Focus sur le premier élément si la liste n'est pas filtrable\n        if (!this.filterable) {\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    if (items.length === 0) {\n      console.warn('No dropdown items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      items[currentIndex].click();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n      this.popoverElement.hide();\n      if (this.inputElement) {\n        this.inputElement.blur();\n      }\n    }\n  }\n\n  private updateHighlightedItem(\n    items: (\n      | HTMLNvFielddropdownitemcheckElement\n      | HTMLNvFielddropdownitemcheckElement\n    )[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        (item as HTMLElement).focus();\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck',\n    ) as HTMLNvFielddropdownitemcheckElement;\n\n    if (firstItem) {\n      firstItem.setAttribute('tabindex', '0');\n      firstItem.classList.add('highlighted');\n      firstItem.focus();\n    } else {\n      console.warn('No first item found to focus');\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          {/* <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.filterText}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  tabIndex={0}\n                  onClick={this.handleInputContainerClick}\n                  onFocus={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <span>\n                    {this.selectedValues.length > 0\n                      ? `${this.selectedValues.length} ${this.badgeLabel}`\n                      : this.placeholder}\n                  </span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div> */}\n\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container-multiselect\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <slot name=\"content\">\n            <ul>\n              {this.options.map(option => (\n                <li\n                  class={{\n                    'dropdown-item': true,\n                    'is-selected': this.selectedValues.includes(option.value),\n                  }}\n                  aria-selected={this.selectedValues\n                    .includes(option.value)\n                    .toString()}\n                  role=\"option\"\n                >\n                  <nv-fielddropdownitemcheck\n                    value={option.value}\n                    label={option.label}\n                    checked={this.selectedValues.includes(option.value)}\n                  />\n                </li>\n              ))}\n            </ul>\n          </slot>\n        </nv-popover>\n\n        {/* Description */}\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {/* Message d'erreur */}\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css

@@ -1,12 +0,0 @@
-@charset "UTF-8";
-nv-fielddropdownitemcheck slot-fb {
-  all: unset; /* Réinitialise tous les styles hérités */
-}
-nv-fielddropdownitemcheck nv-fieldcheckbox input[type=checkbox] {
-  all: unset; /* Réinitialise tous les styles hérités */
-  display: inline-block; /* Assurez-vous qu'il s'affiche correctement */
-  margin: 0; /* Supprime les marges */
-  padding: 0; /* Supprime les espaces internes */
-  width: 20px;
-  height: 20px;
-}

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js

@@ -1,6 +0,0 @@
-const NvFielddropdownitemcheckDocs = {
-    component: 'nv-fielddropdownitemcheck',
-    skip: true,
-};
-export default NvFielddropdownitemcheckDocs;
-//# sourceMappingURL=nv-fielddropdownitemcheck.docs.js.map

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nv-fielddropdownitemcheck.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,4BAA4B,GAChC;IACE,SAAS,EAAE,2BAA2B;IACtC,IAAI,EAAE,IAAI;CACX,CAAC;AAEJ,eAAe,4BAA4B,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvFielddropdownitemcheckDocs: NovaDocs<Components.NvFielddropdownitemcheck> =\n  {\n    component: 'nv-fielddropdownitemcheck',\n    skip: true,\n  };\n\nexport default NvFielddropdownitemcheckDocs;\n"]}