@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

package/dist/native/p-c6fe73a9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as i,a as t,g as r}from"./p-ab002252.js";import{v as n}from"./p-f5ff676c.js";const d='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[hidden]:not([hidden=false]) label{display:none}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]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}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;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out;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,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus: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 .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[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}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);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}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>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}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)}';const s=d;const l=class{constructor(i){e(this,i);this.valueChanged=o(this,"valueChanged",7);this.dropdownItemSelected=o(this,"dropdownItemSelected",7);this.inputId=n();this.open=false;this.autocomplete="off";this.required=false;this.error=false;this.readonly=false;this.disabled=false;this.emptyResult="No results found";this.filterable=false;this.autofocus=false;this.filterText="";this.selectedValues=new Set;this.parsedOptions=[];this.handleInputContainerClick=e=>{if(this.disabled||this.readonly){return}const o=e.target;if(o.tagName==="P"||o.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const o=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",o)}}};this.handleInput=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const o=e.target;this.open=true;this.filterText=o.value.toLowerCase();this.filterItems()};this.handleInputFocus=()=>{if(this.disabled||this.readonly)return;this.open=true};this.togglePopover=()=>{if(this.disabled||this.readonly)return;this.open=!this.open};this.getSelectedLabel=()=>{var e,o,i,t,r;if(!this.value)return"";if(this.parsedOptions.length>1){const i=this.parsedOptions.find((e=>e.value===this.value));return(o=(e=i===null||i===void 0?void 0:i.label)!==null&&e!==void 0?e:i===null||i===void 0?void 0:i.value)!==null&&o!==void 0?o:this.value}const n=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const d=n.find((e=>e.value===this.value));const s=d?(r=(i=d.label)!==null&&i!==void 0?i:(t=d.textContent)===null||t===void 0?void 0:t.trim())!==null&&r!==void 0?r:d.value:"";return s};this.clearFilter=()=>{if(!this.filterable)return;this.filterText="";this.inputElement.value=this.getSelectedLabel();this.inputElement.focus();this.filterItems()}}handleDropdownItemSelected(e){if(this.disabled||this.readonly)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((o=>{if(o!==e.target){o.removeAttribute("selected")}else{o.setAttribute("selected","true")}}));this.clearFilter();this.value=e.detail.value;this.open=false}handleOpenChanged(e){this.open=e.detail}watchValueHandler(e){this.valueChanged.emit(e)}handleOptionsChange(e){var o;if(e){try{const i=JSON.parse(e);this.parsedOptions=[...i];if(!this.value){const e=i.find((e=>e.selected));this.value=(o=e===null||e===void 0?void 0:e.value)!==null&&o!==void 0?o:"";this.updateSelectedItem(this.value)}}catch(e){console.error("nv-fielddropdown: error parsing options:",e);this.parsedOptions=[]}}else{this.parsedOptions=[]}}handleBlur(e){const o=e.relatedTarget;if(!(o instanceof Node)||!this.el.contains(o)){this.open=false;if(this.inputElement){this.filterText="";this.inputElement.value=this.getSelectedLabel();setTimeout((()=>{this.filterItems()}),200)}}}handleKeyDown(e){if(!this.el)return;if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem:not([disabled]):not([hidden])"));let i=o.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();i=(i+1)%o.length;this.updateHighlightedItem(o,i)}else if(e.key==="ArrowUp"){e.preventDefault();i=(i-1+o.length)%o.length;this.updateHighlightedItem(o,i)}else if(e.key==="Escape"){e.preventDefault();this.open=false}}async getFilterText(){return this.filterText}filterItems(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const i=this.el.querySelector("nv-fielddropdownitem[data-empty]");if(i){i.remove()}let t=false;o.forEach((e=>{var o,i;const r=((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase())||"";const n=((i=e.value)===null||i===void 0?void 0:i.toLowerCase())||"";const d=n.includes(this.filterText)||r.includes(this.filterText);if(d)e.removeAttribute("hidden");else e.setAttribute("hidden","");if(d){t=true}}));if(!t){const o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-empty","true");o.setAttribute("disabled","true");o.textContent=this.emptyResult;(e=this.el.querySelector('ul[slot="content"]'))===null||e===void 0?void 0:e.appendChild(o)}}resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));e.forEach((e=>{e.style.display=""}))}updateHighlightedItem(e,o){e.forEach(((e,i)=>{if(i===o){e.classList.add("highlighted");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted")}}))}updateSelectedItem(e){if(!e)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const i=o.find((o=>{var i;const t=o.getAttribute("label");const r=o.getAttribute("value");const n=(i=o.textContent)===null||i===void 0?void 0:i.trim();return t===e||r===e||n===e}));o.forEach((e=>{if(e===i){e.setAttribute("selected","")}else{e.removeAttribute("selected")}}))}componentWillLoad(){this.resetFilter();if(this.filterable&&this.filterText){this.filterItems()}if(this.options){this.handleOptionsChange(this.options)}}componentDidLoad(){if(this.value){this.updateSelectedItem(this.value)}if(this.inputElement){this.inputElement.value=this.getSelectedLabel()}}render(){return i(t,{key:"9624c909eb35f0e6d9a9875cbeaec8ffb8122d40",role:"combobox","aria-expanded":this.open.toString(),"aria-haspopup":"listbox","aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"27389b0b422af6b7714cea6654ac243d1e9c242f",htmlFor:this.inputId},i("slot",{key:"d77573395386ba0c0afa2233f420fa250b86ac9f",name:"label"},this.label)),i("nv-popover",{key:"0b1dda746e71b810ab6050cd8ef6a6bb9a44866e",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{key:"437a94f2230891674dd9c820595fcecfcea48e77",class:"input-wrapper",slot:"trigger"},i("slot",{key:"e01c2e4bda2806b21c0016bfe710969044994dfc",name:"before-input"}),i("div",{key:"310d387f5cc22ad85232c0f491763a810833befc",class:"input-container",onClick:this.handleInputContainerClick},i("slot",{key:"c16096b15be3fe16ad8f5fb4a730050f6f797342",name:"leading-input"}),this.filterable||this.disabled||this.readonly?i("input",{"data-scope":"focusable",id:this.inputId,type:"search",ref:e=>this.inputElement=e,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.getSelectedLabel(),required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput,onFocus:this.handleInputFocus,onClick:this.handleInputFocus,onKeyDown:this.handleKeyDown}):i("p",{"data-scope":"focusable",id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClick,tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocus},this.getSelectedLabel()||this.value||this.placeholder),this.filterable&&this.filterText&&this.open&&i("nv-iconbutton",{key:"208c945944cddcb1c67a3b560428f21ca056b17b",name:"x",size:"md",emphasis:"lower",class:"clear-button",onClick:this.clearFilter,"aria-label":"Clear input"}),this.error&&i("nv-icon",{key:"e3797d5e47e54fd328c0bcd86d14e80ee5e21e17",name:"alert-circle",class:"validation",size:"md"}),i("nv-iconbutton",{key:"1ccb8f3bb1ad086339b9888bf89e929164576910","data-scope":"toggle-dropdown",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,tabIndex:this.disabled?-1:0})),i("slot",{key:"92a66b2da4f7ada21fdb8199d2b047840050be13",name:"after-input"})),i("div",{key:"51ba49500cb0e03531c5b4b939e76817f432be57",slot:"content"},this.parsedOptions.length>0?i("ul",null,this.parsedOptions.map((e=>i("nv-fielddropdownitem",{label:e.label,value:e.value,disabled:e.disabled,selected:e.value===this.value})))):i("slot",{name:"content"}))),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"3cb31c8bfb17db1862af12e817f6646480cd697c",class:"description"},i("slot",{key:"830538f4e63f9de6a613fcce23a80370d941e9da",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"8ffee4c7d2c9a93bc4de344f812ff568e3d6a23e",hidden:!this.error,class:"error-description"},i("slot",{key:"8f534be6233f54e6b43e2271d0a151a02148d5d8",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{value:["watchValueHandler"],options:["handleOptionsChange"]}}};l.style=s;export{l as nv_fielddropdown};
-//# sourceMappingURL=p-c6fe73a9.entry.js.map

package/dist/native/p-c6fe73a9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NvFielddropdown","constructor","hostRef","this","inputId","uuidv4","open","autocomplete","required","error","readonly","disabled","emptyResult","filterable","autofocus","filterText","selectedValues","Set","parsedOptions","handleInputContainerClick","event","target","tagName","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInput","input","value","toLowerCase","filterItems","handleInputFocus","togglePopover","getSelectedLabel","length","matchingItem","find","option","_b","_a","label","items","Array","from","querySelectorAll","item","selectedLabel","_e","_c","_d","textContent","trim","clearFilter","inputElement","focus","handleDropdownItemSelected","forEach","removeAttribute","setAttribute","detail","handleOpenChanged","watchValueHandler","newValue","valueChanged","emit","handleOptionsChange","parsedOpts","JSON","parse","defaultValue","selected","updateSelectedItem","console","handleBlur","relatedTarget","Node","contains","setTimeout","handleKeyDown","key","preventDefault","currentIndex","findIndex","updateHighlightedItem","getFilterText","existingEmptyItem","hasVisibleItems","shouldShow","includes","emptyItem","document","createElement","appendChild","resetFilter","style","display","index","i","scrollIntoView","block","itemLabel","getAttribute","itemValue","itemText","componentWillLoad","options","componentDidLoad","render","h","Host","role","toString","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onKeyDown","tabIndex","size","emphasis","map","description","errorDescription","hidden"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@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  &[hidden]:not([hidden='false']) label {\n    display: none;\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    @include input-wrapper-styles();\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    @include input-container-styles();\n\n    input[type=\"search\"]::-webkit-search-decoration,\n    input[type=\"search\"]::-webkit-search-cancel-button,\n    input[type=\"search\"]::-webkit-search-results-button,\n    input[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance:none;\n    }\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n    }\n  }\n\n  .non-filterable-text {\n    @include non-filterable-text-styles();\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\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';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\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@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/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   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true })\n  readonly filterable: boolean = false;\n\n  /**\n   * List of options available in the dropdown. The options are passed as a JSON\n   * string.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\"\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.clearFilter();\n    this.value = event.detail.value;\n    this.open = false;\n  }\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('value')\n  watchValueHandler(newValue: string) {\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n        if (!this.value) {\n          const defaultValue = parsedOpts.find(option => option.selected);\n          this.value = defaultValue?.value ?? '';\n          this.updateSelectedItem(this.value);\n        }\n      } catch (error) {\n        console.error('nv-fielddropdown: error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\n\n      if (this.inputElement) {\n        this.filterText = '';\n        this.inputElement.value = this.getSelectedLabel();\n        setTimeout(() => {\n          this.filterItems();\n        }, 200);\n      }\n    }\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.el) return;\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitem:not([disabled]):not([hidden])',\n      ),\n    ) as HTMLNvFielddropdownitemElement[];\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 === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\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  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\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  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.open = true;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\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      if (shouldShow) item.removeAttribute('hidden');\n      else item.setAttribute('hidden', '');\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  /** Reset the filter and make all items visible. */\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  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = !this.open;\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.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private getSelectedLabel = (): string => {\n    if (!this.value) return '';\n\n    if (this.parsedOptions.length > 1) {\n      const matchingItem = this.parsedOptions.find(\n        option => option.value === this.value,\n      );\n      return matchingItem?.label ?? matchingItem?.value ?? this.value;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => item.value === this.value);\n\n    const selectedLabel = matchingItem\n      ? matchingItem.label ??\n        matchingItem.textContent?.trim() ??\n        matchingItem.value\n      : '';\n\n    return selectedLabel;\n  };\n\n  private clearFilter = () => {\n    if (!this.filterable) return;\n\n    this.filterText = '';\n    this.inputElement.value = this.getSelectedLabel();\n    this.inputElement.focus();\n    this.filterItems();\n  };\n\n  private updateSelectedItem(value: string) {\n    if (!value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\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      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.resetFilter();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n    if (this.inputElement) {\n      this.inputElement.value = this.getSelectedLabel();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"combobox\"\n        aria-expanded={this.open.toString()}\n        aria-haspopup=\"listbox\"\n        aria-label={this.label}\n      >\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\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.filterable || this.disabled || this.readonly ? (\n                <input\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onClick={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  {this.getSelectedLabel() || this.value || this.placeholder}\n                </p>\n              )}\n\n              {this.filterable && this.filterText && this.open && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  class=\"clear-button\"\n                  onClick={this.clearFilter}\n                  aria-label=\"Clear input\"\n                />\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\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                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.parsedOptions.length > 0 ? (\n              <ul>\n                {this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\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"],"mappings":"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","ignoreList":[]}

package/dist/native/p-ce64d562.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as r,a as e}from"./p-ab002252.js";const b="nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";const s=b;const c=class{constructor(r){a(this,r)}render(){return r(e,{key:"5ab0f09cb86a92464ffcd06d8129543539bdcddf",role:"navigation","aria-label":"breadcrumbs"},r("ol",{key:"a7624a2400d9a91ec477694bbd3600960e198981"},r("slot",{key:"7c4102ceebe110377bf212e0695bdec6b455ea74"})))}};c.style=s;export{c as nv_breadcrumbs};
-//# sourceMappingURL=p-ce64d562.entry.js.map

package/dist/native/p-d352a8b3.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,a as s,g as o}from"./p-ab002252.js";import{v as n}from"./p-f5ff676c.js";const r='nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}';const l=r;const a=class{constructor(o){t(this,o);this.valueChanged=e(this,"valueChanged",7);this.multiselectChange=e(this,"multiselectChange",7);this.inputId=n();this.maxHeight="200px";this.badgeLabel="";this.emptyResult="No results found";this.required=false;this.error=false;this.readonly=false;this.disabled=false;this.autocomplete="off";this.filterable=false;this.open=false;this.parsedOptions=[];this.selectedValues=[];this.sortedOptions=[];this.filterText="";this.debounceDelay=300;this.modeState="options";this.isHandlingEscape=false;this.autofocus=false;this.handleBadgeCloseOptions=()=>{this.selectedValues=[];this.multiselectChange.emit(this.selectedValues);const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{t.checked=false;t.style.display=""}));this.parsedOptions=this.parsedOptions.filter((t=>!t.isDivider));this.reorderOptionsContent()};this.handleBadgeCloseSlots=()=>{this.selectedValues=[];this.multiselectChange.emit(this.selectedValues);const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{t.checked=false;t.style.display=""}));this.reorderSlotContent()};this.handlePopoverClose=()=>{if(this.isHandlingEscape){return}this.filterText="";if(this.modeState==="options"){this.reorderOptionsContent()}else{this.reorderSlotContent()}if(this.filterable){this.resetFilter()}};this.handleInputBlurOptions=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.filterText="";this.resetFilter()}}}),150)};this.handleInputContainerClickOptions=t=>{if(this.disabled||this.readonly){return}const e=t.target;if(e.tagName==="P"||e.tagName==="SPAN"){this.open=true;const t=this.el.querySelector(".input-container");if(t){t.classList.add("focus-within");const e=()=>{t.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",e)}}};this.handleInputContainerClickSlots=t=>{if(this.disabled||this.readonly){return}const e=t.target;if(e.tagName==="P"||e.tagName==="SPAN"){this.open=true;const t=this.el.querySelector(".input-container");if(t){t.classList.add("focus-within");const e=()=>{t.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",e)}}};this.handleInputOptions=t=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const e=t.target;this.value=e.value;this.valueChanged.emit(this.value);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterText=e.value.toLowerCase();this.filterItemsOption()}),this.debounceDelay)};this.handleInputSlots=t=>{if(!this.filterable)return;if(this.disabled||this.readonly)return;const e=t.target;this.value=e.value;this.valueChanged.emit(this.value);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterText=e.value.toLowerCase();this.filterSlotsItems()}),this.debounceDelay)};this.handleInputFocusOptions=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputFocusSlots=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputBlurSlots=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.filterText="";this.resetFilter()}}}),150)};this.togglePopoverOptions=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.togglePopoverSlots=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.renderOptionsMode=()=>i(s,null,(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:t=>this.popoverElement=t,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect"},i("slot",{name:"leading-input"}),this.selectedValues.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.selectedValues.length>0,label:`${this.selectedValues.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseOptions}),this.filterable||this.disabled||this.readonly?i("input",{type:"text",id:this.inputId,ref:t=>this.inputElement=t,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.value,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputOptions,onFocus:this.handleInputFocusOptions,onBlur:this.handleInputBlurOptions,onKeyDown:this.handleKeyDown}):i("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClickOptions,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusOptions,role:"combobox","aria-expanded":this.open},i("span",null,this.value||this.placeholder)),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),i("nv-iconbutton",{"data-scope":"toggle-dropdown",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.togglePopoverOptions})),i("slot",{name:"after-input"})),i("div",{slot:"content",role:"listbox","aria-multiselectable":"true",style:{"max-height":this.maxHeight,"overflow-y":"auto"}},i("ul",{role:"content"},this.parsedOptions.map((t=>i("nv-fielddropdownitemcheck",{label:t.label,description:t.description,value:t.value,checked:this.selectedValues.includes(t.value),disabled:t.disabled}))),i("hr",{class:"multiselect-divider",style:{display:"none"}})))),this.renderDescriptions());this.renderSlotsMode=()=>i(s,null,(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:t=>this.popoverElement=t,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect",onClick:this.handleInputContainerClickSlots},i("slot",{name:"leading-input"}),this.selectedValues.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.selectedValues.length>0,label:`${this.selectedValues.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseSlots}),this.filterable||this.disabled||this.readonly?i("input",{id:this.inputId,ref:t=>this.inputElement=t,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.value,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputSlots,onFocus:this.handleInputFocusSlots,onBlur:this.handleInputBlurSlots,onKeyDown:this.handleKeyDown}):i("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClickSlots,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusSlots,role:"combobox","aria-expanded":this.open},i("span",null,this.value||this.placeholder)),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),i("nv-iconbutton",{"data-scope":"toggle-dropdown",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.togglePopoverSlots})),i("slot",{name:"after-input"})),i("div",{slot:"content",role:"listbox","aria-multiselectable":"true",style:{"max-height":this.maxHeight,"overflow-y":"auto"}},i("slot",{name:"content"}))),this.renderDescriptions())}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this))}componentWillLoad(){this.modeState=this.options?"options":"slots";if(this.modeState==="options"){this.handleOptionsChange(this.options)}if(this.modeState==="slots"){Promise.resolve().then((()=>{const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));this.selectedValues=t.filter((t=>t.hasAttribute("checked"))).map((t=>t.getAttribute("value")||""));requestAnimationFrame((()=>{this.reorderSlotContent()}))}))}if(this.modeState==="options"){this.sortedOptions=[...this.parsedOptions]}if(this.filterable&&this.value){this.filterText=String(this.value).toLocaleLowerCase();this.filterItems()}else{this.resetFilter()}}componentDidLoad(){if(this.modeState==="options"){requestAnimationFrame((()=>{this.reorderOptionsContent()}))}}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}handleOpenChanged(t){this.open=t.detail;if(this.open){if(this.filterText){this.filterItems()}}else{this.handlePopoverClose()}}handleItemChecked(t){if(this.disabled||this.readonly){return}const{value:e,checked:i}=t.detail;if(e!==undefined&&e!==null){const t=[...this.selectedValues];const s=t.indexOf(e);if(i&&s===-1){t.push(e)}else if(!i&&s>-1){t.splice(s,1)}if(JSON.stringify(this.selectedValues)!==JSON.stringify(t)){this.selectedValues=t;requestAnimationFrame((()=>{this.multiselectChange.emit(this.selectedValues)}))}}else{console.warn("Received itemChecked event with undefined or null value")}}handleOptionsChange(t){if(typeof t==="string"){try{const e=JSON.parse(t);this.selectedValues=e.filter((t=>t.checked)).map((t=>t.value));this.parsedOptions=[...e]}catch(t){console.error("Error parsing options:",t);this.parsedOptions=[]}}else if(Array.isArray(t)){this.selectedValues=t.filter((t=>t.checked)).map((t=>t.value));this.parsedOptions=[...t]}else{this.parsedOptions=[]}Promise.resolve().then((()=>{requestAnimationFrame((()=>{if(this.modeState==="options"){this.reorderOptionsContent()}}))}))}watchValueHandler(){this.setInitialSelection()}handleSlotChange(t){const e=t.target;if(e&&e.name==="content"){requestAnimationFrame((()=>{this.reorderSlotContent()}))}}async getFilterText(){return this.filterText}setInitialSelection(){var t;const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const i=e.find((t=>{var e;return t.getAttribute("label")===this.value||t.getAttribute("value")===this.value||((e=t.textContent)===null||e===void 0?void 0:e.trim())===this.value}));e.forEach((t=>{t.removeAttribute("selected");t.classList.remove("selected")}));if(i){i.setAttribute("selected","true");i.classList.add("selected");this.value=i.getAttribute("label")||i.getAttribute("value")||((t=i.textContent)===null||t===void 0?void 0:t.trim())||"";if(this.inputElement){this.inputElement.value=this.value}}}async resetFilter(){const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{t.style.display=""}));const e=this.el.querySelector("ul");if(e){const i=e.querySelector("[data-empty]");if(i)i.remove();const s=t.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const o=t.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));if(s.length>0){this.manageDivider(e,s,o)}}}async getSelectedValues(){return this.selectedValues}reorderSlotContent(){if(this.modeState==="options")return;const t=this.el.querySelector("ul");if(!t)return;t.querySelectorAll("hr.multiselect-divider").forEach((t=>t.remove()));const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>t.style.display!=="none"));const i=t.querySelector("[data-empty]");if(i){return}const s=e.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const o=e.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));s.forEach((e=>{t.appendChild(e)}));if(s.length>0&&o.length>0){const e=document.createElement("hr");e.className="multiselect-divider";t.appendChild(e)}o.forEach((e=>{t.appendChild(e)}))}reorderOptionsContent(){const t=this.el.querySelector('ul[role="content"]');if(!t)return;const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>t.style.display!=="none"));const i=e.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const s=e.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));i.forEach((e=>t.appendChild(e)));s.forEach((e=>t.appendChild(e)));this.manageDivider(t,i,s)}filterItems(){const t=this.el.querySelector("ul");if(!t)return;const e=t.querySelector("[data-empty]");if(e){e.remove()}if(!this.filterText.trim()){if(this.parsedOptions&&this.parsedOptions.length>0){const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((t=>{t.style.display=""}))}else{const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{t.style.display=""}))}const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck"));const i=e.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const s=e.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));this.manageDivider(t,i,s);return}const i=this.normalizeText(this.filterText);let s=false;if(this.parsedOptions&&this.parsedOptions.length>0){const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((t=>{const e=this.parsedOptions.find((e=>e.value===t.getAttribute("value")));if(e&&!e.isDivider){const o=this.normalizeText(e.label).includes(i)||this.normalizeText(e.value).includes(i);t.style.display=o?"":"none";if(o)s=true}}));const o=e.filter((t=>t.style.display!=="none"));const n=o.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const r=o.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));this.manageDivider(t,n,r)}else{const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{const e=t.getAttribute("label")||"";const o=t.getAttribute("value")||"";const n=t.textContent||"";const r=this.normalizeText(e).includes(i)||this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i);t.style.display=r?"":"none";if(r)s=true}))}if(!s){const e=document.createElement("li");e.setAttribute("data-empty","true");e.textContent=this.emptyResult;e.classList.add("no-results-message");t.appendChild(e)}this.reorderSlotContent()}filterItemsOption(){const t=this.el.querySelector("ul");if(!t)return;const e=this.normalizeText(this.filterText);let i=false;const s=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck"));if(!this.filterText.trim()){this.removeEmptyMessageOption(t);s.forEach((t=>t.style.display=""));this.reorderOptionsContent();return}s.forEach((t=>{const s=t.getAttribute("label")||"";const o=t.getAttribute("value")||"";const n=this.normalizeText(s).includes(e)||this.normalizeText(o).includes(e);t.style.display=n?"":"none";if(n)i=true}));const o=s.filter((t=>t.style.display!=="none"));const n=o.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));const r=o.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||"")));this.manageDivider(t,n,r);if(!i){this.addEmptyMessageOption(t)}else{this.removeEmptyMessageOption(t)}}filterSlotsItems(){if(this.modeState==="options")return;const t=this.el.querySelector("ul");if(!t)return;const e=t.querySelector("[data-empty]");if(e){e.remove()}if(!this.filterText.trim()){this.resetFilter();return}const i=this.normalizeText(this.filterText);let s=false;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));o.forEach((t=>{var e;const o=t.getAttribute("label")||"";const n=t.getAttribute("value")||"";const r=((e=t.textContent)===null||e===void 0?void 0:e.trim())||"";const l=this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i)||this.normalizeText(r).includes(i);t.style.display=l?"":"none";if(l)s=true}));const n=o.filter((t=>t.style.display!=="none"));const r=n.filter((t=>this.selectedValues.includes(t.getAttribute("value")||"")));this.manageDivider(t,r,n.filter((t=>!this.selectedValues.includes(t.getAttribute("value")||""))));if(!s){const e=document.createElement("li");e.setAttribute("data-empty","true");e.textContent=this.emptyResult;e.classList.add("no-results-message");t.appendChild(e)}}normalizeText(t){return t.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().trim()}handleClickOutside(t){if(this.el.contains(t.target)||this.inputElement&&this.inputElement.contains(t.target)){return}this.open=false}async handleKeyDown(t){if(!this.open){if(t.key==="ArrowDown"){this.open=true;if(!this.filterable){requestAnimationFrame((()=>{this.focusFirstItem()}))}t.preventDefault();return}return}const e=Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));if(e.length===0){console.warn("No visible items found to navigate");return}let i=e.findIndex((t=>t.classList.contains("highlighted")));if(t.key==="ArrowDown"){t.preventDefault();i=i===-1?0:(i+1)%e.length;this.updateHighlightedItem(e,i)}else if(t.key==="ArrowUp"){t.preventDefault();i=i===-1?e.length-1:(i-1+e.length)%e.length;this.updateHighlightedItem(e,i)}else if(t.key==="Enter"&&i>=0){t.preventDefault();const s=e[i];const o=s.hasAttribute("checked");s.checked=!o;s.dispatchEvent(new MouseEvent("click",{view:window,bubbles:true,cancelable:true}))}else if(t.key==="Escape"){t.preventDefault();t.stopPropagation();const e=async()=>{this.isHandlingEscape=true;if(this.modeState==="options"){this.reorderOptionsContent()}else{this.reorderSlotContent()}await new Promise((t=>setTimeout(t,100)));setTimeout((()=>{this.isHandlingEscape=false;this.open=false}),150);if(this.inputElement){this.inputElement.blur()}};await e()}}updateHighlightedItem(t,e){t.forEach(((t,i)=>{if(i===e){t.classList.add("highlighted");t.setAttribute("tabindex","0");t.scrollIntoView({block:"nearest"});const e=t.querySelector("nv-fieldcheckbox");if(e){e.focus()}}else{t.classList.remove("highlighted");t.setAttribute("tabindex","-1")}}))}focusFirstItem(){const t=this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');if(t){t.setAttribute("tabindex","0");t.classList.add("highlighted");t.scrollIntoView({block:"nearest"});const e=t.querySelector("nv-fieldcheckbox");if(e){e.focus()}}else{console.warn("No visible first item found to focus")}}addEmptyMessageOption(t){const e=t.querySelector("[data-empty]");if(e)return;const i=document.createElement("li");i.setAttribute("data-empty","true");i.textContent=this.emptyResult;i.classList.add("no-results-message");t.appendChild(i)}removeEmptyMessageOption(t){const e=t.querySelector("[data-empty]");if(e)e.remove()}manageDivider(t,e,i){let s=t.querySelector("hr.multiselect-divider");if(!s){s=document.createElement("hr");s.className="multiselect-divider";t.appendChild(s)}const o=e.length>0&&i.length>0;if(o){const t=e[e.length-1];t.after(s);s.style.display=""}else{s.style.display="none"}}renderDescriptions(){return[(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{class:"description"},i("slot",{name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{hidden:!this.error,class:"error-description"},i("slot",{name:"error-description"},this.errorDescription))]}render(){return this.modeState==="options"?this.renderOptionsMode():this.renderSlotsMode()}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{options:["handleOptionsChange"],value:["watchValueHandler"]}}};a.style=l;export{a as nv_fieldmultiselect};
-//# sourceMappingURL=p-d352a8b3.entry.js.map

package/dist/native/p-d352a8b3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldmultiselectCss","NvFieldmultiselectStyle0","NvFieldmultiselect","constructor","hostRef","this","inputId","uuidv4","maxHeight","badgeLabel","emptyResult","required","error","readonly","disabled","autocomplete","filterable","open","parsedOptions","selectedValues","sortedOptions","filterText","debounceDelay","modeState","isHandlingEscape","autofocus","handleBadgeCloseOptions","multiselectChange","emit","items","Array","from","el","querySelectorAll","forEach","item","checked","style","display","filter","option","isDivider","reorderOptionsContent","handleBadgeCloseSlots","reorderSlotContent","handlePopoverClose","resetFilter","handleInputBlurOptions","setTimeout","contains","document","activeElement","handleInputContainerClickOptions","event","target","tagName","inputContainer","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInputContainerClickSlots","handleInputOptions","input","value","valueChanged","debounceTimer","window","clearTimeout","toLowerCase","filterItemsOption","handleInputSlots","filterSlotsItems","handleInputFocusOptions","handleInputFocusSlots","handleInputBlurSlots","togglePopoverOptions","togglePopoverSlots","renderOptionsMode","h","Host","label","htmlFor","name","ref","triggerMode","placement","class","slot","length","color","dismissible","onCloseClicked","type","id","e","inputElement","placeholder","readOnly","onInput","onFocus","onBlur","onKeyDown","handleKeyDown","onClick","tabIndex","role","size","emphasis","toString","map","description","includes","renderDescriptions","renderSlotsMode","connectedCallback","handleClickOutside","bind","componentWillLoad","options","handleOptionsChange","Promise","resolve","then","hasAttribute","getAttribute","requestAnimationFrame","String","toLocaleLowerCase","filterItems","componentDidLoad","disconnectedCallback","removeEventListener","handleOpenChanged","detail","handleItemChecked","undefined","newSelectedValues","valueIndex","indexOf","push","splice","JSON","stringify","console","warn","newValue","parsedOpts","parse","isArray","watchValueHandler","setInitialSelection","handleSlotChange","getFilterText","selectedItem","find","_a","textContent","trim","removeAttribute","setAttribute","ul","emptyMessage","selectedItems","unselectedItems","manageDivider","getSelectedValues","divider","hasEmptyMessage","appendChild","createElement","className","existingEmptyMessage","normalizedFilter","normalizeText","hasVisibleItems","opt","matchesFilter","visibleItems","visibleSelected","visibleUnselected","removeEmptyMessageOption","addEmptyMessageOption","visibleSelectedItems","text","normalize","replace","key","focusFirstItem","preventDefault","currentIndex","findIndex","updateHighlightedItem","isCurrentlyChecked","dispatchEvent","MouseEvent","view","bubbles","cancelable","stopPropagation","handleEscape","async","blur","index","i","scrollIntoView","block","checkbox","focus","firstItem","existingMessage","shouldShowDivider","lastSelectedItem","after","errorDescription","hidden","render"],"sources":["src/components/nv-fieldmultiselect/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldmultiselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) {\n    > label {\n      @include form-field-label-required();\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper-multiselect {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container-multiselect {\n    @include form-field-input-container();\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n\n    > nv-badge {\n      margin-left: var(--form-field-padding-x);\n    }\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n    }\n\n    /* &:hover{\n      border-color: var(--components-form-field-border-hover);\n    }\n\n    &:focus-visible,\n    &:focus-within,\n    &:focus,\n    &.focus-within  {\n      border-color: var(--components-form-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.no-results-message {\n  text-align: center;\n  padding: 10px;\n  color: var(--components-form-text-description-error);\n}\n\n.multiselect-divider {\n  display: block;\n  width: 100%;\n  height: 1px;\n  background-color: var(--components-list-dropdown-separator);\n  margin: var(--list-dropdown-item-padding-y) 0;\n  border: 0;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - The content of the list.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldmultiselect',\n  styleUrl: 'nv-fieldmultiselect.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldmultiselect {\n  @Element() el: HTMLNvFieldmultiselectElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  /**\n   * Timer for debouncing input events.\n   * Private property preferred over @State as it:\n   * - Doesn't need to trigger re-renders\n   * - Is purely for internal logic\n   * - Improves performance by avoiding Stencil's reactivity system\n   */\n  private debounceTimer: number;\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   * 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   * 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 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.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the maximum height of the multiselect list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '200px';\n\n  /**\n   * Text for the badge showing the number of selected items.\n   */\n  @Prop({ reflect: true })\n  readonly badgeLabel: string = '';\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   * Marks the input field as required.\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 multiselect\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   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The autocomplete prop for faster input filling.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Enables or disables the filtering feature for the multiselect items.\n   */\n  @Prop({ reflect: true })\n  readonly filterable: boolean = false;\n\n  /**\n   * Specifies the value of the input field.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * State of the multiselect popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * List of options available in the multiselect.\n   * @description The options are passed as a JSON string.\n   * @example options='[{\"label\": \"Option 1\", \"value\": \"option1\"}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Options configuration for the multiselect items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }> = [];\n\n  /**\n   * List of selected values in the multiselect.\n   */\n  @State()\n  selectedValues: string[] = [];\n\n  /**\n   * Sorted options for display.\n   */\n  @State()\n  sortedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n  }> = [];\n\n  /**\n   * The text entered by the user for filtering multiselect items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Delay in milliseconds before the search is triggered when typing in the filter input.\n   * @default 300\n   */\n  @Prop({ reflect: true })\n  readonly debounceDelay: number = 300;\n\n  /**\n   * State for the mode of the multiselect.\n   * @type {'options' | 'slots'}\n   * @default 'options'\n   */\n  @State()\n  modeState: 'options' | 'slots' = 'options'; // Default value\n\n  @State()\n  private isHandlingEscape: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Set the mode state and handle options change.\n   */\n  componentWillLoad() {\n    this.modeState = this.options ? 'options' : 'slots';\n\n    // Don't call handleOptionsChange if we are in slots mode\n    if (this.modeState === 'options') {\n      this.handleOptionsChange(this.options);\n    }\n\n    // Specific initialization for slots mode\n    if (this.modeState === 'slots') {\n      Promise.resolve().then(() => {\n        const items = Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n\n        // Initialize selectedValues with checked items\n        this.selectedValues = items\n          .filter(item => item.hasAttribute('checked'))\n          .map(item => item.getAttribute('value') || '');\n\n        // Force a reorder after initialization\n        requestAnimationFrame(() => {\n          this.reorderSlotContent();\n        });\n      });\n    }\n\n    // Initialize the sorted options array with the parsed options for initial rendering\n    if (this.modeState === 'options') {\n      this.sortedOptions = [...this.parsedOptions];\n    }\n\n    // Apply filtering if the multiselect is filterable and there is a value\n    if (this.filterable && this.value) {\n      this.filterText = String(this.value).toLocaleLowerCase();\n      this.filterItems();\n    } else {\n      // Reset visibility state of all dropdown items\n      this.resetFilter();\n    }\n  }\n\n  /**\n   * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch\n   */\n  componentDidLoad() {\n    if (this.modeState === 'options') {\n      requestAnimationFrame(() => {\n        this.reorderOptionsContent();\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  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when the selection changes in the multiselect.\n   * Emits the current list of selected values.\n   */\n  @Event()\n  multiselectChange: EventEmitter<string[]>;\n\n  /**\n   * Emitted when the input loses focus.\n   * @param {CustomEvent<boolean>} event - The event object containing the focus state.\n   */\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Update the open state of popover\n    this.open = event.detail;\n\n    if (this.open) {\n      // Filter items only if there is filter text\n      if (this.filterText) {\n        this.filterItems();\n      }\n    } else {\n      this.handlePopoverClose();\n    }\n  }\n\n  /**\n   * Listen for the `itemChecked` event emitted by child items.\n   * @param {CustomEvent} event - The event object containing the selected value and its checked state.\n   */\n  @Listen('itemChecked')\n  handleItemChecked(\n    event: CustomEvent<{\n      /** Value associated with the option */\n      value: string;\n      /** Whether this option is checked */\n      checked: boolean;\n    }>,\n  ) {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const { value, checked } = event.detail;\n\n    if (value !== undefined && value !== null) {\n      const newSelectedValues = [...this.selectedValues];\n      const valueIndex = newSelectedValues.indexOf(value);\n\n      if (checked && valueIndex === -1) {\n        newSelectedValues.push(value);\n      } else if (!checked && valueIndex > -1) {\n        newSelectedValues.splice(valueIndex, 1);\n      }\n\n      // Update the state and emit the event only if the selection has changed\n      if (\n        JSON.stringify(this.selectedValues) !==\n        JSON.stringify(newSelectedValues)\n      ) {\n        this.selectedValues = newSelectedValues;\n\n        // Use requestAnimationFrame to ensure the state is updated before emitting the event\n        requestAnimationFrame(() => {\n          this.multiselectChange.emit(this.selectedValues);\n        });\n      }\n    } else {\n      console.warn('Received itemChecked event with undefined or null value'); // Warning log\n    }\n  }\n\n  /**\n   * Emitted when the options change.\n   * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.\n   */\n  @Watch('options')\n  handleOptionsChange(\n    newValue:\n      | string\n      | Array<{\n          /** Label to display for the option */\n          label: string;\n          /** Value associated with the option */\n          value: string;\n          /** Whether this option is a divider */\n          isDivider?: boolean;\n          /** Whether this option is disabled */\n          disabled?: boolean;\n          /** Additional description for the option */\n          description?: string;\n          /** Whether this option is pre-checked */\n          checked?: boolean;\n        }>,\n  ) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.selectedValues = parsedOpts\n          .filter(option => option.checked)\n          .map(option => option.value);\n        this.parsedOptions = [...parsedOpts];\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else if (Array.isArray(newValue)) {\n      this.selectedValues = newValue\n        .filter(option => option.checked)\n        .map(option => option.value);\n      this.parsedOptions = [...newValue];\n    } else {\n      this.parsedOptions = [];\n    }\n\n    // Wait for the options to be fully loaded\n    Promise.resolve().then(() => {\n      requestAnimationFrame(() => {\n        if (this.modeState === 'options') {\n          this.reorderOptionsContent();\n        }\n      });\n    });\n  }\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Watch('value')\n  watchValueHandler() {\n    // Handle value change and update the corresponding multiselect item if it exists\n    this.setInitialSelection();\n  }\n\n  // Add a listener for the slot content\n  @Listen('slotchange')\n  handleSlotChange(event: Event) {\n    // Check: we only want to reorder if it's the \"content\" slot\n    const slot = event.target as HTMLSlotElement;\n    if (slot && slot.name === 'content') {\n      // To give other platforms (VueJS, React, etc.) time to insert all their items,\n      // we place the reorder in a requestAnimationFrame\n      requestAnimationFrame(() => {\n        this.reorderSlotContent();\n      });\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\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   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));\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   * Reset the filter and make all items visible.\n   */\n  @Method()\n  async resetFilter(): Promise<void> {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Reset visibility state of all dropdown items\n    items.forEach(item => {\n      item.style.display = '';\n    });\n\n    // Clean up filter-related UI elements\n    const ul = this.el.querySelector('ul');\n    if (ul) {\n      const emptyMessage = ul.querySelector('[data-empty]');\n      if (emptyMessage) emptyMessage.remove();\n\n      // Reorder with divider if needed\n      const selectedItems = items.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n\n      if (selectedItems.length > 0) {\n        this.manageDivider(ul as HTMLElement, selectedItems, unselectedItems);\n      }\n    }\n  }\n\n  /**\n   * Returns the list of selected values.\n   * @returns {string[]} The selected values.\n   */\n  @Method()\n  async getSelectedValues(): Promise<string[]> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Reorder the content of the slot.\n   */\n  private reorderSlotContent() {\n    if (this.modeState === 'options') return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove all existing <hr class=\"multiselect-divider\">\n    ul.querySelectorAll('hr.multiselect-divider').forEach(divider =>\n      divider.remove(),\n    );\n\n    // Retrieve all items (not hidden)\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    // If you possibly have a \"No results\" message:\n    const hasEmptyMessage = ul.querySelector('[data-empty]');\n    if (hasEmptyMessage) {\n      // if there is a \"No results found\" message, do not reorder\n      return;\n    }\n\n    // Separate checked vs unchecked\n    const selectedItems = items.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reinsert CHECKED items FIRST\n    // appendChild() moves the element without recreating it\n    // this is not trigger a re-rendering of the component in the platforms\n    selectedItems.forEach(item => {\n      ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just \"moved\" to the end of the list\n    });\n\n    // Add a divider if needed\n    if (selectedItems.length > 0 && unselectedItems.length > 0) {\n      const divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    // Reinsert UNCHECKED items at the end\n    unselectedItems.forEach(item => {\n      ul.appendChild(item);\n    });\n  }\n\n  /**\n   * Reorder the content for options mode with async handling\n   */\n  private reorderOptionsContent() {\n    const ul = this.el.querySelector('ul[role=\"content\"]') as HTMLElement;\n    if (!ul) return;\n\n    const items = Array.from(\n      ul.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    const selectedItems = items.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reorder the elements\n    selectedItems.forEach(item => ul.appendChild(item));\n    unselectedItems.forEach(item => ul.appendChild(item));\n\n    // Manage the divider after the reordering\n    this.manageDivider(ul, selectedItems, unselectedItems);\n  }\n\n  /**\n   * Filter multiselect items based on the text entered by the user.\n   */\n  private filterItems() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    if (!this.filterText.trim()) {\n      if (this.parsedOptions && this.parsedOptions.length > 0) {\n        // Reset options display\n        const items = Array.from(\n          ul.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      } else {\n        // Reset slot items display\n        const items = Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      }\n\n      // Reorder with divider\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n      const selectedItems = items.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, selectedItems, unselectedItems);\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    if (this.parsedOptions && this.parsedOptions.length > 0) {\n      // Filter options mode\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const option = this.parsedOptions.find(\n          opt => opt.value === item.getAttribute('value'),\n        );\n        if (option && !option.isDivider) {\n          const matchesFilter =\n            this.normalizeText(option.label).includes(normalizedFilter) ||\n            this.normalizeText(option.value).includes(normalizedFilter);\n\n          item.style.display = matchesFilter ? '' : 'none';\n          if (matchesFilter) hasVisibleItems = true;\n        }\n      });\n\n      // Manage the divider with the visible items\n      const visibleItems = items.filter(item => item.style.display !== 'none');\n      const visibleSelected = visibleItems.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const visibleUnselected = visibleItems.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, visibleSelected, visibleUnselected);\n    } else {\n      // Filter slot items mode\n      const items = Array.from(\n        this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const label = item.getAttribute('label') || '';\n        const value = item.getAttribute('value') || '';\n        const textContent = item.textContent || '';\n\n        const matchesFilter =\n          this.normalizeText(label).includes(normalizedFilter) ||\n          this.normalizeText(value).includes(normalizedFilter) ||\n          this.normalizeText(textContent).includes(normalizedFilter);\n\n        item.style.display = matchesFilter ? '' : 'none';\n        if (matchesFilter) hasVisibleItems = true;\n      });\n    }\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyResult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n\n    this.reorderSlotContent();\n  }\n\n  /**\n   * Filter multiselect items in options mode.\n   */\n  private filterItemsOption() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));\n\n    // Reset items if the filter text is empty\n    if (!this.filterText.trim()) {\n      // Remove the empty message if it exists\n      this.removeEmptyMessageOption(ul);\n      items.forEach(item => (item.style.display = ''));\n      this.reorderOptionsContent(); // Reorder after reset\n      return;\n    }\n\n    // Filter the items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Manage the divider with the visible items\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelected = visibleItems.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const visibleUnselected = visibleItems.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(ul, visibleSelected, visibleUnselected);\n\n    // Add or remove the empty message based on the case\n    if (!hasVisibleItems) {\n      this.addEmptyMessageOption(ul);\n    } else {\n      this.removeEmptyMessageOption(ul);\n    }\n  }\n\n  /**\n   * Filter multiselect items in slots mode\n   */\n  private filterSlotsItems() {\n    if (this.modeState === 'options') return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    // If filter text is empty, reset all items visibility\n    if (!this.filterText.trim()) {\n      this.resetFilter();\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    // Get all items and preserve them in the DOM\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Instead of removing/reordering, just hide/show items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n      const textContent = item.textContent?.trim() || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter) ||\n        this.normalizeText(textContent).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Get visible items after filtering\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelectedItems = visibleItems.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(\n      ul,\n      visibleSelectedItems,\n      visibleItems.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      ),\n    );\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyResult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n  }\n\n  /**\n   * Handle badge close for options mode.\n   */\n  private handleBadgeCloseOptions = (): void => {\n    this.selectedValues = [];\n    this.multiselectChange.emit(this.selectedValues);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Reorder options without the divider since there are no selected elements\n    this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);\n\n    // Reorder options without the divider since there are no selected elements\n    this.reorderOptionsContent();\n  };\n\n  /**\n   * Handle badge close for slots mode.\n   */\n  private handleBadgeCloseSlots = (): void => {\n    this.selectedValues = [];\n    this.multiselectChange.emit(this.selectedValues);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Reorder slot content\n    this.reorderSlotContent();\n  };\n\n  /**\n   * Normalizes text by removing accents and converting to lowercase\n   * @param {string} text - The text to normalize\n   * @returns {string} The normalized text\n   *\n   * @example\n   * normalizeText(\"Café Latte\") => \"cafe latte\"\n   *\n   * @description\n   * This function performs text normalization in three steps:\n   * 1. Decomposes characters into their base form and combining characters (NFD)\n   * 2. Removes all diacritical marks (accents, umlauts, etc.)\n   * 3. Converts to lowercase and trims whitespace\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()\n   * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms\n   */\n  private normalizeText(text: string): string {\n    return text\n      .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)\n      .replace(/[\\u0300-\\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)\n      .toLowerCase() // Convert to lowercase\n      .trim(); // Remove leading and trailing whitespace\n  }\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.open = false;\n  }\n\n  /**\n   * Handle popover close\n   */\n  private handlePopoverClose = () => {\n    // If we are handling Escape, ignore this event\n    if (this.isHandlingEscape) {\n      return;\n    }\n\n    this.filterText = '';\n\n    // Only reorder based on the mode\n    if (this.modeState === 'options') {\n      this.reorderOptionsContent();\n    } else {\n      this.reorderSlotContent();\n    }\n\n    // Reset filter if needed\n    if (this.filterable) {\n      this.resetFilter();\n    }\n  };\n\n  /**\n   * Handle input blur for options mode.\n   */\n  private handleInputBlurOptions = () => {\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n\n        // Reset filter if needed\n        if (this.filterable) {\n          this.filterText = '';\n          this.resetFilter();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle keyboard events & arrow key navigation.\n   * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.\n   * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.\n   * @param {KeyboardEvent} event - The keyboard event.\n   */\n  @Listen('keydown', { passive: false })\n  async handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        // Focus on the first item if the list is not filterable\n        if (!this.filterable) {\n          requestAnimationFrame(() => {\n            this.focusFirstItem();\n          });\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n      ),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    if (items.length === 0) {\n      console.warn('No visible 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 =\n        currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex =\n        currentIndex === -1\n          ? items.length - 1\n          : (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      const selectedItem = items[currentIndex];\n\n      // Toggle the checked state\n      const isCurrentlyChecked = selectedItem.hasAttribute('checked');\n      selectedItem.checked = !isCurrentlyChecked;\n\n      // Trigger a click event to ensure proper event handling\n      selectedItem.dispatchEvent(\n        new MouseEvent('click', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        }),\n      );\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation(); // Prevent the event from propagating to the popover\n\n      // Do the reorder and wait a bit before closing\n      const handleEscape = async () => {\n        this.isHandlingEscape = true; // Disable the hide listener\n\n        if (this.modeState === 'options') {\n          this.reorderOptionsContent();\n        } else {\n          this.reorderSlotContent();\n        }\n\n        // Wait for the reorder to be applied\n        await new Promise(resolve => setTimeout(resolve, 100));\n\n        // Reactivate the hide listener after a short delay\n        setTimeout(() => {\n          this.isHandlingEscape = false;\n          this.open = false;\n        }, 150);\n\n        if (this.inputElement) {\n          this.inputElement.blur();\n        }\n      };\n\n      await handleEscape();\n    }\n  }\n\n  /**\n   * Updates the highlighted item in the dropdown list.\n   *\n   * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.\n   * @param {number} index - The index of the item to highlight.\n   */\n  private updateHighlightedItem(\n    items: (\n      | HTMLNvFielddropdownitemElement\n      | HTMLNvFielddropdownitemcheckElement\n    )[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        item.scrollIntoView({ block: 'nearest' });\n        // Focus on the nv-fieldcheckbox inside\n        const checkbox = item.querySelector('nv-fieldcheckbox');\n        if (checkbox) {\n          (checkbox as HTMLElement).focus();\n        }\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  /**\n   * Focus on the first item in the dropdown list.\n   */\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n    ) as HTMLNvFielddropdownitemcheckElement;\n\n    if (firstItem) {\n      firstItem.setAttribute('tabindex', '0');\n      firstItem.classList.add('highlighted');\n      firstItem.scrollIntoView({ block: 'nearest' });\n      // Focus on the nv-fieldcheckbox inside\n      const checkbox = firstItem.querySelector('nv-fieldcheckbox');\n      if (checkbox) {\n        (checkbox as HTMLElement).focus();\n      }\n    } else {\n      console.warn('No visible first item found to focus');\n    }\n  }\n\n  /**\n   * Handle click on the input container for options mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickOptions = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle click on the input container for slots mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickSlots = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change for options mode.\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputOptions = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(this.value);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterItemsOption();\n    }, this.debounceDelay);\n  };\n\n  private addEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) return;\n\n    const emptyMessage = document.createElement('li');\n    emptyMessage.setAttribute('data-empty', 'true');\n    emptyMessage.textContent = this.emptyResult;\n    emptyMessage.classList.add('no-results-message');\n    ul.appendChild(emptyMessage);\n  }\n\n  private removeEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) existingMessage.remove();\n  }\n\n  /**\n   * Handle input change for slots mode\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputSlots = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) return;\n\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(this.value);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterSlotsItems();\n    }, this.debounceDelay);\n  };\n\n  /**\n   * Handle input focus for options mode.\n   */\n  private handleInputFocusOptions = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input focus for slots mode.\n   */\n  private handleInputFocusSlots = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input blur for slots mode.\n   */\n  private handleInputBlurSlots = () => {\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n\n        // Reset filter if needed\n        if (this.filterable) {\n          this.filterText = '';\n          this.resetFilter();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the multiselect popover for options mode.\n   */\n  private togglePopoverOptions = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.open = !this.open;\n  };\n\n  /**\n   * Toggle the multiselect popover for slots mode.\n   */\n  private togglePopoverSlots = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.open = !this.open;\n  };\n\n  private manageDivider(\n    ul: HTMLElement,\n    selectedItems: Element[],\n    unselectedItems: Element[],\n  ) {\n    let divider = ul.querySelector('hr.multiselect-divider') as HTMLElement;\n    if (!divider) {\n      divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    const shouldShowDivider =\n      selectedItems.length > 0 && unselectedItems.length > 0;\n\n    if (shouldShowDivider) {\n      // Place the divider after the last selected item\n      const lastSelectedItem = selectedItems[selectedItems.length - 1];\n      lastSelectedItem.after(divider);\n      divider.style.display = '';\n    } else {\n      divider.style.display = 'none';\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Renders the component in options mode\n   * @returns {any} The JSX for options mode\n   */\n  private renderOptionsMode = () => {\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)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container-multiselect\">\n              <slot name=\"leading-input\"></slot>\n\n              {this.selectedValues.length > 0 && (\n                <nv-badge\n                  slot=\"leading-input\"\n                  prevent-auto-close\n                  color=\"10\"\n                  dismissible={this.selectedValues.length > 0}\n                  label={`${this.selectedValues.length} ${this.badgeLabel}`}\n                  aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n                  onCloseClicked={this.handleBadgeCloseOptions}\n                ></nv-badge>\n              )}\n\n              {this.filterable || this.disabled || this.readonly ? (\n                <input\n                  type=\"text\"\n                  id={this.inputId}\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\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.handleInputOptions}\n                  onFocus={this.handleInputFocusOptions}\n                  onBlur={this.handleInputBlurOptions}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClickOptions}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocusOptions}\n                  role=\"combobox\"\n                  aria-expanded={this.open}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\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.togglePopoverOptions}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            slot=\"content\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n          >\n            <ul role=\"content\">\n              {this.parsedOptions.map(option => (\n                <nv-fielddropdownitemcheck\n                  label={option.label}\n                  description={option.description}\n                  value={option.value}\n                  checked={this.selectedValues.includes(option.value)}\n                  disabled={option.disabled}\n                ></nv-fielddropdownitemcheck>\n              ))}\n              <hr class=\"multiselect-divider\" style={{ display: 'none' }} />\n            </ul>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  };\n\n  /**\n   * Renders the component in slots mode\n   * @returns {any} The JSX for slots mode\n   */\n  private renderSlotsMode = () => {\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)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container-multiselect\"\n              onClick={this.handleInputContainerClickSlots}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.selectedValues.length > 0 && (\n                <nv-badge\n                  slot=\"leading-input\"\n                  prevent-auto-close\n                  color=\"10\"\n                  dismissible={this.selectedValues.length > 0}\n                  label={`${this.selectedValues.length} ${this.badgeLabel}`}\n                  aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n                  onCloseClicked={this.handleBadgeCloseSlots}\n                ></nv-badge>\n              )}\n\n              {this.filterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\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.handleInputSlots}\n                  onFocus={this.handleInputFocusSlots}\n                  onBlur={this.handleInputBlurSlots}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClickSlots}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocusSlots}\n                  role=\"combobox\"\n                  aria-expanded={this.open}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\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.togglePopoverSlots}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            slot=\"content\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n          >\n            <slot name=\"content\"></slot>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  };\n\n  /**\n   * Renders description and error description sections\n   * @returns {any} The JSX for descriptions\n   */\n  private renderDescriptions() {\n    return [\n      (this.description || this.el.querySelector('[slot=\"description\"]')) && (\n        <div class=\"description\">\n          <slot name=\"description\">{this.description}</slot>\n        </div>\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    ];\n  }\n\n  /**\n   * Main render method that decides which mode to render\n   * @returns {any} The JSX for the component\n   */\n  render() {\n    return this.modeState === 'options'\n      ? this.renderOptionsMode()\n      : this.renderSlotsMode();\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-e200185a.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as n,a as i,g as o}from"./p-ab002252.js";const r="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;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);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";const s=r;const a=class{constructor(n){e(this,n);this.menuitemSelected=t(this,"menuitemSelected",7);this.isHandlingKeyDown=false;this.open=false;this.nested=false;this.disableCloseOnSelect=false;this.placement="bottom-end";this.parsedItems=[]}handleItemsChange(e){if(typeof e==="string"){try{this.parsedItems=JSON.parse(e)}catch(e){console.error("Error parsing menu items:",e);this.parsedItems=[]}}}async show(){this.open=true}async close(){this.open=false}handleMenuItemSelect(e){if(this.disableCloseOnSelect)return;if(e.detail.hasSubmenu)return;this.open=false}handleKeydown(e){if(!this.open){if((e.key==="Enter"||e.key==="ArrowDown"||e.key===" ")&&document.activeElement===this.triggerElement){e.preventDefault();this.show();const t=this.popoverElement.querySelector("nv-menuitem");if(t){requestAnimationFrame((()=>t.focus()))}}return}if(this.isHandlingKeyDown)return;this.isHandlingKeyDown=true;if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="ArrowLeft"||e.key==="ArrowRight"||e.key==="Escape"){e.preventDefault()}if(e.key==="Escape"&&!this.nested){this.close();this.triggerElement.focus();this.isHandlingKeyDown=false;return}const t=this.el.querySelector('[slot="content"]');const n=Array.from(t.childNodes).filter((e=>{var t;return(t=e.matches)===null||t===void 0?void 0:t.call(e,"nv-menuitem, nv-menu")}));let i=n.indexOf(document.activeElement);if(i===-1)i=n.indexOf(document.activeElement.parentElement);if(i===-1&&n.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){n.forEach((e=>{if(e.matches("nv-menu"))e.close()}))}if(e.key==="ArrowDown"){let e=(i+1)%n.length;while(n[e].matches("nv-menuitem[disabled]")){e=(e+1)%n.length}const t=n[e];if(t.matches("nv-menuitem")){t.focus()}else if(t.matches("nv-menu")){t.querySelector("nv-menuitem").focus()}}if(e.key==="ArrowUp"){let e=(i-1+n.length)%n.length;while(n[e].matches("nv-menuitem[disabled]")){e=(e-1+n.length)%n.length}const t=n[e];if(t.matches("nv-menuitem")){t.focus()}else if(t.matches("nv-menu")){t.querySelector("nv-menuitem").focus()}}if(e.key==="ArrowRight"){const e=n[i];if(!e.matches("nv-menu")){this.isHandlingKeyDown=false;return}e.show()}if(e.key==="ArrowLeft"&&this.nested){if(n.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}this.close();this.triggerElement.focus()}this.isHandlingKeyDown=false}handleOpenChanged(e){if(e.target===this.el.querySelector("nv-popover")){this.open=e.detail}const t=this.triggerElement===document.activeElement;const n=this.triggerElement.matches(":focus-visible");if(t&&n)this.focusFirstItem()}focusFirstItem(){const e=this.popoverElement.querySelector("nv-menuitem");if(e){requestAnimationFrame((()=>e.focus()))}}componentWillLoad(){this.triggerElement=Array.from(this.el.children).find((e=>e.getAttribute("slot")==="trigger"));if(this.items){this.handleItemsChange(this.items)}}renderMenuItems(e){return e.map((e=>{var t;if(e.hasSubmenu&&((t=e.submenuItems)===null||t===void 0?void 0:t.length)>0){return n("nv-menu",{nested:true,placement:"right-start",items:JSON.stringify(e.submenuItems)},n("nv-menuitem",{slot:"trigger","has-submenu":true,disabled:e.disabled,icon:e.icon,shortcut:e.shortcut,id:e.value,name:e.label,label:e.label}))}return n("nv-menuitem",{disabled:e.disabled,icon:e.icon,shortcut:e.shortcut,id:e.value,name:e.label,label:e.label})}))}render(){return n(i,{key:"8334eee36cadee43d5d78d227841b43da86a46c6"},n("slot",{key:"a4f260a9161dc239eabfc9c43178b1394721f37d",name:"trigger"}),n("nv-popover",{key:"6f163bc5c02afba3af1e9bb43cf3b6bfec1e9374",ref:e=>this.popoverElement=e,triggerMode:"click",triggerElement:this.triggerElement,placement:this.placement,nested:this.nested,open:this.open},this.parsedItems.length>0?n("ul",{slot:"content"},this.renderMenuItems(this.parsedItems)):n("slot",{name:"content"})))}get el(){return o(this)}static get watchers(){return{items:["handleItemsChange"]}}};a.style=s;export{a as nv_menu};
-//# sourceMappingURL=p-e200185a.entry.js.map

package/dist/native/p-e200185a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvMenuCss","NvMenuStyle0","NvMenu","constructor","hostRef","this","isHandlingKeyDown","open","nested","disableCloseOnSelect","placement","parsedItems","handleItemsChange","newValue","JSON","parse","error","console","show","close","handleMenuItemSelect","event","detail","hasSubmenu","handleKeydown","key","document","activeElement","triggerElement","preventDefault","firstMenuItem","popoverElement","querySelector","requestAnimationFrame","focus","menuContent","el","menuItems","Array","from","childNodes","filter","item","_a","matches","call","currentIndex","indexOf","parentElement","find","forEach","nextIndex","length","nextFocusable","prevIndex","prevFocusable","submenu","handleOpenChanged","target","triggerHasFocus","triggerHasFocusVisible","focusFirstItem","firstButton","componentWillLoad","children","child","getAttribute","items","renderMenuItems","map","submenuItems","h","stringify","slot","disabled","icon","shortcut","id","value","name","label","render","Host","ref","triggerMode"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)\n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)\n          var(--menu-contextual-divider-padding-x)\n          var(--menu-contextual-divider-padding-bottom)\n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n\n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * Interface to define the structure of a menu item\n */\ninterface MenuItem {\n  /**\n   * The label of the menu item.\n   */\n  label: string;\n  /**\n   * The value of the menu item.\n   */\n  value?: string;\n  /**\n   * Whether the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the menu item has a submenu.\n   */\n  hasSubmenu?: boolean;\n  /**\n   * The icon of the menu item.\n   */\n  icon?: string;\n  /**\n   * The shortcut of the menu item.\n   */\n  shortcut?: string;\n  /**\n   * Whether the menu item is nested.\n   */\n  nested?: boolean;\n  /**\n   * The submenu items of the menu item.\n   */\n  submenuItems?: MenuItem[];\n}\n\n/**\n * @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n */\n@Component({\n  tag: 'nv-menu',\n  styleUrl: 'nv-menu.scss',\n  shadow: false,\n})\nexport class NvMenu {\n  @Element() el: HTMLNvMenuElement;\n  private triggerElement!: HTMLElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private isHandlingKeyDown: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this to toggle the initial visibility of the menu, by default the menu\n   * is hidden.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Use this if the menu is nested inside another menu. This will prevent the\n   * parent menu from closing when the child menu is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  /**\n   * Use this to disable the menu from closing automatically when a menu item is\n   * selected.\n   */\n  @Prop({ reflect: true })\n  readonly disableCloseOnSelect: boolean = false;\n\n  /**\n   * Decides where the menu shows up next to the button it's linked to (above,\n   * below, to the sides). If there isn't enough room, it will adjust its\n   * position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom-end';\n\n  /**\n   * (New feature) Items to display in the menu, provided as a JSON string.\n   * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: string;\n\n  /**\n   * Parsed items stored in state.\n   */\n  @State()\n  private parsedItems: MenuItem[] = [];\n\n  /**\n   * Watcher to parse the items when the `items` property changes.\n   * @param {string} newValue - The new value of the `items` property.\n   */\n  @Watch('items')\n  handleItemsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        this.parsedItems = JSON.parse(newValue);\n      } catch (error) {\n        console.error('Error parsing menu items:', error);\n        this.parsedItems = [];\n      }\n    }\n  }\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted from nv-menuitem elements with the corresponding id and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(\n    event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n  ) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    // If the menu is not open, check if the trigger is focused\n    // and the user presses Enter or ArrowDown, open the menu\n    if (!this.open) {\n      if (\n        (event.key === 'Enter' ||\n          event.key === 'ArrowDown' ||\n          event.key === ' ') &&\n        document.activeElement === this.triggerElement\n      ) {\n        event.preventDefault();\n        this.show();\n        // Then, put the focus on the first menuitem\n        const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n        if (firstMenuItem) {\n          requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n        }\n      }\n      return;\n    }\n\n    if (this.isHandlingKeyDown) return;\n    this.isHandlingKeyDown = true;\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'Escape'\n    ) {\n      event.preventDefault();\n    }\n\n    if (event.key === 'Escape' && !this.nested) {\n      this.close();\n      this.triggerElement.focus();\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    const menuContent = this.el.querySelector('[slot=\"content\"]');\n    const menuItems = (\n      Array.from(menuContent.childNodes) as Array<\n        HTMLNvMenuitemElement | HTMLNvMenuElement\n      >\n    ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n    let currentIndex = menuItems.indexOf(\n      document.activeElement as HTMLNvMenuitemElement,\n    );\n    if (currentIndex === -1)\n      currentIndex = menuItems.indexOf(\n        document.activeElement.parentElement as HTMLNvMenuitemElement,\n      );\n    if (\n      currentIndex === -1 &&\n      menuItems.find(item => item.matches('nv-menu[open]'))\n    ) {\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      menuItems.forEach(item => {\n        if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n      });\n    }\n\n    if (event.key === 'ArrowDown') {\n      let nextIndex = (currentIndex + 1) % menuItems.length;\n      while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n        nextIndex = (nextIndex + 1) % menuItems.length;\n      }\n      const nextFocusable = menuItems[nextIndex];\n      if (nextFocusable.matches('nv-menuitem')) {\n        nextFocusable.focus();\n      } else if (nextFocusable.matches('nv-menu')) {\n        nextFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowUp') {\n      let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n      while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n        prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n      }\n      const prevFocusable = menuItems[prevIndex];\n      if (prevFocusable.matches('nv-menuitem')) {\n        prevFocusable.focus();\n      } else if (prevFocusable.matches('nv-menu')) {\n        prevFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      const submenu = menuItems[currentIndex];\n      if (!submenu.matches('nv-menu')) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      (submenu as HTMLNvMenuElement).show();\n    }\n\n    if (event.key === 'ArrowLeft' && this.nested) {\n      if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      this.close();\n      this.triggerElement.focus();\n    }\n\n    this.isHandlingKeyDown = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (event.target === this.el.querySelector('nv-popover')) {\n      this.open = event.detail;\n    }\n    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\n    if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n  }\n\n  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n\n    // If the items attribute is provided, parse its value.\n    if (this.items) {\n      this.handleItemsChange(this.items);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Generates menu items from the `items` property.\n   * @param {MenuItem[]} items - The items to display in the menu.\n   * @returns {HTMLElement[]} The rendered items.\n   */\n  private renderMenuItems(items: MenuItem[]) {\n    return items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu\n            nested\n            placement=\"right-start\"\n            items={JSON.stringify(item.submenuItems)}\n          >\n            <nv-menuitem\n              slot=\"trigger\"\n              has-submenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n              label={item.label}\n            ></nv-menuitem>\n          </nv-menu>\n        );\n      }\n      return (\n        <nv-menuitem\n          disabled={item.disabled}\n          icon={item.icon as IconName}\n          shortcut={item.shortcut}\n          id={item.value}\n          name={item.label}\n          label={item.label}\n        ></nv-menuitem>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"click\"\n          triggerElement={this.triggerElement}\n          placement={this.placement}\n          nested={this.nested}\n          open={this.open}\n        >\n          {this.parsedItems.length > 0 ? (\n            <ul slot=\"content\">{this.renderMenuItems(this.parsedItems)}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/nv-base/nv-base.d.ts

@@ -1,17 +0,0 @@
-/**
- * @slot default - render children
- * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
- */
-export declare class NvBaseComponent {
-    el: HTMLNvBaseElement;
-    private mutationObserver;
-    /****************************************************************************/
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    /****************************************************************************/
-    private applyClassesOnInitialRender;
-    private observeElements;
-    /****************************************************************************/
-    render(): any;
-}

package/dist/types/components/nv-base/nv-base.docs.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    component: "nv-base";
-    skip: true;
-};
-export default _default;