@ngxviewbuilder/runtime 0.12.0 → 0.12.1

package/fesm2022/ngxviewbuilder-runtime-multi-select-element-kVcNNhEt.mjs

@@ -1 +0,0 @@
-import{t as V}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as _,d as M,g as E,in as y,n as k,on as A,t as O,yt as z}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{a as P,dt as $,ft as N,ht as H,i as h,nt as B,r as W,rt as F,t as T}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import{t as G}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as C}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as q,Component as R,HostListener as g,ViewChild as f,computed as l,inject as c,input as j,signal as s}from"@angular/core";import*as U from"@angular/common";import{CommonModule as D,DOCUMENT as K}from"@angular/common";import{FormsModule as L}from"@angular/forms";var Y=V({MultiSelectElement:()=>x});var x=class w{dropdownTemplateScopeId=`nvb-multi-select-template-${Math.random().toString(36).slice(2,11)}`;dropdownOptionsId=`nvb-multi-select-options-${Math.random().toString(36).slice(2,11)}`;dropdownTemplateScopeSelector=`[data-nvb-template-scope="${this.dropdownTemplateScopeId}"]`;model=j.required(...ngDevMode?[{debugName:"model"}]:[]);tid=W(this.model,"nvb-multi-select","multi-select");dropdownContainer;selectButton;dropdownPanel;isOpen=s(false,...ngDevMode?[{debugName:"isOpen"}]:[]);searchTerm=s("",...ngDevMode?[{debugName:"searchTerm"}]:[]);selectedValues=s([],...ngDevMode?[{debugName:"selectedValues"}]:[]);dataSourceLoaded=s(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=s(y.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);dropdownPosition=s("bottom",...ngDevMode?[{debugName:"dropdownPosition"}]:[]);dropdownMaxHeight=s(300,...ngDevMode?[{debugName:"dropdownMaxHeight"}]:[]);dropdownLeft=s(0,...ngDevMode?[{debugName:"dropdownLeft"}]:[]);dropdownTop=s(0,...ngDevMode?[{debugName:"dropdownTop"}]:[]);dropdownMinWidth=s(0,...ngDevMode?[{debugName:"dropdownMinWidth"}]:[]);useCompactStyle=s(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);dataVersion=s(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);documentRef=c(K);dataService=c(_);eventService=c(E);expressionService=c(M);elementActionService=c(F);templateEngineService=c(B);markupSecurityService=c(H);validatorService=c($);dropdownCoordinatorService=c(G);uiTranslationService=c(A);dropdownId=`multi-select-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;defaultDropdownHeight=300;minDropdownHeight=96;dropdownVerticalGap=4;dropdownBoundaryPadding=8;dropdownLayoutFrame=null;normalizedOptionTemplate=l(()=>this.normalizeOptionTemplate(this.templateEngineService.resolveTemplateContentByName(String(this.model().optionTemplateName??"").trim(),String(this.model().optionTemplate??"").trim())),...ngDevMode?[{debugName:"normalizedOptionTemplate"}]:[]);visibleOptions=l(()=>{this.dataVersion();return this.filterOptionsByVisibility(this.model().options||[])},...ngDevMode?[{debugName:"visibleOptions"}]:[]);usesGroupedOptions=l(()=>this.hasGroupedOptions(this.model().options||[]),...ngDevMode?[{debugName:"usesGroupedOptions"}]:[]);filteredOptions=l(()=>{const t=this.visibleOptions();const e=this.searchTerm().toLowerCase();if(!e)return t;if(this.usesGroupedOptions())return t.map(n=>({...n,items:n.items.filter(o=>o.label.toLowerCase().includes(e))})).filter(n=>n.items.length>0);return t.filter(n=>n.label.toLowerCase().includes(e))},...ngDevMode?[{debugName:"filteredOptions"}]:[]);hasCustomTemplate=l(()=>this.normalizedOptionTemplate()!==null,...ngDevMode?[{debugName:"hasCustomTemplate"}]:[]);customDropdownState=l(()=>{if(!this.hasCustomTemplate())return{html:null,error:null};const t=this.normalizedOptionTemplate();if(!t)return{html:null,error:null};const e=this.flattenCurrentOptions();if(e.length===0)return{html:`<div class="nvb-no-results">${this.uiTranslationService.translate("multiSelect.empty","No results found")}</div>`,error:null};try{const n=this.shouldRenderCollectionTemplate(t);let o=n?this.renderCollectionTemplate(t,e,this.selectedValues()):this.renderTemplate(t,e,this.selectedValues());if(n&&(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)))o=this.renderTemplate(t,e,this.selectedValues());o=this.sanitizeCustomDropdownHtml(o);o=this.hydrateSelectableOptionMarkup(o,e,this.selectedValues());if(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)||!this.hasMeaningfulOptionContent(o))o=this.renderDefaultDropdownHtml(e,this.selectedValues());return{html:o,error:null}}catch(n){const o=n instanceof Error?n.message:this.uiTranslationService.translate("multiSelect.templateError","Template render error");return{html:`<div class="nvb-no-results">${this.templateEngineService.escapeHtml(o)}</div>`,error:o}}},...ngDevMode?[{debugName:"customDropdownState"}]:[]);templateError=l(()=>this.customDropdownState().error,...ngDevMode?[{debugName:"templateError"}]:[]);customDropdownHtml=l(()=>this.customDropdownState().html,...ngDevMode?[{debugName:"customDropdownHtml"}]:[]);customDropdownCss=l(()=>{const t=this.normalizedOptionTemplate();if(!t)return"";return this.templateEngineService.resolveTemplateCss(t,this.dropdownTemplateScopeSelector)},...ngDevMode?[{debugName:"customDropdownCss"}]:[]);hasValue=l(()=>this.selectedValues().length>0,...ngDevMode?[{debugName:"hasValue"}]:[]);displayValue=l(()=>{const t=this.selectedValues();if(t.length===0)return this.uiTranslationService.translate("multiSelect.placeholder","Select...");const e=this.flattenAllOptions().filter(o=>t.some(r=>this.isSameValue(r,o.value))).map(o=>o.label);if(e.length<=2)return e.join(", ");const n=e.length-2;return`${e.slice(0,2).join(", ")} +${n}`},...ngDevMode?[{debugName:"displayValue"}]:[]);dataSourceLoading=l(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(t=>t+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(t=>t+1)};ngOnInit(){const t=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(t);if(this.model().dataSource)this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(y.isEditor());if(Array.isArray(this.model().value))this.selectedValues.set([...this.model().value]);if(this.model()?.parentElement&&this.model()?.parentElement instanceof z)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(e===this.dropdownId)return;this.closeDropdown()})}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId)}toggleDropdown(){if(this.isInteractionLocked()){this.closeDropdown();return}if(!this.isOpen()){this.openDropdown();return}this.closeDropdown()}clearSelection(t){t.stopPropagation();if(this.isInteractionLocked())return;this.selectedValues.set([]);this.searchTerm.set("");this.model().setValue([],"change");this.validatorService.handleElementBlur(this.model());this.runActions("change",[])}clearSearch(t){t.stopPropagation();this.searchTerm.set("");this.scheduleDropdownPositionCalculation()}onSearchInput(t){if(this.isInteractionLocked())return;const e=t.target.value;this.searchTerm.set(e);this.scheduleDropdownPositionCalculation()}toggleOption(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=[...this.selectedValues()];const o=n.findIndex(r=>this.isSameValue(r,t));if(o>=0)n.splice(o,1);else n.push(t);this.selectedValues.set(n);this.model().setValue(n,"change");this.runActions("change",n)}toggleGroup(t,e){e?.stopPropagation();if(this.isInteractionLocked())return;const n=this.resolveGroupValues(t);if(n.length===0)return;const o=[...this.selectedValues()];const r=n.every(a=>o.some(i=>this.isSameValue(i,a)))?o.filter(a=>!n.some(i=>this.isSameValue(i,a))):this.mergeSelectedGroupValues(o,n);this.selectedValues.set(r);this.model().setValue(r,"change");this.runActions("change",r)}isSelected(t){return this.selectedValues().some(e=>this.isSameValue(e,t))}isGroupSelected(t){const e=this.resolveGroupValues(t);return e.length>0&&e.every(n=>this.selectedValues().some(o=>this.isSameValue(o,n)))}isGroupPartiallySelected(t){const e=this.resolveGroupValues(t);if(e.length===0)return false;const n=e.filter(o=>this.selectedValues().some(r=>this.isSameValue(r,o))).length;return n>0&&n<e.length}resolveOptionTestId(t,e,n){const o=h(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"multi-select");const r=h(String(t??e).trim()||String(e+1));const a=h(String(n??"").trim());return a?`nvb-${o}-option-${a}-${r}`:`nvb-${o}-option-${r}`}resolveOptionAriaLabel(t,e){const n=String(t??"").trim();if(n)return n;return String(e??this.uiTranslationService.translate("multiSelect.optionFallback","Option"))}calculateDropdownPosition(){if(!this.selectButton){this.dropdownPosition.set("bottom");this.dropdownMaxHeight.set(this.defaultDropdownHeight);this.dropdownLeft.set(0);this.dropdownTop.set(0);this.dropdownMinWidth.set(0);return}const t=this.selectButton.nativeElement;const e=t.getBoundingClientRect();const n=Math.max(this.documentRef.documentElement?.clientWidth??0,window.innerWidth??0);const o=Math.max(this.documentRef.documentElement?.clientHeight??0,window.innerHeight??0);const r=Math.max(Math.round(e.width),84);const a=this.dropdownBoundaryPadding;const i=Math.max(a,n-r-this.dropdownBoundaryPadding);const d=Math.min(Math.max(e.left,a),i);const u=Math.max(0,o-e.bottom-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const v=Math.max(0,e.top-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const b=u<Math.min(this.defaultDropdownHeight,220)&&v>u;const m=b?v:u;const I=Math.min(this.defaultDropdownHeight,Math.max(this.minDropdownHeight,m));const S=P(t);this.dropdownPosition.set(b?"top":"bottom");this.dropdownMaxHeight.set(I);this.dropdownLeft.set(d-S.left);this.dropdownTop.set((b?e.top:e.bottom+this.dropdownVerticalGap)-S.top);this.dropdownMinWidth.set(r)}onTriggerFocus(){if(this.isInteractionLocked())return;this.runActions("focus")}onTriggerBlur(){if(this.isInteractionLocked())return;if(this.isOpen())return;this.validatorService.handleElementBlur(this.model());this.runActions("blur")}onTriggerKeydown(t){if(this.isInteractionLocked())return;switch(t.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen())this.openDropdown();return;case"Escape":if(!this.isOpen())return;t.preventDefault();this.closeDropdown(true);return;default:return}}onCustomOptionsClick(t){if(this.isInteractionLocked())return;const e=t.target?.closest("[data-option-index], [data-value]");if(!e)return;const n=this.resolveOptionValueFromIndex(e.getAttribute("data-option-index"));if(n.found){this.toggleOption(n.value,t);return}const o=this.resolveOptionValueFromDomOrder(e);if(o.found){this.toggleOption(o.value,t);return}const r=e.getAttribute("data-value");if(r===null)return;const a=this.resolveOptionValue(r);this.toggleOption(a,t)}onDocumentClick(t){if(!this.isOpen())return;const e=this.dropdownContainer?.nativeElement;if(!e)return;const n=t.target;const o=typeof t.composedPath==="function"?t.composedPath():[];if(!((n?e.contains(n):false)||o.includes(e)))this.closeDropdown(true)}openDropdown(){this.calculateDropdownPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.scheduleDropdownPositionCalculation()}closeDropdown(t=false){this.isOpen.set(false);this.searchTerm.set("");this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId);if(t){this.validatorService.handleElementBlur(this.model());this.runActions("blur")}}runActions(t,e){const n=e!==void 0?e:this.selectedValues();const o=String(this.model().name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;this.elementActionService.runActions(this.model(),this.model().events??[],t,r)}isInteractionLocked(){const t=this.model();if(!t)return false;if(Boolean(t["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(t.disabled)||Boolean(t.readOnly)}onDocumentScroll(){if(!this.isOpen())return;this.calculateDropdownPosition()}onWindowResize(){if(!this.isOpen())return;this.calculateDropdownPosition()}flattenCurrentOptions(){const t=this.filteredOptions();if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return(t??[]).map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}flattenAllOptions(){const t=this.filterOptionsByVisibility(this.model().options??[]);if(this.usesGroupedOptions()){const e=[];t.forEach(n=>{(n?.items??[]).forEach(o=>{e.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return e}return t.map(e=>({...e??{},label:String(e?.label??""),value:e?.value}))}renderTemplate(t,e,n){const o=t.toLowerCase();if(o.includes("<script")||o.includes("onerror=")||o.includes("onload="))throw new Error(this.uiTranslationService.translate("multiSelect.templateUnsupportedHtml","Template contains unsupported HTML."));return e.map((r,a)=>this.renderOptionTemplate(t,r,a,n)).join("")}renderCollectionTemplate(t,e,n){const o=e.map(r=>{const a=this.applyOptionTemplateAliases(r);return{...a,selected:n.some(i=>this.isSameValue(i,a.value)),checked:n.some(i=>this.isSameValue(i,a.value))}});return this.templateEngineService.renderTemplate(t,this.buildTemplateContext(o,n,{selectedItems:o.filter(r=>n.some(a=>this.isSameValue(a,r.value)))}))}renderOptionTemplate(t,e,n,o){const r=this.applyOptionTemplateAliases(e);const a=String(e.value??"");const i=o.some(v=>this.isSameValue(v,e.value));const d=this.templateEngineService.renderTemplate(t,this.buildTemplateContext(this.flattenCurrentOptions(),o,{...r??{},option:r,item:r,row:r,label:r.label,value:r.value,index:n,groupLabel:r.groupLabel??null,selected:i,checked:i,selectedClass:i?"selected":"",selectedValues:o}));const u=this.isMarkupEffectivelyEmpty(d)?this.templateEngineService.escapeHtml(String(r.label??"")):d;if(/data-value\s*=/.test(d))return d;return`<div class="nvb-multi-select-template-option${i?" nvb-multi-select-template-option--selected":""}" data-option-index="${n}" data-value="${this.escapeAttribute(a)}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${i?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${u}</div></div>`}buildTemplateContext(t,e,n={}){const o=t.map(a=>this.applyOptionTemplateAliases(a));const r={...this.dataService.getData()??{},model:this.model(),element:this.model(),field:this.model(),items:o,options:o,filteredOptions:o,selectedValues:e,value:e,...n};return this.templateEngineService.applyTemplateFieldMap(r,this.resolveOptionTemplateFieldMap())}resolveOptionTemplateFieldMap(){const t=this.model()["optionTemplateFieldMap"];return t&&typeof t==="object"&&!Array.isArray(t)?t:null}applyOptionTemplateAliases(t){const e=t??{};const n=e["label"];const o=e["value"];return{...e,label:String(n??""),value:o,display:e["display"]??n??"",key:e["key"]??o,text:e["text"]??n??"",title:e["title"]??n??""}}renderDefaultDropdownHtml(t,e){return t.map((n,o)=>{const r=e.some(a=>this.isSameValue(a,n.value));return`<div class="${r?"nvb-multi-select-fallback-option nvb-multi-select-fallback-option--selected":"nvb-multi-select-fallback-option"}" data-option-index="${o}" data-value="${this.escapeAttribute(String(n.value??""))}"><input type="checkbox" class="nvb-control__checkbox-input nvb-option-checkbox" ${r?"checked":""} tabindex="-1" aria-hidden="true" /><div class="nvb-option__content">${this.templateEngineService.escapeHtml(n.label)}</div></div>`}).join("")}isMarkupEffectivelyEmpty(t){return String(t??"").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<!--[\s\S]*?-->/g,"").trim().length===0}sanitizeCustomDropdownHtml(t){return this.markupSecurityService.sanitizeHtml(String(t??""))}hasSelectableOptionMarkup(t){return/data-value\s*=/.test(String(t??""))}hydrateSelectableOptionMarkup(t,e,n){const o=String(t??"").trim();if(!o||this.hasSelectableOptionMarkup(o))return o;const r=this.documentRef;if(!r||typeof r.createElement!=="function")return o;const a=r.createElement("div");a.innerHTML=o;const i=this.resolveTemplateOptionNodes(a,e.length);if(!i||i.length!==e.length)return o;i.forEach((d,u)=>{const v=e[u];const b=n.some(m=>this.isSameValue(m,v?.value));d.setAttribute("data-option-index",String(u));d.setAttribute("data-value",String(v?.value??""));d.classList.add("nvb-multi-select-template-option");if(b)d.classList.add("nvb-multi-select-template-option--selected")});return a.innerHTML}resolveTemplateOptionNodes(t,e){const n=Array.from(t.children);if(n.length===e)return n;if(n.length===1){const o=Array.from(n[0].children);if(o.length===e)return o}return null}hasMeaningfulOptionContent(t){const e=String(t??"").trim();if(!e)return false;const n=this.documentRef;if(!n||typeof n.createElement!=="function")return e.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<[^>]+>/g,"").replace(/\s+/g,"").trim().length>0;const o=n.createElement("div");o.innerHTML=e;const r=Array.from(o.querySelectorAll("[data-value]"));if(r.length===0)return false;return r.some(a=>{if(String(a.textContent??"").replace(/\s+/g," ").trim().length>0)return true;return Boolean(a.querySelector("img,svg,video,canvas,nvb-icon,.nvb-icon-svg,[data-icon]"))})}resolveOptionValue(t){const e=this.flattenAllOptions().find(n=>String(n.value??"")===t);return e?e.value:t}resolveOptionValueFromIndex(t){const e=Number.parseInt(String(t??""),10);if(!Number.isInteger(e)||e<0)return{found:false,value:null};const n=this.flattenCurrentOptions();if(e>=n.length)return{found:false,value:null};return{found:true,value:n[e]?.value}}resolveOptionValueFromDomOrder(t){const e=t.closest(".nvb-options-container__custom");if(!e)return{found:false,value:null};const n=Array.from(e.querySelectorAll("[data-option-index], [data-value]")).filter(o=>{return!o.parentElement?.closest("[data-option-index], [data-value]")}).indexOf(t);if(n<0)return{found:false,value:null};return this.resolveOptionValueFromIndex(String(n))}escapeAttribute(t){return t.replaceAll("&","&amp;").replaceAll('"',"&quot;").replaceAll("<","&lt;").replaceAll(">","&gt;")}normalizeOptionTemplate(t){if(typeof t!=="string")return null;const e=t.trim();if(!e)return null;const n=e.toLowerCase();if(n==="null"||n==="undefined")return null;return e}shouldRenderCollectionTemplate(t){const e=String(t??"");return/@for\s*\(/.test(e)||/@(?:if|let|switch)\s*\([^)]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^)]*\)/.test(e)||/(?:\{\{|\{)\s*[^{}]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^{}]*\s*(?:\}\}|\})/.test(e)}isSameValue(t,e){return String(t??"")===String(e??"")}filterOptionsByVisibility(t){if(!Array.isArray(t))return[];if(this.hasGroupedOptions(t))return t.map(e=>{if(!this.isOptionVisible(e))return null;const n=(Array.isArray(e?.items)?e.items:[]).filter(o=>this.passesOptionFilters(o)&&this.isOptionVisible(o));if(n.length===0)return null;return{...e,items:n}}).filter(e=>e!==null);return t.filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))}hasGroupedOptions(t){return Array.isArray(t)&&t.some(e=>Array.isArray(e?.["items"]))}resolveGroupValues(t){return(Array.isArray(t?.["items"])?t["items"]:[]).map(e=>e?.["value"]).filter((e,n,o)=>{return o.findIndex(r=>this.isSameValue(r,e))===n})}mergeSelectedGroupValues(t,e){const n=[...t];e.forEach(o=>{if(!n.some(r=>this.isSameValue(r,o)))n.push(o)});return n}passesOptionFilters(t){const e=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!e&&!n&&!o)return true;const r=this.dataService.getData()??{};return N([t],e,r,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:o}).length>0}isOptionVisible(t){const e=String(t?.visibleIf??"").trim();if(!e)return true;try{const n=this.normalizeOptionCondition(e);return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),n)}catch{return true}}normalizeOptionCondition(t){const e=t.replace(/{/g,"").replace(/}/g,"").trim();if(!e)return"";return this.expressionService.applyContextToExpression(e,this.model())}slugify(t){return String(t??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}scheduleDropdownPositionCalculation(){this.cancelScheduledDropdownCalculation();if(!this.isOpen())return;this.dropdownLayoutFrame=window.requestAnimationFrame(()=>{this.dropdownLayoutFrame=null;this.calculateDropdownPosition()})}cancelScheduledDropdownCalculation(){if(this.dropdownLayoutFrame===null)return;window.cancelAnimationFrame(this.dropdownLayoutFrame);this.dropdownLayoutFrame=null}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:w,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:w,isStandalone:true,selector:"multi-select-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)","document:scroll":"onDocumentScroll()","window:resize":"onWindowResize()"}},viewQueries:[{propertyName:"dropdownContainer",first:true,predicate:["dropdownContainer"],descendants:true},{propertyName:"selectButton",first:true,predicate:["selectButton"],descendants:true},{propertyName:"dropdownPanel",first:true,predicate:["dropdownPanel"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (model().showSearch !== false) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"ngmodule",type:D},{kind:"directive",type:U.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"ngmodule",type:L},{kind:"component",type:T,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:C,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:O,name:"dynamicText"},{kind:"pipe",type:k,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:x,decorators:[{type:R,args:[{selector:"multi-select-element",changeDetection:q.OnPush,standalone:true,imports:[D,L,T,O,C,k],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <span class=\"material-symbols-outlined\">database</span>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-multi-select-container\"\n      [class.nvb-multi-select-container--open]=\"isOpen()\"\n      [class.nvb-multi-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <span class=\"material-symbols-outlined nvb-select-arrow\" [class.nvb-open]=\"isOpen()\"\n              >keyboard_arrow_down</span\n            >\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (model().showSearch !== false) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label; let tidIndex1 = $index) {\n                <div class=\"nvb-option-group\">\n                  <label [attr.data-testid]=\"tid('toggle-group', tidIndex1)\"\n                    class=\"nvb-group-label nvb-group-label--selectable\"\n                    (click)=\"toggleGroup(group, $event)\"\n                  >\n                    <input [attr.data-testid]=\"tid('checkbox-input', tidIndex1)\"\n                      type=\"checkbox\"\n                      class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                      [checked]=\"isGroupSelected(group)\"\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\n                      (click)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"group.label\"\n                    />\n                    <span>{{ group.label }}</span>\n                  </label>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"isSelected(item.value)\"\n                      (click)=\"toggleOption(item.value, $event)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"isSelected(item.value)\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                        [checked]=\"isSelected(item.value)\"\n                        [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\"\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{{ item.label }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"isSelected(option.value)\"\n                  (click)=\"toggleOption(option.value, $event)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option.value)\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"nvb-control__checkbox-input nvb-option-checkbox\"\n                    [checked]=\"isSelected(option.value)\"\n                    [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex) + '-checkbox'\"\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                    tabindex=\"-1\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{{ option.label }}</span>\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-multi-select-container{position:relative;width:100%;overflow:visible}.nvb-multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-multi-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button .material-symbols-outlined{font-size:16px;line-height:1}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-checkbox{pointer-events:none;margin:0}.nvb-option__content{min-width:0}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.nvb-option-group .nvb-group-label--selectable .nvb-option-checkbox{pointer-events:auto}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-multi-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}:host ::ng-deep .nvb-options-container__custom .nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-template-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-multi-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],dropdownContainer:[{type:f,args:["dropdownContainer"]}],selectButton:[{type:f,args:["selectButton"]}],dropdownPanel:[{type:f,args:["dropdownPanel"]}],onDocumentClick:[{type:g,args:["document:click",["$event"]]}],onDocumentScroll:[{type:g,args:["document:scroll"]}],onWindowResize:[{type:g,args:["window:resize"]}]}});export{Y as n,x as t};

package/fesm2022/ngxviewbuilder-runtime-number-element-DctiWuS1.mjs

@@ -1 +0,0 @@
-import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as h,an as g,g as v,t as d,yt as y}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as f,rt as b,t as m}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as I,ChangeDetectorRef as V,Component as C,Injector as F,effect as S,inject as l,input as D,signal as o}from"@angular/core";import{NgClass as p}from"@angular/common";var x=c({NumberElement:()=>s});var s=class u{model=D.required(...ngDevMode?[{debugName:"model"}]:[]);tid=f(this.model,"nvb-number","number");useCompactStyle=o(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);displayValue=o("",...ngDevMode?[{debugName:"displayValue"}]:[]);isEditing=o(false,...ngDevMode?[{debugName:"isEditing"}]:[]);elementActionService=l(b);dataService=l(g);localeFormatService=l(h);eventService=l(v);cdr=l(V);injector=l(F);onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){if(this.model()?.parentElement&&this.model()?.parentElement instanceof y)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.refreshDisplayValue();S(()=>{const e=String(this.model()?.dataPath??"").trim();if(!e)return;const t=this.dataService.getValue(e);if(!Object.is(this.model().value,t))this.model().value=t;if(!this.isEditing())this.refreshDisplayValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onInput(e){this.syncDisplayValueFromTarget(e);if(this.shouldCommitForTrigger("input"))this.applyTypedInputValue(e,"input");this.runActions("input",e)}onChange(e){this.syncDisplayValueFromTarget(e);if(this.shouldCommitForTrigger("change"))this.applyTypedInputValue(e,"change");this.runActions("change",e)}onBlur(e){this.applyTypedInputValue(e,"blur");this.isEditing.set(false);this.refreshDisplayValue();this.runActions("blur",e)}onFocus(e){this.isEditing.set(true);this.runActions("focus",e)}shouldCommitForTrigger(e){const t=e==="input"?"oninput":"onchange";const n=this.normalizeExecutionMode(this.model().logicExecutionMode);const r=this.normalizeExecutionMode(this.model().validationExecutionMode);if(n===t||r===t)return true;return(this.model().events??[]).some(i=>String(i?.trigger??"").trim().toLowerCase()===e)}normalizeExecutionMode(e){const t=String(e??"").trim().toLowerCase();if(t==="oninput")return"oninput";if(t==="onchange")return"onchange";return"onblur"}onKeyDown(e){if(this.model().disabled||this.model().readOnly)return;if(this.isControlShortcut(e)||this.isNavigationKey(e.key))return;const t=String(e.key??"");if(!/^[0-9.,\-\s]$/.test(t)){e.preventDefault();return}const n=e.target;if(!n)return;const r=this.buildCandidateValue(n,t);if(!this.isCandidateNumberInput(r))e.preventDefault()}onPaste(e){if(this.model().disabled||this.model().readOnly)return;const t=e.clipboardData?.getData("text")??"";if(!t)return;if(!/^[0-9.,\-\s]+$/.test(t)){e.preventDefault();return}const n=e.target;if(!n)return;const r=this.buildCandidateValue(n,t);if(!this.isCandidateNumberInput(r))e.preventDefault()}runActions(e,t){const n=this.resolveInputValue(t);const r=String(this.model().name??"").trim();const i={value:n,item:null,row:null};if(r)i[r]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,i)}resolveInputValue(e){if(this.isVisualFormatEnabled()){const n=e?.target;return this.localeFormatService.parseNumber(n?.value??this.displayValue(),this.resolveVisualLocale())}const t=e?.target;if(!t){const n=Number(this.model().value);return Number.isNaN(n)?null:n}return this.localeFormatService.parseNumber(t.value,this.resolveVisualLocale())}getInputType(){return this.model()?.["visualFormatEnabled"]?"text":"number"}getInputMode(){return String(this.model()?.["inputMode"]??"").trim().toLowerCase()==="numeric"?"numeric":"decimal"}getInputValue(){return this.displayValue()}resolveInputTextAlign(){return String(this.model()?.["numberInputAlign"]??"").trim().toLowerCase()==="right"?"right":"left"}isVisualFormatEnabled(){return Boolean(this.model()?.["visualFormatEnabled"])}resolveVisualLocale(){const e=String(this.model()?.["visualFormatLocale"]??"").trim();return this.localeFormatService.resolveLocale(e)}applyTypedInputValue(e,t){const n=e.target;if(!n)return;this.displayValue.set(n.value??"");const r=this.localeFormatService.parseNumber(n.value,this.resolveVisualLocale());if(r!==null){this.model().setValueFromNumber(r,t);return}if(!String(n.value??"").trim())this.model().setValueFromNumber(null,t)}syncDisplayValueFromTarget(e){const t=e.target;this.displayValue.set(t?.value??"")}refreshDisplayValue(){if(!this.isVisualFormatEnabled()){this.displayValue.set(String(this.model().value??""));return}const e=this.model().value;const t=typeof e==="number"?e:this.localeFormatService.parseNumber(e,this.resolveVisualLocale());if(t===null||!Number.isFinite(t)){this.displayValue.set("");return}const n=this.model()?.["visualFormatUseGrouping"];const r=this.model()?.["visualFormatMinFractionDigits"];const i=this.model()?.["visualFormatMaxFractionDigits"];this.displayValue.set(this.localeFormatService.formatNumber(t,{locale:this.resolveVisualLocale(),useGrouping:n===void 0||n===null?true:Boolean(n),minimumFractionDigits:r===null||r===void 0?void 0:Number(r),maximumFractionDigits:i===null||i===void 0?void 0:Number(i)}))}isControlShortcut(e){const t=String(e.key??"").toLowerCase();if(!(e.ctrlKey||e.metaKey))return false;return["a","c","v","x","z","y"].includes(t)}isNavigationKey(e){return["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","Tab","Enter","Escape"].includes(e)}buildCandidateValue(e,t){const n=e.selectionStart??e.value.length;const r=e.selectionEnd??n;return`${e.value.slice(0,n)}${t}${e.value.slice(r)}`}isCandidateNumberInput(e){const t=String(e??"").replace(/\s+/g,"").trim();if(!t)return true;if(!/^[0-9.,\-]+$/.test(t))return false;const n=(t.match(/-/g)||[]).length;if(n>1)return false;if(n===1&&!t.startsWith("-"))return false;if((t.match(/[.,]/g)||[]).length>1)return false;const r=this.resolveConfiguredMaxFractionDigits();if(r!==null){const i=Math.max(t.lastIndexOf(","),t.lastIndexOf("."));if(i>=0){if(t.slice(i+1).replace(/[^0-9]/g,"").length>r)return false}}return true}resolveConfiguredMaxFractionDigits(){if(!this.isVisualFormatEnabled())return null;const e=this.model()?.["visualFormatMaxFractionDigits"];const t=Number(e);if(!Number.isFinite(t))return null;return Math.max(0,Math.min(20,Math.floor(t)))}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:u,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:u,isStandalone:true,selector:"lib-number-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div class=\"nvb-number-input\">\n    <input\n      [id]=\"fieldWrapper.controlId()\"\n      [type]=\"getInputType()\"\n      [attr.inputmode]=\"getInputMode()\"\n      [attr.min]=\"getInputType() === 'number' ? (model()['min'] ?? null) : null\"\n      [attr.max]=\"getInputType() === 'number' ? (model()['max'] ?? null) : null\"\n      [attr.step]=\"getInputType() === 'number' ? (model()['step'] ?? null) : null\"\n      [placeholder]=\"model().placeholder ? (model().placeholder | dynamicText: model()) : ''\"\n      [disabled]=\"model().disabled\"\n      [readOnly]=\"model().readOnly\"\n      [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [style.text-align]=\"resolveInputTextAlign()\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.data-testid]=\"tid('input')\"\n      (keydown)=\"onKeyDown($event)\"\n      (paste)=\"onPaste($event)\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      [value]=\"getInputValue()\"\n    />\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-number-input{position:relative;width:100%;min-width:0}\n"],dependencies:[{kind:"component",type:m,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:p,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:d,name:"dynamicText"}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:s,decorators:[{type:C,args:[{selector:"lib-number-element",changeDetection:I.OnPush,imports:[m,p,d],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div class=\"nvb-number-input\">\n    <input\n      [id]=\"fieldWrapper.controlId()\"\n      [type]=\"getInputType()\"\n      [attr.inputmode]=\"getInputMode()\"\n      [attr.min]=\"getInputType() === 'number' ? (model()['min'] ?? null) : null\"\n      [attr.max]=\"getInputType() === 'number' ? (model()['max'] ?? null) : null\"\n      [attr.step]=\"getInputType() === 'number' ? (model()['step'] ?? null) : null\"\n      [placeholder]=\"model().placeholder ? (model().placeholder | dynamicText: model()) : ''\"\n      [disabled]=\"model().disabled\"\n      [readOnly]=\"model().readOnly\"\n      [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [style.text-align]=\"resolveInputTextAlign()\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.data-testid]=\"tid('input')\"\n      (keydown)=\"onKeyDown($event)\"\n      (paste)=\"onPaste($event)\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      [value]=\"getInputValue()\"\n    />\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-number-input{position:relative;width:100%;min-width:0}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,s as t};

package/fesm2022/ngxviewbuilder-runtime-nvb-select-BEN_kxMD.mjs

@@ -1 +0,0 @@
-import{n as y}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{a as D,i as R}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import{t as N}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import*as c from"@angular/core";import{ChangeDetectionStrategy as T,ChangeDetectorRef as P,Component as B,EventEmitter as h,HostListener as k,Input as d,Output as b,ViewChild as p,ViewChildren as F,forwardRef as I,inject as M,signal as l}from"@angular/core";import{NG_VALUE_ACCESSOR as V}from"@angular/forms";var x=class g{hostRef;nativeSelectRef;triggerButtonRef;menuRef;filterInputRef;optionButtonRefs;set value(e){this.internalValue=this.normalizeValue(e);this.syncNativeValue();this.syncFromNativeOptions();queueMicrotask(()=>this.syncFromNativeOptions())}get value(){return this.internalValue}set disabled(e){this.inputDisabled=this.coerceBoolean(e);this.syncDisabledState()}set required(e){this.inputRequired=this.coerceBoolean(e);this.syncRequiredState()}set filterable(e){const t=String(e??"").trim().toLowerCase();this.filterMode=t==="auto"?"auto":this.coerceBoolean(e)}set filterThreshold(e){const t=Number(e);this.filterThresholdValue=Number.isFinite(t)&&t>0?Math.round(t):8}set allowCustomValue(e){this.customValueAllowed=this.coerceBoolean(e)}get allowCustomValue(){return this.customValueAllowed}placeholder="";testId="";optionTestId(e){return this.testId?`${this.testId}-option-${R(e?.value)||"empty"}`:null}valueChange=new h;change=new h;focus=new h;blur=new h;options=l([],...ngDevMode?[{debugName:"options"}]:[]);filterQuery=l("",...ngDevMode?[{debugName:"filterQuery"}]:[]);filterTouched=l(false,...ngDevMode?[{debugName:"filterTouched"}]:[]);selectedLabel=l("",...ngDevMode?[{debugName:"selectedLabel"}]:[]);isPlaceholder=l(true,...ngDevMode?[{debugName:"isPlaceholder"}]:[]);isOpen=l(false,...ngDevMode?[{debugName:"isOpen"}]:[]);activeIndex=l(-1,...ngDevMode?[{debugName:"activeIndex"}]:[]);menuLeft=l(0,...ngDevMode?[{debugName:"menuLeft"}]:[]);menuTop=l(0,...ngDevMode?[{debugName:"menuTop"}]:[]);menuWidth=l(null,...ngDevMode?[{debugName:"menuWidth"}]:[]);menuMaxHeight=l(280,...ngDevMode?[{debugName:"menuMaxHeight"}]:[]);menuPlacement=l("bottom",...ngDevMode?[{debugName:"menuPlacement"}]:[]);menuId=`nvb-select-menu-${Math.random().toString(36).slice(2,9)}`;optionIdPrefix=`nvb-select-option-${Math.random().toString(36).slice(2,9)}-`;hostObserver=null;optionsObserver=null;removeGlobalListeners=null;forwardedHostClasses=new Set;internalValue="";filterMode="auto";filterThresholdValue=8;customValueAllowed=false;hasNavigatedMenu=false;inputDisabled=false;controlDisabled=false;inputRequired=false;syncInProgress=false;menuViewportPadding=8;menuVerticalGap=6;menuDefaultMaxHeight=280;menuMinHeight=96;onChangeCallback=()=>{};onTouchedCallback=()=>{};cdr=M(P);dropdownCoordinatorService=M(N);dropdownCoordinatorSubscription=null;dropdownId=`nvb-select-${Math.random().toString(36).slice(2,11)}`;constructor(e){this.hostRef=e}ngAfterViewInit(){this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(e===this.dropdownId)return;this.closeMenu()});this.setupObservers();this.setupGlobalListeners();queueMicrotask(()=>{this.syncProjectedState();this.syncFromNativeOptions()})}ngOnDestroy(){this.hostObserver?.disconnect();this.optionsObserver?.disconnect();this.removeGlobalListeners?.();this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.dropdownCoordinatorService.requestClose(this.dropdownId)}writeValue(e){this.internalValue=this.normalizeValue(e);this.syncNativeValue();this.syncFromNativeOptions();queueMicrotask(()=>this.syncFromNativeOptions())}registerOnChange(e){this.onChangeCallback=e}registerOnTouched(e){this.onTouchedCallback=e}setDisabledState(e){this.controlDisabled=Boolean(e);this.syncDisabledState()}onNativeChange(e){const t=this.normalizeValue(e.target?.value);this.internalValue=t;this.syncFromNativeOptions();this.onChangeCallback(t);this.valueChange.emit(t);this.change.emit(e)}onTriggerFocus(e){this.focus.emit(e)}onTriggerBlur(e){this.onTouchedCallback();this.blur.emit(e);queueMicrotask(()=>{if(!this.containsNode(this.resolveActiveNode()))this.closeMenu()})}onTriggerClick(e){e.preventDefault();if(this.isDisabled())return;this.isOpen()?this.closeMenu():this.openMenu()}onTriggerKeydown(e){if(this.isDisabled())return;switch(e.key){case"ArrowDown":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.moveActive(1);return;case"ArrowUp":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.moveActive(-1);return;case"Home":if(!this.isOpen())return;e.preventDefault();this.moveToEdge(1);return;case"End":if(!this.isOpen())return;e.preventDefault();this.moveToEdge(-1);return;case"Enter":case" ":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.selectActiveOption();return;case"Tab":this.closeMenu();return;case"Escape":if(!this.isOpen())return;e.preventDefault();this.closeMenu();return;default:return}}onOptionMouseDown(e,t){t.preventDefault();t.stopPropagation();if(this.isDisabled())return;this.commitOptionSelection(e)}onOptionClick(e,t){t.preventDefault();t.stopPropagation();if(this.isDisabled()||!this.isOpen())return;this.commitOptionSelection(e)}visibleOptions(){const e=this.filterQuery().trim().toLowerCase();if(!e||!this.filterTouched()||!this.isFilterVisible())return this.options();return this.options().filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e))}isFilterVisible(){if(this.customValueAllowed)return true;if(this.filterMode===true)return true;if(this.filterMode===false)return false;return this.options().length>=this.filterThresholdValue}onFilterInput(e){const t=String(e.target?.value??"");this.filterQuery.set(t);this.filterTouched.set(true);this.hasNavigatedMenu=false;const n=this.visibleOptions();this.activeIndex.set(n.length>0?this.findNearestEnabledIndex(0,1):-1);this.updateMenuPosition()}onFilterKeydown(e){switch(e.key){case"ArrowDown":e.preventDefault();this.moveActive(1);return;case"ArrowUp":e.preventDefault();this.moveActive(-1);return;case"Enter":e.preventDefault();if(this.hasNavigatedMenu&&this.activeIndex()>=0){this.commitOptionSelection(this.activeIndex());return}if(this.customValueAllowed){this.commitCustomValue(this.filterQuery());this.closeMenu();this.triggerButtonRef.nativeElement.focus();return}if(this.activeIndex()>=0)this.commitOptionSelection(this.activeIndex());return;case"Escape":e.preventDefault();this.closeMenu();this.triggerButtonRef.nativeElement.focus();return;case"Tab":if(this.customValueAllowed)this.commitCustomValue(this.filterQuery());this.closeMenu();return;default:return}}onFilterBlur(){queueMicrotask(()=>{if(this.containsNode(this.resolveActiveNode()))return;if(this.customValueAllowed)this.commitCustomValue(this.filterQuery());this.closeMenu()})}optionId(e){return`${this.optionIdPrefix}${e}`}activeDescendantId(){if(!this.isOpen()||this.activeIndex()<0)return null;return this.optionId(this.activeIndex())}onDocumentMouseDown(e){if(!this.isOpen())return;const t=e.target;if(this.containsNode(t))return;this.closeMenu()}onDocumentEscape(e){if(!this.isOpen())return;e.preventDefault();this.closeMenu();this.triggerButtonRef.nativeElement.focus()}syncProjectedState(){if(this.syncInProgress)return;this.syncInProgress=true;try{this.forwardHostClasses();this.forwardHostAttributesTo(this.triggerButtonRef.nativeElement,new Set(["class","type"]));this.forwardHostAttributesTo(this.nativeSelectRef.nativeElement,new Set(["class","disabled","required","value"]));this.syncDisabledState();this.syncRequiredState();this.syncNativeValue()}finally{this.syncInProgress=false}}forwardHostClasses(){const e=this.triggerButtonRef?.nativeElement;const t=this.nativeSelectRef?.nativeElement;if(!e||!t)return;const n=Array.from(this.hostRef.nativeElement.classList).filter(i=>this.shouldForwardHostClass(i));const o=new Set(n);this.forwardedHostClasses.forEach(i=>{if(o.has(i))return;e.classList.remove(i);t.classList.remove(i)});o.forEach(i=>{e.classList.add(i);t.classList.add(i)});this.forwardedHostClasses=o}shouldForwardHostClass(e){const t=String(e??"").trim();if(!t)return false;if(t.startsWith("ng-")||t.startsWith("input-ng-"))return false;return true}forwardHostAttributesTo(e,t){const n=Array.from(this.hostRef.nativeElement.attributes);Array.from(e.attributes).forEach(o=>{if(t.has(o.name)||o.name.startsWith("_ngcontent-"))return;e.removeAttribute(o.name)});n.forEach(o=>{const i=o.name;if(i==="class"||i==="style"||i==="value"||i==="id")return;if(i.startsWith("_nghost-"))return;e.setAttribute(i,o.value)})}syncNativeValue(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;if(e.value!==this.internalValue)e.value=this.internalValue}syncDisabledState(){const e=this.nativeSelectRef?.nativeElement;const t=this.triggerButtonRef?.nativeElement;if(!e||!t)return;const n=this.isDisabled();e.disabled=n;t.disabled=n}syncRequiredState(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;e.required=Boolean(this.inputRequired)}isDisabled(){return this.inputDisabled||this.controlDisabled}setupObservers(){this.hostObserver?.disconnect();this.optionsObserver?.disconnect();this.hostObserver=new MutationObserver(()=>{this.runInZone(()=>{this.syncProjectedState()})});this.hostObserver.observe(this.hostRef.nativeElement,{attributes:true});const e=this.nativeSelectRef.nativeElement;this.optionsObserver=new MutationObserver(()=>{this.runInZone(()=>{this.syncFromNativeOptions()})});this.optionsObserver.observe(e,{childList:true,subtree:true,attributes:true,characterData:true})}syncFromNativeOptions(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;const t=Array.from(e.options).map(r=>({value:String(r.value??""),label:String(r.label??r.textContent??""),disabled:Boolean(r.disabled)}));this.options.set(t);if(t.length===0){this.selectedLabel.set(this.customValueAllowed?this.internalValue||this.placeholder:"");this.isPlaceholder.set(this.internalValue==="");this.activeIndex.set(-1);return}const n=this.normalizeValue(e.value);const o=t.some(r=>r.value===this.internalValue);if(this.customValueAllowed&&!o){this.selectedLabel.set(this.internalValue||this.placeholder);this.isPlaceholder.set(this.internalValue==="");this.activeIndex.set(-1);return}if(!o&&!this.internalValue&&n)this.internalValue=n;const i=t.findIndex(r=>r.value===this.internalValue);const s=t.findIndex(r=>r.value===n);const a=i>=0?i:s;const u=a>=0?t[a]:t[0];this.selectedLabel.set(String(u?.label??""));this.isPlaceholder.set(a>=0?t[a]?.value==="":n==="");if(this.activeIndex()<0||this.activeIndex()>=t.length||t[this.activeIndex()]?.disabled)this.activeIndex.set(this.findNearestEnabledIndex(a>=0?a:0,1))}openMenu(){if(this.isDisabled())return;this.updateMenuPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.filterQuery.set(this.customValueAllowed?this.internalValue:"");this.filterTouched.set(false);this.hasNavigatedMenu=false;const e=this.visibleOptions().findIndex(t=>t.value===this.internalValue);this.activeIndex.set(this.findNearestEnabledIndex(e>=0?e:0,1));this.cdr.detectChanges();this.updateMenuPosition();queueMicrotask(()=>{this.updateMenuPosition();this.ensureActiveOptionVisible();const t=this.filterInputRef?.nativeElement;t?.focus();t?.select()})}closeMenu(){this.isOpen.set(false);this.filterQuery.set("");this.filterTouched.set(false);this.hasNavigatedMenu=false;this.dropdownCoordinatorService.requestClose(this.dropdownId)}commitCustomValue(e){const t=this.normalizeValue(e);if(t===this.internalValue)return;this.internalValue=t;this.syncNativeValue();this.syncFromNativeOptions();this.onChangeCallback(t);this.valueChange.emit(t);this.change.emit(new Event("change"));this.cdr.markForCheck()}setupGlobalListeners(){if(typeof document==="undefined"||typeof window==="undefined")return;const e=()=>{if(!this.isOpen())return;this.runInZone(()=>{this.updateMenuPosition()})};const t=()=>{if(!this.isOpen())return;this.runInZone(()=>{this.updateMenuPosition()})};document.addEventListener("scroll",e,true);window.addEventListener("resize",t);this.removeGlobalListeners=()=>{document.removeEventListener("scroll",e,true);window.removeEventListener("resize",t)}}updateMenuPosition(){if(typeof window==="undefined"||!this.triggerButtonRef?.nativeElement)return;const e=this.triggerButtonRef.nativeElement.getBoundingClientRect();const t=this.menuRef?.nativeElement?.offsetHeight??0;const n=Math.max(t,Math.min(Math.max(this.visibleOptions().length*36+12+(this.isFilterVisible()?44:0),80),this.menuDefaultMaxHeight));const o=Math.max(window.innerWidth??0,0);const i=Math.max(window.innerHeight??0,0);const s=Math.max(0,i-e.bottom-this.menuViewportPadding-this.menuVerticalGap);const a=Math.max(0,e.top-this.menuViewportPadding-this.menuVerticalGap);const u=Math.max(Math.round(e.width),84);const r=this.hostRef.nativeElement.classList.contains("nvb-select--fit-content");const m=r?this.measureFitContentMenuWidth():0;const v=r?Math.max(u,Math.min(m||u,320)):u;const w=this.menuViewportPadding;const C=Math.max(w,o-v-this.menuViewportPadding);const O=Math.min(Math.max(e.left,w),C);const f=s<Math.min(n,220)&&a>s;const E=f?a:s;const S=Math.min(this.menuDefaultMaxHeight,Math.max(this.menuMinHeight,E));const _=D(this.hostRef.nativeElement);this.menuPlacement.set(f?"top":"bottom");this.menuLeft.set(O-_.left);this.menuTop.set((f?e.top:e.bottom+this.menuVerticalGap)-_.top);this.menuWidth.set(v);this.menuMaxHeight.set(S)}measureFitContentMenuWidth(){if(typeof document==="undefined"||typeof window==="undefined")return 0;const e=this.triggerButtonRef?.nativeElement;if(!e)return 0;const t=document.createElement("span");const n=t.style;const o=getComputedStyle(e);const i=this.optionButtonRefs?.first?getComputedStyle(this.optionButtonRefs.first.nativeElement):null;const s=this.menuRef?.nativeElement?getComputedStyle(this.menuRef.nativeElement):null;n.position="fixed";n.visibility="hidden";n.pointerEvents="none";n.whiteSpace="nowrap";n.inset="-9999px auto auto -9999px";n.font=i?.font||o.font;n.fontSize=i?.fontSize||o.fontSize;n.fontFamily=i?.fontFamily||o.fontFamily;n.fontWeight=i?.fontWeight||o.fontWeight;n.letterSpacing=i?.letterSpacing||o.letterSpacing;document.body.appendChild(t);let a=0;this.options().forEach(v=>{t.textContent=v.label||"";a=Math.max(a,Math.ceil(t.getBoundingClientRect().width))});t.remove();const u=this.readPixelValue(i?.paddingLeft)+this.readPixelValue(i?.paddingRight);const r=this.readPixelValue(s?.paddingLeft)+this.readPixelValue(s?.paddingRight);const m=this.readPixelValue(s?.borderLeftWidth)+this.readPixelValue(s?.borderRightWidth);return Math.ceil(a+u+r+m+8)}readPixelValue(e){const t=Number.parseFloat(String(e??"0"));return Number.isFinite(t)?t:0}moveActive(e){const t=this.visibleOptions();if(t.length===0){this.activeIndex.set(-1);return}this.hasNavigatedMenu=true;const n=this.activeIndex()>=0?this.activeIndex()+e:e>0?0:t.length-1;this.activeIndex.set(this.findNearestEnabledIndex(n,e));this.ensureActiveOptionVisible()}moveToEdge(e){const t=this.visibleOptions();if(t.length===0){this.activeIndex.set(-1);return}this.hasNavigatedMenu=true;const n=e>0?0:t.length-1;this.activeIndex.set(this.findNearestEnabledIndex(n,e));this.ensureActiveOptionVisible()}selectActiveOption(){if(this.activeIndex()<0)return;this.commitOptionSelection(this.activeIndex())}commitOptionSelection(e){this.selectOptionByIndex(e,true);this.closeMenu();this.triggerButtonRef.nativeElement.focus()}selectOptionByIndex(e,t){const n=this.visibleOptions()[e];if(!n||n.disabled)return;const o=n.value;const i=this.internalValue;this.internalValue=o;this.syncNativeValue();this.syncFromNativeOptions();if(t&&i!==o)this.nativeSelectRef.nativeElement.dispatchEvent(new Event("change",{bubbles:true}))}findNearestEnabledIndex(e,t){const n=this.visibleOptions();if(n.length===0)return-1;let o=Math.max(0,Math.min(n.length-1,e));for(let i=0;i<n.length;i++){const s=(o+i*t+n.length)%n.length;if(!n[s]?.disabled)return s}return-1}ensureActiveOptionVisible(){queueMicrotask(()=>{const e=this.optionButtonRefs?.toArray()??[];const t=this.activeIndex();(t>=0?e[t]?.nativeElement:null)?.scrollIntoView({block:"nearest"})})}containsNode(e){return Boolean(e&&this.hostRef.nativeElement.contains(e))}resolveActiveNode(){const e=this.hostRef.nativeElement.getRootNode();if(typeof ShadowRoot!=="undefined"&&e instanceof ShadowRoot)return e.activeElement;if(e instanceof Document)return e.activeElement;if(typeof document!=="undefined")return document.activeElement;return null}normalizeValue(e){return String(e??"")}coerceBoolean(e){if(typeof e==="string"){const t=e.trim().toLowerCase();if(!t)return false;return t!=="false"&&t!=="0"&&t!=="off"}return Boolean(e)}runInZone(e){e();this.cdr.markForCheck()}static ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:g,deps:[{token:c.ElementRef}],target:c.ɵɵFactoryTarget.Component});static ɵcmp=c.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:g,isStandalone:true,selector:"nvb-select",inputs:{value:"value",disabled:"disabled",required:"required",filterable:"filterable",filterThreshold:"filterThreshold",allowCustomValue:"allowCustomValue",placeholder:"placeholder",testId:"testId"},outputs:{valueChange:"valueChange",change:"change",focus:"focus",blur:"blur"},host:{listeners:{"document:mousedown":"onDocumentMouseDown($event)","document:keydown.escape":"onDocumentEscape($event)"}},providers:[{provide:V,useExisting:I(()=>g),multi:true}],viewQueries:[{propertyName:"nativeSelectRef",first:true,predicate:["nativeSelect"],descendants:true,static:true},{propertyName:"triggerButtonRef",first:true,predicate:["triggerButton"],descendants:true,static:true},{propertyName:"menuRef",first:true,predicate:["menuRef"],descendants:true},{propertyName:"filterInputRef",first:true,predicate:["filterInput"],descendants:true},{propertyName:"optionButtonRefs",predicate:["optionButton"],descendants:true}],ngImport:c,template:"<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\n  <select\n    #nativeSelect\n    class=\"nvb-select__native\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onNativeChange($event)\"\n  >\n    <ng-content />\n  </select>\n\n  <button\n    #triggerButton\n    type=\"button\"\n    class=\"nvb-select__trigger\"\n    [attr.data-testid]=\"testId ? testId + '-trigger' : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus($event)\"\n    (blur)=\"onTriggerBlur($event)\"\n  >\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\n      {{ selectedLabel() }}\n    </span>\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\n  </button>\n\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"nvb-select__menu\"\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\n      [id]=\"menuId\"\n      role=\"listbox\"\n      [style.left.px]=\"menuLeft()\"\n      [style.top.px]=\"menuTop()\"\n      [style.width.px]=\"menuWidth()\"\n      [style.maxHeight.px]=\"menuMaxHeight()\"\n    >\n      @if (isFilterVisible()) {\n        <div class=\"nvb-select__filter\">\n          <input\n            #filterInput\n            type=\"text\"\n            class=\"nvb-select__filter-input\"\n            [attr.data-testid]=\"testId ? testId + '-search' : null\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [value]=\"filterQuery()\"\n            [attr.placeholder]=\"\n              allowCustomValue\n                ? placeholder || ('select.typeOrPick' | uiT: 'Type or pick')\n                : ('select.filter' | uiT: 'Filter')\n            \"\n            (input)=\"onFilterInput($event)\"\n            (keydown)=\"onFilterKeydown($event)\"\n            (blur)=\"onFilterBlur()\"\n            (mousedown)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      @for (option of visibleOptions(); track option.value + ':' + $index; let i = $index) {\n        <button\n          #optionButton\n          type=\"button\"\n          class=\"nvb-select__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.data-testid]=\"optionTestId(option)\"\n          [disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"option.value === value\"\n          [class.nvb-select__option--selected]=\"option.value === value\"\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\n          (click)=\"onOptionClick(i, $event)\"\n        >\n          {{ option.label }}\n        </button>\n      } @empty {\n        <p class=\"nvb-select__empty\">\n          {{\n            allowCustomValue\n              ? ('select.pressEnterToUse' | uiT: 'Press Enter to use what you typed')\n              : ('select.noMatches' | uiT: 'No matches')\n          }}\n        </p>\n      }\n    </div>\n  }\n</div>\n",styles:['@charset "UTF-8";:host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--nvb-color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--nvb-color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--nvb-color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--nvb-color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--nvb-color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--nvb-color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--nvb-color-neutral-000);--nvb-select-menu-border: var(--nvb-color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--nvb-color-neutral-700);--nvb-select-option-hover-bg: var(--nvb-color-primary-050);--nvb-select-option-hover-color: var(--nvb-color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 14%, var(--nvb-color-neutral-000) );--nvb-select-option-selected-color: var(--nvb-color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-900) 10%, transparent);--nvb-select-option-radius: var(--nvb-radius-sm);--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.nvb-dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.nvb-dark){--nvb-select-menu-bg: color-mix(in oklch, var(--nvb-color-neutral-900) 82%, var(--nvb-color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--nvb-color-neutral-600) 70%, var(--nvb-color-neutral-700) );--nvb-select-option-color: var(--nvb-color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--nvb-color-primary-400) 22%, var(--nvb-color-neutral-900) );--nvb-select-option-hover-color: var(--nvb-color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 30%, var(--nvb-color-neutral-900) );--nvb-select-option-selected-color: var(--nvb-color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--nvb-color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--nvb-color-neutral-500) 36%,transparent);border-radius:var(--nvb-radius-full)}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--nvb-color-neutral-500) 54%,transparent)}.nvb-select__filter{position:sticky;top:0;z-index:1;padding:6px;border-bottom:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000)}.nvb-select__filter-input{width:100%;box-sizing:border-box;height:28px;padding:0 8px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm);font:inherit;font-size:12px;color:var(--nvb-color-neutral-800);background:var(--nvb-color-neutral-000);outline:none}.nvb-select__filter-input:focus{border-color:var(--nvb-color-primary-500)}.nvb-select__empty{margin:0;padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n'],dependencies:[{kind:"pipe",type:y,name:"uiT"}],changeDetection:c.ChangeDetectionStrategy.OnPush})};c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:x,decorators:[{type:B,args:[{selector:"nvb-select",changeDetection:T.OnPush,imports:[y],providers:[{provide:V,useExisting:I(()=>x),multi:true}],template:"<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\n  <select\n    #nativeSelect\n    class=\"nvb-select__native\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onNativeChange($event)\"\n  >\n    <ng-content />\n  </select>\n\n  <button\n    #triggerButton\n    type=\"button\"\n    class=\"nvb-select__trigger\"\n    [attr.data-testid]=\"testId ? testId + '-trigger' : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus($event)\"\n    (blur)=\"onTriggerBlur($event)\"\n  >\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\n      {{ selectedLabel() }}\n    </span>\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\n  </button>\n\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"nvb-select__menu\"\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\n      [id]=\"menuId\"\n      role=\"listbox\"\n      [style.left.px]=\"menuLeft()\"\n      [style.top.px]=\"menuTop()\"\n      [style.width.px]=\"menuWidth()\"\n      [style.maxHeight.px]=\"menuMaxHeight()\"\n    >\n      @if (isFilterVisible()) {\n        <div class=\"nvb-select__filter\">\n          <input\n            #filterInput\n            type=\"text\"\n            class=\"nvb-select__filter-input\"\n            [attr.data-testid]=\"testId ? testId + '-search' : null\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [value]=\"filterQuery()\"\n            [attr.placeholder]=\"\n              allowCustomValue\n                ? placeholder || ('select.typeOrPick' | uiT: 'Type or pick')\n                : ('select.filter' | uiT: 'Filter')\n            \"\n            (input)=\"onFilterInput($event)\"\n            (keydown)=\"onFilterKeydown($event)\"\n            (blur)=\"onFilterBlur()\"\n            (mousedown)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      @for (option of visibleOptions(); track option.value + ':' + $index; let i = $index) {\n        <button\n          #optionButton\n          type=\"button\"\n          class=\"nvb-select__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.data-testid]=\"optionTestId(option)\"\n          [disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"option.value === value\"\n          [class.nvb-select__option--selected]=\"option.value === value\"\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\n          (click)=\"onOptionClick(i, $event)\"\n        >\n          {{ option.label }}\n        </button>\n      } @empty {\n        <p class=\"nvb-select__empty\">\n          {{\n            allowCustomValue\n              ? ('select.pressEnterToUse' | uiT: 'Press Enter to use what you typed')\n              : ('select.noMatches' | uiT: 'No matches')\n          }}\n        </p>\n      }\n    </div>\n  }\n</div>\n",styles:['@charset "UTF-8";:host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--nvb-color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--nvb-color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--nvb-color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--nvb-color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--nvb-color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--nvb-color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--nvb-color-neutral-000);--nvb-select-menu-border: var(--nvb-color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--nvb-color-neutral-700);--nvb-select-option-hover-bg: var(--nvb-color-primary-050);--nvb-select-option-hover-color: var(--nvb-color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 14%, var(--nvb-color-neutral-000) );--nvb-select-option-selected-color: var(--nvb-color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-900) 10%, transparent);--nvb-select-option-radius: var(--nvb-radius-sm);--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.nvb-dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.nvb-dark){--nvb-select-menu-bg: color-mix(in oklch, var(--nvb-color-neutral-900) 82%, var(--nvb-color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--nvb-color-neutral-600) 70%, var(--nvb-color-neutral-700) );--nvb-select-option-color: var(--nvb-color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--nvb-color-primary-400) 22%, var(--nvb-color-neutral-900) );--nvb-select-option-hover-color: var(--nvb-color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 30%, var(--nvb-color-neutral-900) );--nvb-select-option-selected-color: var(--nvb-color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--nvb-color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--nvb-color-neutral-500) 36%,transparent);border-radius:var(--nvb-radius-full)}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--nvb-color-neutral-500) 54%,transparent)}.nvb-select__filter{position:sticky;top:0;z-index:1;padding:6px;border-bottom:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000)}.nvb-select__filter-input{width:100%;box-sizing:border-box;height:28px;padding:0 8px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm);font:inherit;font-size:12px;color:var(--nvb-color-neutral-800);background:var(--nvb-color-neutral-000);outline:none}.nvb-select__filter-input:focus{border-color:var(--nvb-color-primary-500)}.nvb-select__empty{margin:0;padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n']}]}],ctorParameters:()=>[{type:c.ElementRef}],propDecorators:{nativeSelectRef:[{type:p,args:["nativeSelect",{static:true}]}],triggerButtonRef:[{type:p,args:["triggerButton",{static:true}]}],menuRef:[{type:p,args:["menuRef"]}],filterInputRef:[{type:p,args:["filterInput"]}],optionButtonRefs:[{type:F,args:["optionButton"]}],value:[{type:d}],disabled:[{type:d}],required:[{type:d}],filterable:[{type:d}],filterThreshold:[{type:d}],allowCustomValue:[{type:d}],placeholder:[{type:d}],testId:[{type:d}],valueChange:[{type:b}],change:[{type:b}],focus:[{type:b}],blur:[{type:b}],onDocumentMouseDown:[{type:k,args:["document:mousedown",["$event"]]}],onDocumentEscape:[{type:k,args:["document:keydown.escape",["$event"]]}]}});export{x as t};

package/fesm2022/ngxviewbuilder-runtime-radio-element-CMnPn8dr.mjs

@@ -1 +0,0 @@
-import{t as b}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as m,d as h,g,in as c}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{ft as f,i as p,rt as x,t as u}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as i from"@angular/core";import{ChangeDetectionStrategy as y,Component as w,computed as v,inject as r,input as I,signal as l}from"@angular/core";var S=b({RadioElement:()=>s});var s=class d{model=I.required(...ngDevMode?[{debugName:"model"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(c.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);loadingPlaceholderItems=[0,1,2];dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);dataService=r(m);eventService=r(g);expressionService=r(h);elementActionService=r(x);visibleOptions=v(()=>{this.dataVersion();return(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))},...ngDevMode?[{debugName:"visibleOptions"}]:[]);dataSourceLoading=v(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){const e=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(e);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(c.isEditor())}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler)}selectOption(e){if(this.isInteractionLocked())return;this.model().value=e.value;this.model().setValue(this.model().value,"change");this.runActions("input",e);this.runActions("change",e)}onOptionFocus(e){if(this.isInteractionLocked())return;this.runActions("focus",e)}onOptionBlur(e){if(this.isInteractionLocked())return;this.runActions("blur",e)}resolveOptionInputId(e,n){return`${this.slugify(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"radio")}-option-${this.slugify(String(e?.value??n).trim()||String(n+1))}`}resolveOptionTestId(e,n){return`nvb-${p(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"radio")}-radio-${p(String(e?.value??n).trim()||String(n+1))}`}resolveOptionAriaLabel(e,n){const t=String(e?.label??"").trim();if(t)return t;return`Option ${n+1}`}isOptionVisible(e){const n=String(e?.visibleIf??"").trim();if(!n)return true;try{const t=n.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return true;const o=this.expressionService.applyContextToExpression(t,this.model());return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),o)}catch{return true}}passesOptionFilters(e){const n=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const t=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!n&&!t&&!o)return true;const a=this.dataService.getData()??{};return f([e],n,a,{valuePath:"value",filterIfEqual:t,filterIfNotEqual:o}).length>0}runActions(e,n){const t=this.model().value;const o=String(this.model().name??"").trim();const a={value:t,item:n??null,row:null};if(o)a[o]=t;this.elementActionService.runActions(this.model(),this.model().events??[],e,a)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return this.dataSourceLoading()||Boolean(e.disabled)||Boolean(e.readOnly)}slugify(e){return String(e??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:d,deps:[],target:i.ɵɵFactoryTarget.Component});static ɵcmp=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:d,isStandalone:true,selector:"radio-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:i,template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="radiogroup"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\n        <small class="nvb-element-title">\n          <span class="material-symbols-outlined">database</span>\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-dot"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading radio options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            [id]="resolveOptionInputId(option, optionIndex)"\n            type="radio"\n            class="nvb-control__radio-input"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="model().value === option.value"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__radio-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__radio-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-dot{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-full);background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:radio-choice-shimmer 1.35s ease-in-out infinite}@keyframes radio-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"],dependencies:[{kind:"component",type:u,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:i.ChangeDetectionStrategy.OnPush})};i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:s,decorators:[{type:w,args:[{selector:"radio-element",changeDetection:y.OnPush,imports:[u],template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="radiogroup"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\n        <small class="nvb-element-title">\n          <span class="material-symbols-outlined">database</span>\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-dot"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading radio options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            [id]="resolveOptionInputId(option, optionIndex)"\n            type="radio"\n            class="nvb-control__radio-input"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="model().value === option.value"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__radio-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__radio-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-dot{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-full);background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:radio-choice-shimmer 1.35s ease-in-out infinite}@keyframes radio-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"]}]}],propDecorators:{model:[{type:i.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{S as n,s as t};

package/fesm2022/ngxviewbuilder-runtime-select-element-CL95ygLj.mjs

@@ -1 +0,0 @@
-import{t as V}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as E,d as A,g as N,in as S,n as y,on as _,t as O,yt as z}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{a as P,dt as H,ft as B,ht as $,i as m,nt as W,o as k,r as F,rt as R,t as T}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import{t as q}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as C}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as G,Component as j,HostListener as h,ViewChild as g,computed as i,inject as d,input as U,signal as l}from"@angular/core";import*as K from"@angular/common";import{CommonModule as D,DOCUMENT as Y}from"@angular/common";import{FormsModule as L}from"@angular/forms";var Q=V({SelectElement:()=>f});var f=class w{dropdownTemplateScopeId=`nvb-select-template-${Math.random().toString(36).slice(2,11)}`;dropdownOptionsId=`nvb-select-options-${Math.random().toString(36).slice(2,11)}`;dropdownTemplateScopeSelector=`[data-nvb-template-scope="${this.dropdownTemplateScopeId}"]`;model=U.required(...ngDevMode?[{debugName:"model"}]:[]);tid=F(this.model,"nvb-select","select");dropdownContainer;selectButton;dropdownPanel;isOpen=l(false,...ngDevMode?[{debugName:"isOpen"}]:[]);searchTerm=l("",...ngDevMode?[{debugName:"searchTerm"}]:[]);selectedValue=l(null,...ngDevMode?[{debugName:"selectedValue"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(S.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);dropdownPosition=l("bottom",...ngDevMode?[{debugName:"dropdownPosition"}]:[]);dropdownMaxHeight=l(300,...ngDevMode?[{debugName:"dropdownMaxHeight"}]:[]);dropdownLeft=l(0,...ngDevMode?[{debugName:"dropdownLeft"}]:[]);dropdownTop=l(0,...ngDevMode?[{debugName:"dropdownTop"}]:[]);dropdownMinWidth=l(0,...ngDevMode?[{debugName:"dropdownMinWidth"}]:[]);useCompactStyle=l(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);documentRef=d(Y);dataService=d(E);eventService=d(N);expressionService=d(A);elementActionService=d(R);templateEngineService=d(W);markupSecurityService=d($);validatorService=d(H);dropdownCoordinatorService=d(q);uiTranslationService=d(_);dropdownId=`select-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;defaultDropdownHeight=300;minDropdownHeight=96;dropdownVerticalGap=4;dropdownBoundaryPadding=8;dropdownLayoutFrame=null;normalizedOptionTemplate=i(()=>this.normalizeOptionTemplate(this.templateEngineService.resolveTemplateContentByName(String(this.model().optionTemplateName??"").trim(),String(this.model().optionTemplate??"").trim())),...ngDevMode?[{debugName:"normalizedOptionTemplate"}]:[]);visibleOptions=i(()=>{this.dataVersion();return this.filterOptionsByVisibility(this.model().options||[])},...ngDevMode?[{debugName:"visibleOptions"}]:[]);usesGroupedOptions=i(()=>this.hasGroupedOptions(this.model().options||[]),...ngDevMode?[{debugName:"usesGroupedOptions"}]:[]);filteredOptions=i(()=>{const e=this.visibleOptions();const t=this.searchTerm().toLowerCase();if(!t)return e;if(this.usesGroupedOptions())return e.map(n=>({...n,items:n.items.filter(o=>o.label.toLowerCase().includes(t))})).filter(n=>n.items.length>0);return e.filter(n=>n.label.toLowerCase().includes(t))},...ngDevMode?[{debugName:"filteredOptions"}]:[]);hasCustomTemplate=i(()=>this.normalizedOptionTemplate()!==null,...ngDevMode?[{debugName:"hasCustomTemplate"}]:[]);customDropdownState=i(()=>{if(!this.hasCustomTemplate())return{html:null,error:null};const e=this.normalizedOptionTemplate();if(!e)return{html:null,error:null};const t=this.flattenCurrentOptions();if(t.length===0)return{html:`<div class="nvb-no-results">${this.uiTranslationService.translate("select.empty","No results found")}</div>`,error:null};try{const n=this.shouldRenderCollectionTemplate(e);let o=n?this.renderCollectionTemplate(e,t,this.selectedValue()):this.renderTemplate(e,t,this.selectedValue());if(n&&(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)))o=this.renderTemplate(e,t,this.selectedValue());o=this.sanitizeCustomDropdownHtml(o);o=this.hydrateSelectableOptionMarkup(o,t,this.selectedValue());if(this.isMarkupEffectivelyEmpty(o)||!this.hasSelectableOptionMarkup(o)||!this.hasMeaningfulOptionContent(o))o=this.renderDefaultDropdownHtml(t,this.selectedValue());return{html:o,error:null}}catch(n){const o=n instanceof Error?n.message:this.uiTranslationService.translate("select.templateError","Template render error");return{html:`<div class="nvb-no-results">${this.templateEngineService.escapeHtml(o)}</div>`,error:o}}},...ngDevMode?[{debugName:"customDropdownState"}]:[]);templateError=i(()=>this.customDropdownState().error,...ngDevMode?[{debugName:"templateError"}]:[]);customDropdownHtml=i(()=>this.customDropdownState().html,...ngDevMode?[{debugName:"customDropdownHtml"}]:[]);customDropdownCss=i(()=>{const e=this.normalizedOptionTemplate();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.dropdownTemplateScopeSelector)},...ngDevMode?[{debugName:"customDropdownCss"}]:[]);displayValue=i(()=>{const e=this.selectedValue();if(e===null||e===void 0||e==="")return this.uiTranslationService.translate("select.placeholder","Select...");const t=this.flattenAllOptions().find(n=>this.isSameValue(n.value,e));return t?t.label:this.uiTranslationService.translate("select.placeholder","Select...")},...ngDevMode?[{debugName:"displayValue"}]:[]);hasValue=i(()=>this.selectedValue()!==null&&this.selectedValue()!==void 0,...ngDevMode?[{debugName:"hasValue"}]:[]);dataSourceLoading=i(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){const e=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(e);if(this.model().dataSource)this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(S.isEditor());if(this.model().value!==null&&this.model().value!==void 0)this.selectedValue.set(this.model().value);if(this.model()?.parentElement&&this.model()?.parentElement instanceof z)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(t=>{if(!this.isOpen())return;if(t===this.dropdownId)return;this.closeDropdown()})}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId)}toggleDropdown(){if(this.isInteractionLocked()){this.closeDropdown();return}if(!this.isOpen()){this.openDropdown();return}this.closeDropdown()}calculateDropdownPosition(){if(!this.selectButton){this.dropdownPosition.set("bottom");this.dropdownMaxHeight.set(this.defaultDropdownHeight);this.dropdownLeft.set(0);this.dropdownTop.set(0);this.dropdownMinWidth.set(0);return}const e=this.selectButton.nativeElement;const t=e.getBoundingClientRect();const n=Math.max(this.documentRef.documentElement?.clientWidth??0,window.innerWidth??0);const o=Math.max(this.documentRef.documentElement?.clientHeight??0,window.innerHeight??0);const r=Math.max(Math.round(t.width),84);const a=this.dropdownBoundaryPadding;const c=Math.max(a,n-r-this.dropdownBoundaryPadding);const u=Math.min(Math.max(t.left,a),c);const v=Math.max(0,o-t.bottom-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const s=Math.max(0,t.top-this.dropdownBoundaryPadding-this.dropdownVerticalGap);const b=v<Math.min(this.defaultDropdownHeight,220)&&s>v;const I=b?s:v;const M=Math.min(this.defaultDropdownHeight,Math.max(this.minDropdownHeight,I));const x=P(e);this.dropdownPosition.set(b?"top":"bottom");this.dropdownMaxHeight.set(M);this.dropdownLeft.set(u-x.left);this.dropdownTop.set((b?t.top:t.bottom+this.dropdownVerticalGap)-x.top);this.dropdownMinWidth.set(r)}selectOption(e){if(this.isInteractionLocked())return;this.selectedValue.set(e);this.closeDropdown();this.model().setValue(e,"change");this.runActions("change",e)}clearSelection(e){e.stopPropagation();if(this.isInteractionLocked())return;this.selectedValue.set(null);this.searchTerm.set("");this.model().setValue(null,"change");this.validatorService.handleElementBlur(this.model());this.runActions("change",null)}clearSearch(e){e.stopPropagation();this.searchTerm.set("");this.scheduleDropdownPositionCalculation()}onSearchInput(e){if(this.isInteractionLocked())return;const t=e.target.value;this.searchTerm.set(t);this.scheduleDropdownPositionCalculation()}onTriggerFocus(){if(this.isInteractionLocked())return;this.runActions("focus")}onTriggerBlur(){if(this.isInteractionLocked())return;if(this.isOpen())return;this.validatorService.handleElementBlur(this.model());this.runActions("blur")}onTriggerKeydown(e){if(this.isInteractionLocked())return;switch(e.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":e.preventDefault();if(!this.isOpen()){this.openDropdown();return}return;case"Escape":if(!this.isOpen())return;e.preventDefault();this.closeDropdown(true);return;default:return}}onCustomOptionsClick(e){if(this.isInteractionLocked())return;e.preventDefault();e.stopPropagation();const t=this.resolveCustomOptionNode(e);if(!t)return;const n=this.resolveOptionValueFromIndex(t.getAttribute("data-option-index"));if(n.found){this.selectOption(n.value);return}const o=this.resolveOptionValueFromDomOrder(t);if(o.found){this.selectOption(o.value);return}const r=t.getAttribute("data-value");if(r===null)return;const a=this.resolveOptionValue(r);this.selectOption(a)}resolveOptionTestId(e,t,n){const o=m(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"select");const r=m(String(e??t).trim()||String(t+1));const a=m(String(n??"").trim());return a?`nvb-${o}-option-${a}-${r}`:`nvb-${o}-option-${r}`}resolveOptionAriaLabel(e,t){const n=String(e??"").trim();if(n)return n;return String(t??this.uiTranslationService.translate("select.optionFallback","Option"))}onDocumentClick(e){if(!this.isOpen())return;const t=this.dropdownContainer?.nativeElement;if(!t)return;const n=e.target;const o=typeof e.composedPath==="function"?e.composedPath():[];if(!((n?t.contains(n):false)||o.includes(t)))this.closeDropdown(true)}openDropdown(){this.calculateDropdownPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.scheduleDropdownPositionCalculation()}closeDropdown(e=false){this.isOpen.set(false);this.searchTerm.set("");this.cancelScheduledDropdownCalculation();this.dropdownCoordinatorService.requestClose(this.dropdownId);if(e){this.validatorService.handleElementBlur(this.model());this.runActions("blur")}}runActions(e,t){const n=t!==void 0?t:this.selectedValue();const o=String(this.model().name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,r)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;if(this.dataSourceLoading())return true;return Boolean(e.disabled)||Boolean(e.readOnly)}onDocumentScroll(){if(!this.isOpen())return;this.calculateDropdownPosition()}onWindowResize(){if(!this.isOpen())return;this.calculateDropdownPosition()}flattenCurrentOptions(){const e=this.filteredOptions();if(this.usesGroupedOptions()){const t=[];e.forEach(n=>{(n?.items??[]).forEach(o=>{t.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return t}return(e??[]).map(t=>({...t??{},label:String(t?.label??""),value:t?.value}))}flattenAllOptions(){const e=this.filterOptionsByVisibility(this.model().options??[]);if(this.usesGroupedOptions()){const t=[];e.forEach(n=>{(n?.items??[]).forEach(o=>{t.push({...o??{},label:String(o?.label??""),value:o?.value,groupLabel:String(n?.label??"").trim()||void 0})})});return t}return e.map(t=>({...t??{},label:String(t?.label??""),value:t?.value}))}renderTemplate(e,t,n){const o=e.toLowerCase();if(o.includes("<script")||o.includes("onerror=")||o.includes("onload="))throw new Error(this.uiTranslationService.translate("select.templateUnsupportedHtml","Template contains unsupported HTML."));return t.map((r,a)=>this.renderOptionTemplate(e,r,a,n)).join("")}renderCollectionTemplate(e,t,n){const o=t.map(r=>{const a=this.applyOptionTemplateAliases(r);return{...a,selected:this.isSameValue(a.value,n)}});return this.templateEngineService.renderTemplate(e,this.buildTemplateContext(o,n,{selectedItem:o.find(r=>this.isSameValue(r.value,n))??null}))}renderOptionTemplate(e,t,n,o){const r=this.applyOptionTemplateAliases(t);const a=String(t.value??"");const c=this.isSameValue(o,t.value);const u=c?" nvb-select-template-option--selected":"";const v=this.buildTemplateContext(this.flattenCurrentOptions(),o,{...r??{},option:r,item:r,row:r,label:r.label,value:r.value,index:n,groupLabel:r.groupLabel??null,selected:c,selectedClass:c?"selected":"",selectedValue:o});const s=this.templateEngineService.renderTemplate(e,v);const b=this.isMarkupEffectivelyEmpty(s)?this.templateEngineService.escapeHtml(String(r.label??"")):s;if(/data-value\s*=/.test(s))return s;return`<div class="nvb-select-template-option${u}" data-option-index="${n}" data-value="${this.escapeAttribute(a)}">${b}</div>`}buildTemplateContext(e,t,n={}){const o=e.map(a=>this.applyOptionTemplateAliases(a));const r={...this.dataService.getData()??{},model:this.model(),element:this.model(),field:this.model(),items:o,options:o,filteredOptions:o,selectedValue:t,value:t,...n};return this.templateEngineService.applyTemplateFieldMap(r,this.resolveOptionTemplateFieldMap())}resolveOptionTemplateFieldMap(){const e=this.model()["optionTemplateFieldMap"];return e&&typeof e==="object"&&!Array.isArray(e)?e:null}applyOptionTemplateAliases(e){const t=e??{};const n=t["label"];const o=t["value"];return{...t,label:String(n??""),value:o,display:t["display"]??n??"",key:t["key"]??o,text:t["text"]??n??"",title:t["title"]??n??""}}renderDefaultDropdownHtml(e,t){return e.map((n,o)=>{return`<div class="${this.isSameValue(n.value,t)?"nvb-select-fallback-option nvb-select-fallback-option--selected":"nvb-select-fallback-option"}" data-option-index="${o}" data-value="${this.escapeAttribute(String(n.value??""))}">${this.templateEngineService.escapeHtml(n.label)}</div>`}).join("")}isMarkupEffectivelyEmpty(e){return String(e??"").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<!--[\s\S]*?-->/g,"").trim().length===0}sanitizeCustomDropdownHtml(e){return this.markupSecurityService.sanitizeHtml(String(e??""))}hasSelectableOptionMarkup(e){return/data-value\s*=/.test(String(e??""))}hydrateSelectableOptionMarkup(e,t,n){const o=String(e??"").trim();if(!o||this.hasSelectableOptionMarkup(o))return o;const r=this.documentRef;if(!r||typeof r.createElement!=="function")return o;const a=r.createElement("div");a.innerHTML=o;const c=this.resolveTemplateOptionNodes(a,t.length);if(!c||c.length!==t.length)return o;c.forEach((u,v)=>{const s=t[v];const b=this.isSameValue(s?.value,n);u.setAttribute("data-option-index",String(v));u.setAttribute("data-value",String(s?.value??""));u.classList.add("nvb-select-template-option");if(b)u.classList.add("nvb-select-template-option--selected")});return a.innerHTML}resolveTemplateOptionNodes(e,t){const n=Array.from(e.children);if(n.length===t)return n;if(n.length===1){const o=Array.from(n[0].children);if(o.length===t)return o}return null}hasMeaningfulOptionContent(e){const t=String(e??"").trim();if(!t)return false;const n=this.documentRef;if(!n||typeof n.createElement!=="function")return t.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<[^>]+>/g,"").replace(/\s+/g,"").trim().length>0;const o=n.createElement("div");o.innerHTML=t;const r=Array.from(o.querySelectorAll("[data-value]"));if(r.length===0)return false;return r.some(a=>{if(String(a.textContent??"").replace(/\s+/g," ").trim().length>0)return true;return Boolean(a.querySelector("img,svg,video,canvas,nvb-icon,.nvb-icon-svg,[data-icon]"))})}resolveOptionValue(e){const t=this.flattenAllOptions().find(n=>String(n.value??"")===e);return t?t.value:e}resolveOptionValueFromIndex(e){const t=Number.parseInt(String(e??""),10);if(!Number.isInteger(t)||t<0)return{found:false,value:null};const n=this.flattenCurrentOptions();if(t>=n.length)return{found:false,value:null};return{found:true,value:n[t]?.value}}resolveOptionValueFromDomOrder(e){const t=e.closest(".nvb-options-container__custom");if(!t)return{found:false,value:null};const n=this.resolveRenderedOptionNodes(t);if(n.length===0)return{found:false,value:null};const o=n.findIndex(r=>r===e||r.contains(e));if(o<0)return{found:false,value:null};return this.resolveOptionValueFromIndex(String(o))}resolveCustomOptionNode(e){const t=e.currentTarget;if(!t)return null;const n=e.target;const o=n instanceof HTMLElement?n:n instanceof Node?n.parentElement:null;if(!o)return null;const r=o.closest("[data-option-index], [data-value]");if(r&&t.contains(r))return r;return this.resolveTopLevelOptionNode(t,o)}resolveRenderedOptionNodes(e){return Array.from(e.querySelectorAll("[data-option-index], [data-value], .nvb-select-template-option")).filter(t=>t instanceof HTMLElement).filter(t=>this.isTopLevelSelectableNode(e,t))}isTopLevelSelectableNode(e,t){let n=t.parentElement;while(n&&n!==e){if(this.isSelectableOptionNode(n))return false;n=n.parentElement}return true}isSelectableOptionNode(e){return e.hasAttribute("data-option-index")||e.hasAttribute("data-value")||e.classList.contains("nvb-select-template-option")}resolveTopLevelOptionNode(e,t){let n=t;while(n&&n.parentElement&&n.parentElement!==e)n=n.parentElement;if(!n||n.parentElement!==e)return null;return n}isSameValue(e,t){return String(e??"")===String(t??"")}escapeAttribute(e){return e.replaceAll("&","&amp;").replaceAll('"',"&quot;").replaceAll("<","&lt;").replaceAll(">","&gt;")}normalizeOptionTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();if(n==="null"||n==="undefined")return null;return t}shouldRenderCollectionTemplate(e){const t=String(e??"");return/@for\s*\(/.test(t)||/@(?:if|let|switch)\s*\([^)]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^)]*\)/.test(t)||/(?:\{\{|\{)\s*[^{}]*\b(?:items|options|filteredOptions|selectedItem|selectedItems)\b[^{}]*\s*(?:\}\}|\})/.test(t)}filterOptionsByVisibility(e){if(!Array.isArray(e))return[];if(this.hasGroupedOptions(e))return e.map(t=>{if(!this.isOptionVisible(t))return null;const n=(Array.isArray(t?.items)?t.items:[]).filter(o=>this.passesOptionFilters(o)&&this.isOptionVisible(o));if(n.length===0)return null;return{...t,items:n}}).filter(t=>t!==null);return e.filter(t=>this.passesOptionFilters(t)&&this.isOptionVisible(t))}hasGroupedOptions(e){return Array.isArray(e)&&e.some(t=>Array.isArray(t?.["items"]))}passesOptionFilters(e){const t=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const n=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!t&&!n&&!o)return true;const r=this.dataService.getData()??{};return B([e],t,r,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:o}).length>0}isOptionVisible(e){const t=String(e?.visibleIf??"").trim();if(!t)return true;try{const n=this.normalizeOptionCondition(t);return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),n)}catch{return true}}normalizeOptionCondition(e){const t=e.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return"";return this.expressionService.applyContextToExpression(t,this.model())}slugify(e){return String(e??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}scheduleDropdownPositionCalculation(){this.cancelScheduledDropdownCalculation();if(!this.isOpen())return;this.dropdownLayoutFrame=window.requestAnimationFrame(()=>{this.dropdownLayoutFrame=null;this.calculateDropdownPosition()})}cancelScheduledDropdownCalculation(){if(this.dropdownLayoutFrame===null)return;window.cancelAnimationFrame(this.dropdownLayoutFrame);this.dropdownLayoutFrame=null}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:w,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:w,isStandalone:true,selector:"select-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:click":"onDocumentClick($event)","document:scroll":"onDocumentScroll()","window:resize":"onWindowResize()"}},viewQueries:[{propertyName:"dropdownContainer",first:true,predicate:["dropdownContainer"],descendants:true},{propertyName:"selectButton",first:true,predicate:["selectButton"],descendants:true},{propertyName:"dropdownPanel",first:true,predicate:["dropdownPanel"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <nvb-icon name=\"database\"></nvb-icon>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-select-container\"\n      [class.nvb-select-container--open]=\"isOpen()\"\n      [class.nvb-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('select.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'select.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'select.clear' | uiT: 'Clear'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <nvb-icon name=\"close\"></nvb-icon>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <nvb-icon\n              name=\"keyboard_arrow_down\"\n              class=\"nvb-select-arrow\"\n              [class.nvb-open]=\"isOpen()\"\n            ></nvb-icon>\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (model().showSearch !== false) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('select.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'select.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'select.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'select.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label) {\n                <div class=\"nvb-option-group\">\n                  <div class=\"nvb-group-label\">{{ group.label }}</div>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"selectedValue() === item.value\"\n                      (click)=\"selectOption(item.value)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"selectedValue() === item.value\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      {{ item.label }}\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"selectedValue() === option.value\"\n                  (click)=\"selectOption(option.value)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"selectedValue() === option.value\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  {{ option.label }}\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'select.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-select-container{position:relative;width:100%;overflow:visible}.nvb-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:inline-flex;align-items:center;min-height:calc(var(--nvb-input-height) - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:block;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;display:flex;align-items:center;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option{cursor:pointer;display:block;min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));line-height:32px}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500}@keyframes nvb-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-select-loading-spin{to{transform:rotate(360deg)}}\n"],dependencies:[{kind:"ngmodule",type:D},{kind:"directive",type:K.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"ngmodule",type:L},{kind:"component",type:T,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:k,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"component",type:C,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:O,name:"dynamicText"},{kind:"pipe",type:y,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:f,decorators:[{type:j,args:[{selector:"select-element",changeDetection:G.OnPush,standalone:true,imports:[D,L,T,O,k,C,y],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\n    <div class=\"nvb-empty-element-wrapper\">\n      <div class=\"nvb-control__text-input nvb-empty-select-placeholder\"></div>\n      <small class=\"nvb-element-title\">\n        <nvb-icon name=\"database\"></nvb-icon>\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n      </small>\n    </div>\n  } @else {\n    <div\n      class=\"nvb-select-container\"\n      [class.nvb-select-container--open]=\"isOpen()\"\n      [class.nvb-select-container--loading]=\"dataSourceLoading()\"\n      #dropdownContainer\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n    >\n      <div\n        class=\"nvb-input-wrapper\"\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\n        [class.nvb-input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\n        [class.nvb-input-wrapper--loading]=\"dataSourceLoading()\"\n        #selectButton\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur()\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      >\n        <span\n          class=\"nvb-select-value\"\n          [class.nvb-select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\n        >\n          {{\n            dataSourceLoading()\n              ? ('select.loading' | uiT: 'Loading options...')\n              : displayValue()\n          }}\n        </span>\n        <div class=\"nvb-select-actions\">\n          @if (dataSourceLoading()) {\n            <span class=\"nvb-select-loading-spinner\" aria-hidden=\"true\"></span>\n          } @else if (hasValue()) {\n            <button\n              type=\"button\"\n              class=\"nvb-clear-button\"\n              (click)=\"clearSelection($event)\"\n              [attr.title]=\"'select.clear' | uiT: 'Clear'\"\n              [attr.aria-label]=\"'select.clear' | uiT: 'Clear'\"\n              [attr.data-testid]=\"tid('clear')\"\n            >\n              <nvb-icon name=\"close\"></nvb-icon>\n            </button>\n          }\n          @if (!dataSourceLoading()) {\n            <nvb-icon\n              name=\"keyboard_arrow_down\"\n              class=\"nvb-select-arrow\"\n              [class.nvb-open]=\"isOpen()\"\n            ></nvb-icon>\n          }\n        </div>\n      </div>\n\n      @if (isOpen() && !dataSourceLoading()) {\n        <div\n          class=\"nvb-dropdown\"\n          [class.nvb-dropdown-top]=\"dropdownPosition() === 'top'\"\n          #dropdownPanel\n          [style.--nvb-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\n          [style.left.px]=\"dropdownLeft()\"\n          [style.top.px]=\"dropdownTop()\"\n          [style.min-width.px]=\"dropdownMinWidth()\"\n        >\n          @if (customDropdownCss()) {\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\n          }\n          @if (model().showSearch !== false) {\n            <div class=\"nvb-search-container\">\n              <input\n                type=\"text\"\n                class=\"nvb-control__text-input\"\n                [placeholder]=\"\n                  model().placeholder\n                    ? (model().placeholder | dynamicText: model())\n                    : ('select.searchPlaceholder' | uiT: 'Search...')\n                \"\n                [value]=\"searchTerm()\"\n                (input)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                [attr.aria-label]=\"'select.searchPlaceholder' | uiT: 'Search...'\"\n                [attr.data-testid]=\"tid('search')\"\n              />\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-search-clear-button\"\n                  (click)=\"clearSearch($event)\"\n                  [attr.title]=\"'select.clearSearch' | uiT: 'Clear search'\"\n                  [attr.aria-label]=\"'select.clearSearch' | uiT: 'Clear search'\"\n                  [attr.data-testid]=\"tid('search-clear')\"\n                >\n                  x\n                </button>\n              }\n            </div>\n          }\n\n          <div\n            class=\"nvb-options-container\"\n            [id]=\"dropdownOptionsId\"\n            [attr.data-testid]=\"tid('options')\"\n            role=\"listbox\"\n          >\n            @if (hasCustomTemplate()) {\n              <div [attr.data-testid]=\"tid('custom-value')\"\n                class=\"nvb-options-container__custom\"\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\n                (click)=\"onCustomOptionsClick($event)\"\n                [innerHTML]=\"customDropdownHtml()\"\n              ></div>\n            } @else if (usesGroupedOptions()) {\n              @for (group of filteredOptions(); track group.label) {\n                <div class=\"nvb-option-group\">\n                  <div class=\"nvb-group-label\">{{ group.label }}</div>\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\n                    <div\n                      class=\"nvb-option\"\n                      [class.nvb-selected]=\"selectedValue() === item.value\"\n                      (click)=\"selectOption(item.value)\"\n                      role=\"option\"\n                      [attr.aria-selected]=\"selectedValue() === item.value\"\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\n                    >\n                      {{ item.label }}\n                    </div>\n                  }\n                </div>\n              }\n            } @else {\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\n                <div\n                  class=\"nvb-option\"\n                  [class.nvb-selected]=\"selectedValue() === option.value\"\n                  (click)=\"selectOption(option.value)\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"selectedValue() === option.value\"\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\n                >\n                  {{ option.label }}\n                </div>\n              }\n            }\n\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\n              <div class=\"nvb-no-results\">{{ 'select.empty' | uiT: 'No results found' }}</div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[".nvb-select-container{position:relative;width:100%;overflow:visible}.nvb-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-select-container--loading{cursor:progress}.nvb-select-value{flex:1;display:inline-flex;align-items:center;min-height:calc(var(--nvb-input-height) - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.nvb-select-value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.nvb-clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-select-arrow{display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:transform .2s;color:var(--nvb-color-neutral-500)}.nvb-select-arrow.nvb-open{transform:rotate(180deg)}.nvb-dropdown{--nvb-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--nvb-color-neutral-000) 92%,var(--nvb-color-neutral-050));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--nvb-radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.nvb-dropdown.nvb-dropdown-top{transform:translateY(calc(-100% - 4px))}.nvb-search-container{padding:0 0 4px;border-bottom:1px solid var(--nvb-color-neutral-200);background:transparent;position:relative}.nvb-search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--nvb-color-neutral-300);background-color:color-mix(in oklab,var(--nvb-color-neutral-000) 90%,var(--nvb-color-neutral-050));color:var(--nvb-color-neutral-800)}.nvb-search-container .nvb-control__text-input::placeholder{color:var(--nvb-color-neutral-500)}.nvb-search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--nvb-color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.nvb-search-clear-button:hover{background-color:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-options-container{overflow-y:auto;max-height:calc(var(--nvb-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.nvb-options-container__custom{display:block;min-height:1px}.nvb-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));cursor:pointer;display:flex;align-items:center;font-size:14px;line-height:20px;color:var(--nvb-color-neutral-800);transition:background-color .15s}.nvb-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}.nvb-option.nvb-selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500;box-shadow:none}.nvb-option-group .nvb-group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--nvb-color-neutral-200)}.nvb-option-group .nvb-group-label:first-child{border-top:none}.nvb-no-results{padding:12px;text-align:center;color:var(--nvb-color-neutral-500);font-size:14px}.nvb-input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.nvb-input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--nvb-color-neutral-300) 88%,var(--nvb-color-neutral-100));background:color-mix(in oklab,var(--nvb-color-neutral-100) 76%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--disabled .nvb-select-value,.nvb-input-wrapper--disabled .nvb-select-arrow,.nvb-input-wrapper--disabled .nvb-clear-button{color:var(--nvb-color-neutral-500)}.nvb-input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--nvb-color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));background-size:220% 100%;animation:nvb-select-loading-shimmer 1.35s ease-in-out infinite}.nvb-select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--nvb-color-neutral-400) 45%,transparent);border-top-color:var(--nvb-color-primary-500);border-radius:var(--nvb-radius-full);animation:nvb-select-loading-spin .8s linear infinite}.nvb-empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--nvb-color-neutral-100) 25%,var(--nvb-color-neutral-200) 50%,var(--nvb-color-neutral-100) 75%)}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option{cursor:pointer;display:block;min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));line-height:32px}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option:hover{background-color:color-mix(in oklab,var(--nvb-color-neutral-100) 78%,var(--nvb-color-neutral-000))}:host ::ng-deep .nvb-options-container__custom .nvb-select-fallback-option--selected{background-color:color-mix(in oklab,var(--nvb-color-primary-500) 18%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700);font-weight:500}@keyframes nvb-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-select-loading-spin{to{transform:rotate(360deg)}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],dropdownContainer:[{type:g,args:["dropdownContainer"]}],selectButton:[{type:g,args:["selectButton"]}],dropdownPanel:[{type:g,args:["dropdownPanel"]}],onDocumentClick:[{type:h,args:["document:click",["$event"]]}],onDocumentScroll:[{type:h,args:["document:scroll"]}],onWindowResize:[{type:h,args:["window:resize"]}]}});export{Q as n,f as t};