@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.34

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridbodyCss = "";
 const NvDatagridbodyStyle0 = nvDatagridbodyCss;
@@ -14,7 +14,7 @@ const NvDatagridbody = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c24bf0e6d18d00b39b6e0382b0268ee24e6e7567' }, index.h("tbody", { key: '1fae4b6126134317bd2dc7d4819ed861e8915761' }, index.h("slot", { key: 'a6a537e6ed6c8b831da5294c1bce7010038b6291' }))));
+        return (index.h(index.Host, { key: 'fdb910bb7b6388d4d0f8d61a18822e8334534a18' }, index.h("tbody", { key: 'f19bd351d639a4d9a94d27647e977d14d6cacf7e' }, index.h("slot", { key: '376ae58f100a27adefaec863497479d814af8124' }))));
     }
 };
 NvDatagridbody.style = NvDatagridbodyStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridcolumnCss = "";
 const NvDatagridcolumnStyle0 = nvDatagridcolumnCss;
@@ -15,7 +15,7 @@ const NvDatagridcolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4607ea5be4f54aec289b09e40f980aaf33c304c7' }, index.h("th", { key: '5a24f302d8b01c8ed44fb3c015d9701967d2833f' }, index.h("slot", { key: '272e390027621eb09b17baa1529fbdaba40eb74a' }))));
+        return (index.h(index.Host, { key: '2982f199f488077a91812c214b0e881a0e32e1ec' }, index.h("th", { key: 'cc46a9eb1aa232a8068308d7e7175aed89f007c1' }, index.h("slot", { key: 'bd1f13adfd55b1c4ae8dab30d7aea33c9079f3e0' }))));
     }
 };
 NvDatagridcolumn.style = NvDatagridcolumnStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagriddatacellCss = "";
 const NvDatagriddatacellStyle0 = nvDatagriddatacellCss;
@@ -15,7 +15,7 @@ const NvDatagriddatacell = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bf3caf31ee31fdba6254c1907883474a84610dda' }, index.h("td", { key: '709febb6ab666afd3841c7d0086f889309f31fbd' }, index.h("slot", { key: 'c309eda6f57527a3ca1bba68983521121944a156' }))));
+        return (index.h(index.Host, { key: 'dbdf7fa0353e84e702ddd082fe466f89492f48e1' }, index.h("td", { key: '3d3d8ae038cb5a6bf3404fe7178003529790fc10' }, index.h("slot", { key: 'b8585f6517d053f90be59fe7e492771114911496' }))));
     }
 };
 NvDatagriddatacell.style = NvDatagriddatacellStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridheadCss = "";
 const NvDatagridheadStyle0 = nvDatagridheadCss;
@@ -14,7 +14,7 @@ const NvDatagridhead = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '272ab6e598f1edfc53fd99372acd64c3834c0fd0' }, index.h("thead", { key: '66d5e24d5d0757be7b0190bc4c156e476e0f748e' }, index.h("slot", { key: 'b41ac2580003d1df53595d66837ed51d597bee8c' }))));
+        return (index.h(index.Host, { key: 'e56a8e78a9034ce2cd2eda97ee074662b533ace9' }, index.h("thead", { key: '0a32742beaf23f214bbf3f03f9de5bab748573cd' }, index.h("slot", { key: '0beabbfbadee2af0caa07f31fb681d24fe6da240' }))));
     }
 };
 NvDatagridhead.style = NvDatagridheadStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridrowCss = "";
 const NvDatagridrowStyle0 = nvDatagridrowCss;
@@ -14,7 +14,7 @@ const NvDatagridrow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f136ccd96f48d5743cc1c08c26029421af4ab2c0' }, index.h("tr", { key: '21787f1823a778ab6433cbcc5bff0596e2257485' }, index.h("slot", { key: 'edfc2d36e247097eaddfd694bf9de44f001a8219' }))));
+        return (index.h(index.Host, { key: '99a83706b411732ff2d2443794ab61bdc0a95c7e' }, index.h("tr", { key: 'd64ab8c5d39236cdbe4950c7d891f3aca9c696dc' }, index.h("slot", { key: '696117c1e59fe60e0d3de5928658ba479cfeb472' }))));
     }
 };
 NvDatagridrow.style = NvDatagridrowStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.js');
 
@@ -105,13 +105,13 @@ const NvFieldcheckbox = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, index.h("input", { key: 'bffbfc1ac879fb70e1c7b436c3a9845150b78bca', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (index.h(index.Host, { key: 'dee6fd99a2e97591189c8a6bdce3c8909b4ceb97', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: 'dd6ab7f4cddd11c89cc15249290fe43d83a669ab', class: "input-container" }, index.h("input", { key: '1132052e8f369f16d3a0ce4698b72644975886f8', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), index.h("span", { key: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, index.h("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, index.h("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, index.h("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', name: "error-description" }, this.errorDescription))))));
+            } }), index.h("span", { key: 'ac87b7d83e5731da6ce8f9990a1d55bd247cb750', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '911e69045129dc8755fea438570858f338a18ad3', name: "checked-icon" }, index.h("svg", { key: 'de2e547ac9ab00c52ee9c924fdb4e24cf0321158', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '10dc26b32951b18a6bd29482349894bf1ca87bd8', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '7e957be646aa6a96f94e0cf70b5ef88b8037e07e', name: "indeterminate-icon" }, index.h("svg", { key: 'd132aabc77f0dcf5c67377a60004b72307cf61ba', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '353c950a9d8d14c32e276e393c9314374d10337f', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'a14fc39e16a9dcee74e722a361fcc8df63fad5d6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '13a9fee6f1c4aea8735eca27f36944d6c26cf7f2', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'dbbce25b8f65d2b12d10e419f94ae56ef2d0c355', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3647cdaa6a4ec2cacab7b2c1fe731e3454746648', class: "description" }, index.h("slot", { key: '19dff40045f22c6403029731a0a628455b831c5c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'dd78ae62d1a1cd6c2a9b41d32740321cb1f36f2a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '1e4d1c10387aaea37c87111c43c84cd204ca1619', name: "error-description" }, this.errorDescription))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const v4 = require('./v4-7014b8b0.js');
 
-const nvFielddropdownCss = "nv-fielddropdown{--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-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown 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-fielddropdown nv-popover{width:100%}nv-fielddropdown div[data-scope=popover]{width:100%;padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border)}nv-fielddropdown ul[slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{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-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container: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-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .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-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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-fielddropdown .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)}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
+const nvFielddropdownCss = "nv-fielddropdown{--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-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border);width:100%}nv-fielddropdown nv-popover [data-scope=popover] hr{color:var(--components-list-custom-separator)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{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-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container: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-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .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-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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-fielddropdown .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-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
 const NvFielddropdownStyle0 = nvFielddropdownCss;
 
 const NVFieldDropDown = class {
@@ -183,28 +183,39 @@ const NVFieldDropDown = class {
         this.isFilterable = newValue;
         this.filterable = newValue;
     }
-    watchValueHandler() {
-        // Handle value change and update the corresponding dropdown item if it exists
-        this.setInitialSelection();
+    watchValueHandler(newValue) {
+        if (newValue) {
+            this.updateSelectedItem(newValue);
+        }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region METHODS
+    componentWillLoad() {
+        if (this.value) {
+            // If an initial value exists, set it as selected
+            this.updateSelectedItem(this.value);
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Check again after complete rendering
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+    }
     /**
      * Subscribe to click outside event.
      */
     connectedCallback() {
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Handle pre-selection during component initialization
+        // First, reset the filter to ensure all elements are visible
+        this.resetFilter();
+        // Then, handle the pre-selection
         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();
+        // Finally, apply the filter if needed
+        if (this.filterable && this.filterText) {
+            this.filterItems();
         }
     }
     /**
@@ -219,16 +230,13 @@ const NVFieldDropDown = class {
                 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') ||
@@ -238,6 +246,9 @@ const NVFieldDropDown = class {
                 this.inputElement.value = this.value;
             }
         }
+        else {
+            console.warn('No matching item found for value:', this.value);
+        }
     }
     /**
      * Unsubscribe from click outside event.
@@ -303,10 +314,9 @@ const NVFieldDropDown = class {
     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
+        this.popoverElement.hide();
     }
     handleKeyDown(event) {
         if (!this.open) {
@@ -362,9 +372,6 @@ const NVFieldDropDown = class {
             if (i === index) {
                 item.classList.add('highlighted');
                 item.setAttribute('tabindex', '0');
-                if (!item.checkVisibility()) {
-                    console.log('Item not focused');
-                }
                 item.focus(); // Forcer le focus ici
                 item.scrollIntoView({ block: 'nearest' });
             }
@@ -384,13 +391,45 @@ const NVFieldDropDown = class {
             console.warn('No first item found to focus');
         }
     }
+    updateSelectedItem(value) {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // Reset all items
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        // Find the item matching the value
+        const matchingItem = items.find(item => {
+            var _a;
+            const itemLabel = item.getAttribute('label');
+            const itemValue = item.getAttribute('value');
+            const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            return itemLabel === value || itemValue === value || itemText === value;
+        });
+        if (matchingItem) {
+            // Mark the item as selected
+            matchingItem.setAttribute('selected', 'true');
+            matchingItem.classList.add('selected');
+            // Update the input
+            if (this.inputElement) {
+                this.inputElement.value = value;
+            }
+            // Emit the selection event
+            this.dropdownItemSelected.emit({
+                value: value,
+                label: matchingItem.getAttribute('label') || value,
+                selected: true,
+                disabled: matchingItem.hasAttribute('disabled'),
+            });
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ee220f04cb94b18afa0504938ee269c0edb1d1b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9cf2035bcef627718cb0e9cda9f10d1deb829201', htmlFor: this.inputId }, index.h("slot", { key: '6fe8d6dadee22c489696fbd94067398f5b22f8a7', name: "label" }, this.label))), index.h("nv-popover", { key: 'c96697a489ceb13a600f63e1496dcc2cedf6baa7', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '0a996e770694e7521e57007f5b3a9272ef9ad485', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '41b6e77ce228cd4aedbffbb440bf375c82e05c30', name: "before-input" }), index.h("div", { key: 'ffdeba473c57672b13577a225c0b2cc436df2c12', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '14af93b626704024c44371934cc1b4b49b068ac7', 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: '961e3b20bb234ba3c24e8e5389154245ae35fdb9', 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: '37f6b2288683f0b2e16e553b66e5a534a0d372f6', name: "after-input" })), index.h("slot", { key: 'd7c7ad38d9f486408858a68c1cba7e9c6ae8788f', name: "content" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6a4d137ba434bb2d36bc74b6f4cb442274857716', class: "description" }, index.h("slot", { key: 'd2e85ddebab03a8a752c0f7558b57f35d2e30b85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b05d210c0e0a43ce8bd96849f7556f1accd691fb', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7d455d5027589ccad7cdccf5ce0e0cc25a7ac7bd', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '2ff0476929b58734a50c303ebb6ad308f0c41602' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '87756cac62747e76d851813426c4aa560b6a5a4e', htmlFor: this.inputId }, index.h("slot", { key: 'ae2d7374b524274e86777639cd1ad5cbc5c57404', name: "label" }, this.label))), index.h("nv-popover", { key: 'ed58d72aab9b23f25cd4ec8359ce7148a43fb22e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ae3e65b9274c56f012e9798f549ee62063879688', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '1fc77f160aebd9e21c8a79406ec1e829bd3c9265', name: "before-input" }), index.h("div", { key: '7502dc9df91a3b91bf1bb448e9f3cbee9f356f80', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '50acd86050d4357c8e7af3c8464ad34cb73382ad', 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: '2f8c2773754656835583484e2fa7acc0fabcffb6', 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: '26d4de108aa80b931f03201adc7b2470dc9ed526', name: "after-input" })), index.h("slot", { key: 'b9a39773f100d2579b2a9e568c19fabbbabbcefe', name: "content" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '220b815bc502ff4f18fe40471139efc808f6a31b', class: "description" }, index.h("slot", { key: '6d0bfc07e3c5c5329d38e447f0c3a1974663e15b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '0cc511a914c00de65ee9f0f2033e292b9123620c', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f442db41fdde383abc0873bafbaabba8be1387b3', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"nv-fielddropdown.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host"],"sources":["src/components/nv-fielddropdown/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdown {\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  nv-popover {\n    width: 100%\n  }\n  div[data-scope='popover'] {\n    width: 100%;\n    padding: var(--list-custom-padding);\n    background-color: var(--components-list-custom-background);\n    border: 1px solid var(--components-list-custom-border);\n\n  }\n  ul[slot='content'] {\n    gap: var(--list-custom-gap-y);\n    display: flex;\n    flex-direction: column;\n  }\n  hr {\n    border: none;\n    height: 1px;\n    background-color: var(--components-list-custom-separator);\n    margin: 0;\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    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\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","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';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\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-fielddropdown',\n  styleUrl: 'nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NVFieldDropDown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\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   * Event emitted when an item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  @Listen('itemSelected')\n  handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n    if (this.disabled || this.readonly) return;\n\n    // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // For each item, remove the 'selected' attribute and the 'selected' class.\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n        item.classList.remove('selected');\n      }\n    });\n\n    // Update the value and emit the event with the selected item.\n    this.value = event.detail.value;\n    (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n      'selected',\n      'true',\n    );\n    (event.target as HTMLElement).classList.add('selected');\n    this.dropdownItemSelected.emit(event.detail);\n\n    // Close the popover after selecting.\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  }\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  //#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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[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-fielddropdownitem');\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\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        if (!this.filterable) {\n          // Focus sur le premier élément si ce n'est pas filtrable\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Vérifiez si le popover est défini avant de chercher les items\n    if (!this.popoverElement) {\n      console.warn('Popover element is not defined');\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Vérifiez si les items existent\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: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        if (!item.checkVisibility()) {\n          console.log('Item not focused');\n        }\n\n        item.focus(); // Forcer le focus ici\n        item.scrollIntoView({ block: 'nearest' });\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('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\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 || 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} // Gérer les touches fléchées ici\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0} // Ajout du tabindex pour permettre de le focus\n                  onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\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\"></slot>\n        </nv-popover>\n\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        {(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  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-fielddropdown.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,iqMAAiqM,CAAC;AAC7rM,8BAAe,kBAAkB;;MCiCpB,eAAe;IAN5B;;;;;;;;;;;;QAqBW,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;QAwCpC,SAAI,GAAY,KAAK,CAAC;;;;;;;QASb,iBAAY,GAA+B,KAAK,CAAC;;;;;QAejD,aAAQ,GAAY,KAAK,CAAC;;;;;;QAQ1B,UAAK,GAAY,KAAK,CAAC;;;;;;QAgBvB,aAAQ,GAAY,KAAK,CAAC;;;;;;QAQ1B,aAAQ,GAAY,KAAK,CAAC;;;;QAM1B,gBAAW,GAAW,kBAAkB,CAAC;;;;QAMlD,eAAU,GAAW,EAAE,CAAC;;;;QAMxB,eAAU,GAAY,KAAK,CAAC;QAG5B,iBAAY,GAAY,IAAI,CAAC,UAAU,CAAC;QAGxC,mBAAc,GAAgB,IAAI,GAAG,EAAE,CAAC;;;;;QA0JhC,8BAAyB,GAAG,CAAC,KAAiB;YACpD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;YAG3C,IAAI,MAAM,CAAC,OAAO,KAAK,GAAG,IAAI,MAAM,CAAC,OAAO,KAAK,MAAM,EAAE;gBACvD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;;gBAG3B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC1C,kBAAkB,CACJ,CAAC;gBACjB,IAAI,cAAc,EAAE;oBAClB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;;oBAG7C,MAAM,iBAAiB,GAAG;wBACxB,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;qBACjD,CAAC;;oBAGF,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;iBACjE;aACF;SACF,CAAC;;;;;QAMM,gBAAW,GAAG,CAAC,KAAY;YACjC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACpC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC;;;;QAuFM,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB,CAAC;;;;QAKM,oBAAe,GAAG;;YAExB,UAAU,CAAC;gBACT,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAC7C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;oBAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;iBAC5B;aACF,EAAE,GAAG,CAAC,CAAC;SACT,CAAC;;;;;QAMM,kBAAa,GAAG;YACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO;aACR;YAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;;gBAG3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;oBACpB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB;aACF;iBAAM;gBACL,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;aAC5B;SACF,CAAC;KAiOH;IAzhBC,kBAAkB,CAAC,KAAmD;QACpE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;;QAG3C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,CAAC;;QAGtC,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM,EAAE;gBACzB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;aACnC;SACF,CAAC,CAAC;;QAGH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,KAAK,CAAC,MAAyC,CAAC,YAAY,CAC3D,UAAU,EACV,MAAM,CACP,CAAC;QACD,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;QAG7C,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B;KACF;IAUD,iBAAiB,CAAC,KAA2B;QAC3C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAGD,sBAAsB,CAAC,QAAiB;QACtC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;KAC5B;IAGD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;SACnC;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;;YAEd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;KACF;IAED,gBAAgB;QACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;QAGvE,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;KACF;;;;IAKD,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;QAGvE,IAAI,CAAC,WAAW,EAAE,CAAC;;QAGnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;;QAG3B,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;;;;IAKO,mBAAmB;;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,CAAC;QAEtC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI;;YACF,OAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;gBACzC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;gBACzC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,MAAK,IAAI,CAAC,KAAK,CAAA;SAAA,CAC1C,CAAC;QAEF,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SACnC,CAAC,CAAC;QAEH,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,KAAK;gBACR,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC;oBAClC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC;qBAClC,MAAA,YAAY,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA;oBAChC,EAAE,CAAC;YACL,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aACtC;SACF;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,mCAAmC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/D;KACF;;;;IAKD,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC3E;;;;;IAwDO,WAAW;;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,CAAC;;QAGtC,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC7C,kCAAkC,CACnC,CAAC;QACF,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,MAAM,EAAE,CAAC;SAC5B;QAED,IAAI,eAAe,GAAG,KAAK,CAAC;;QAG5B,KAAK,CAAC,OAAO,CAAC,IAAI;;YAChB,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;YAC1D,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;;YAG9C,MAAM,UAAU,GACd,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;gBAC/B,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAExC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,MAAM,CAAC;YAE9C,IAAI,UAAU,EAAE;gBACd,eAAe,GAAG,IAAI,CAAC;aACxB;SACF,CAAC,CAAC;;QAGH,IAAI,CAAC,eAAe,EAAE;YACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;YACjE,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YAC7C,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC3C,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACzC,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,0CAAE,WAAW,CAAC,SAAS,CAAC,CAAC;SACrE;KACF;;;;IAKO,WAAW;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,CAAC;QAEtC,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ;;;;;IAOD,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB;;;;;IAMO,kBAAkB,CAAC,KAAiB;QAC1C,IACE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;aACrC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC,EACvE;YACA,OAAO;SACR;QACD,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B;IAgDD,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;gBAE3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;;oBAEpB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB;gBAED,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YACD,OAAO;SACR;;QAGD,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;YAC/C,OAAO;SACR;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wCAAwC,CAAC,CAC/B,CAAC;;QAGtC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;YACpD,OAAO;SACR;QAED,IAAI,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,IACrC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CACvC,CAAC;QAEF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;YACjD,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;SACjD;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;YAChE,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;SACjD;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,YAAY,IAAI,CAAC,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;SAC7B;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B;SACF;KACF;IAEO,qBAAqB,CAC3B,KAAuC,EACvC,KAAa;QAEb,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,KAAK,KAAK,EAAE;gBACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBAClC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;gBACnC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;aAC3C;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;gBACrC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACrC;SACF,CAAC,CAAC;KACJ;IAEO,cAAc;QACpB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAChE,IAAI,SAAS,EAAE;YACZ,SAAyB,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,CAAC,qBAAqB,CACxB,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,EACrC,CAAC,CACF,CAAC;SACH;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;SAC9C;KACF;IAEO,kBAAkB,CAAC,KAAa;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb,CAAC;;QAGtC,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SACnC,CAAC,CAAC;;QAGH,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI;;YAClC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7C,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;YAE1C,OAAO,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK,CAAC;SACzE,CAAC,CAAC;QAEH,IAAI,YAAY,EAAE;;YAEhB,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;YAGvC,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;aACjC;;YAGD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBAC7B,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,KAAK;gBAClD,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC;aAChD,CAAC,CAAC;SACJ;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDD,oEAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEDA,yEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAA0B,CAAC,EAC7D,WAAW,EAAC,YAAY,EACxB,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfA,kEAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,IACvCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EAEjCA,kEACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,yBAAyB,IAEvCA,mEAAM,IAAI,EAAC,eAAe,GAAQ,EAEjC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAClDA,mBACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,KAEFA,eACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,yBAAyB,EACvC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE9BA,sBAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAQ,CAC3C,CACL,EAEDA,4EACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,aAAa,GAAG,cAAc,EAChD,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,OAAO,gBACJ,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,eAAe,kBAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,aAAa,GAC3B,CACE,EAENA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EAENA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,EAEZ,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAEA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnDA,kEAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjDA,mEAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACI,EACP;KACH;;;;;;;;;;;;","names":["uuidv4","h","Host"],"sources":["src/components/nv-fielddropdown/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdown {\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  nv-popover  [data-scope=popover]{\n    padding: var(--list-custom-padding);\n    background-color: var(--components-list-custom-background);\n    border: 1px solid var(--components-list-custom-border);\n    width: 100%;\n    \n    hr{\n      color : var(--components-list-custom-separator);\n    }\n  }\n\n  nv-popover [slot=content] {\n    gap: var(--list-custom-gap-y);\n    display: flex;\n    flex-direction: column;\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    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    height: 1px;\n    background-color: var(--components-list-custom-separator);\n    margin: 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","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';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\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-fielddropdown',\n  styleUrl: 'nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NVFieldDropDown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\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   * Event emitted when an item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  @Listen('itemSelected')\n  handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n    if (this.disabled || this.readonly) return;\n\n    // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // For each item, remove the 'selected' attribute and the 'selected' class.\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n        item.classList.remove('selected');\n      }\n    });\n\n    // Update the value and emit the event with the selected item.\n    this.value = event.detail.value;\n    (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n      'selected',\n      'true',\n    );\n    (event.target as HTMLElement).classList.add('selected');\n    this.dropdownItemSelected.emit(event.detail);\n\n    // Close the popover after selecting.\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  }\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(newValue: string) {\n    if (newValue) {\n      this.updateSelectedItem(newValue);\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  componentWillLoad() {\n    if (this.value) {\n      // If an initial value exists, set it as selected\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Check again after complete rendering\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // First, reset the filter to ensure all elements are visible\n    this.resetFilter();\n\n    // Then, handle the pre-selection\n    this.setInitialSelection();\n\n    // Finally, apply the filter if needed\n    if (this.filterable && this.filterText) {\n      this.filterItems();\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\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    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\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    } else {\n      console.warn('No matching item found for value:', this.value);\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[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-fielddropdownitem');\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-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\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      return;\n    }\n    this.popoverElement.hide();\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        if (!this.filterable) {\n          // Focus sur le premier élément si ce n'est pas filtrable\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Vérifiez si le popover est défini avant de chercher les items\n    if (!this.popoverElement) {\n      console.warn('Popover element is not defined');\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Vérifiez si les items existent\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: HTMLNvFielddropdownitemElement[],\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.focus(); // Forcer le focus ici\n        item.scrollIntoView({ block: 'nearest' });\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('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('No first item found to focus');\n    }\n  }\n\n  private updateSelectedItem(value: string) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Reset all items\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    // Find the item matching the value\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    if (matchingItem) {\n      // Mark the item as selected\n      matchingItem.setAttribute('selected', 'true');\n      matchingItem.classList.add('selected');\n\n      // Update the input\n      if (this.inputElement) {\n        this.inputElement.value = value;\n      }\n\n      // Emit the selection event\n      this.dropdownItemSelected.emit({\n        value: value,\n        label: matchingItem.getAttribute('label') || value,\n        selected: true,\n        disabled: matchingItem.hasAttribute('disabled'),\n      });\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 || 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} // Gérer les touches fléchées ici\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0} // Ajout du tabindex pour permettre de le focus\n                  onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\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\"></slot>\n        </nv-popover>\n\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        {(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  //#endregion RENDER\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--list-custom-item-padding-y) var(--list-custom-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-custom-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .dropdown-item-text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{color:var(--components-list-custom-item-content-default);align-self:center}";
 const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
@@ -57,7 +57,7 @@ const NvFielddropdownitem = class {
     //#region RENDER
     render() {
         const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
-        return (index.h(index.Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (index.h("slot", null)) : (index.h("div", { class: "dropdown-item-text-wrapper" }, index.h("span", { "data-scope": "text" }, this.label), this.selected && (index.h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
+        return (index.h(index.Host, { key: 'e482a762c7b011389f1f1312b14f1686e38528aa', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (index.h("slot", null)) : (index.h("div", { class: "dropdown-item-text-wrapper" }, index.h("span", { "data-scope": "text" }, this.label), this.selected && (index.h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-72b8a9ad.js');
+const index = require('./index-ddc37f87.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.js');
 
@@ -103,9 +103,9 @@ const NvFieldnumber = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5d63f2dca1678d7ea971b52a40f55481eae421d6' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '145560063839b6fe34e3c8431003d5f5fb5eb65d', htmlFor: this.inputId }, index.h("slot", { key: 'd36ca2394cf3ce62c7d5f6177480a41979d7d1cb', name: "label" }, this.label))), index.h("div", { key: 'c53243b5f2019033a24b22120e1bd5209c415075', class: "input-wrapper" }, index.h("slot", { key: 'e32e0fdd6b0e27cbb719b3d962fb6417eb2f3e1b', name: "before-input" }), index.h("div", { key: 'b9de75924bde8a2cd1108e34173d0f867f0bdcea', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4d0bbdce8201370f1f62d06eabb5a2bd3b248c1f', name: "leading-input" }), index.h("input", { key: '0c85ade03f9ca7e6c3aca788b3a107d0807d7b70', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '5da0668775a6841bf01c662009ec7bf9048b1622', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'be8e6e9e3c5428885aed216f49f1510b0fb29201', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '84ddbc5eb7e35ea216e0c9650dcbcb865e3bd726', class: "stepper-spacer" }), index.h("div", { key: '9ba5a8087ef4fa46614d1c7492c80781af5c4a40', class: "stepper" }, index.h("nv-icon", { key: 'a3b5adffd9b7a5a266711f02ed2862e84f2a5839', name: "minus", size: "md", onClick: this.handleMinus, class: clsx.clsx({ disabled: this.isMinValueReached() }) }), index.h("nv-icon", { key: '1a37933cfeab32a057807173a3b411e23a3c93b0', name: "plus", size: "md", onClick: this.handlePlus, class: clsx.clsx({ disabled: this.isMaxValueReached() }) }))), index.h("slot", { key: '99c9105e0f46dfb5e56fa3949dd99264f61e7be5', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3b9df6f1e03117123b376c637840e4219ee4e45d', class: "description" }, index.h("slot", { key: 'deb7681e9d6fe583e418f6d25248b667c4b2fcf0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6848cf6e73924df0552ed71078d19cc1423b6d72', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'cf5526311207e2fca942ba84a5480cae6917060d', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '440aa92437d7cbd00e09ad8f7aab663ad09c8406' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e892aef7b1534c6d73181d2d25fe7f17945524ac', htmlFor: this.inputId }, index.h("slot", { key: '77489c52e374149a75effa7d3f4ab97c3109a13c', name: "label" }, this.label))), index.h("div", { key: 'a1d23b332303ac468771b2b7dd2a31d21d9a3487', class: "input-wrapper" }, index.h("slot", { key: '76f9993d1168a004b1de82b1e19b99062e7b6386', name: "before-input" }), index.h("div", { key: 'a51ec42108436d853c2e74aeb64088dc071074f7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '9084cef7de60e84db9dc7042b64e6c64a4a8f5d7', name: "leading-input" }), index.h("input", { key: '395d2d7a2b8157495735b47cac47fd37e7c24c7e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: 'e015cebd60a0bda842dd8aff05dbce27586e861c', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '42a0ea62a160f92150d949789694d1d6e992c39d', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '9df0a8c66b6086dfcd0e1c48e21d4d1866ed4563', class: "stepper-spacer" }), index.h("div", { key: 'a4d16b2f50878ecdb5a322b6707fce5e908e88a0', class: "stepper" }, index.h("nv-icon", { key: 'edf55fafe8d8f58aab7b5083d630905e78783c2e', name: "minus", size: "md", onClick: this.handleMinus, class: clsx.clsx({ disabled: this.isMinValueReached() }) }), index.h("nv-icon", { key: '04d7e7b4fdc80d444ab64660f71c998bbce0f73a', name: "plus", size: "md", onClick: this.handlePlus, class: clsx.clsx({ disabled: this.isMaxValueReached() }) }))), index.h("slot", { key: '9893c52a46ad08a1ccb301411141bd723af33b21', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b21b984e9695fab93a198ef58a3bd394bfc3aaa3', class: "description" }, index.h("slot", { key: '1750efcd886f70078848f608e0be326324ea6928', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '14cde2f86fd23c98fafb2cd4645e7af64ce6c011', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '96e1a6084ec5467cf35e1eb3e86fa6b757f2574c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }