@ngxviewbuilder/runtime 0.12.1 → 0.12.2

package/fesm2022/{ngxviewbuilder-runtime-multi-select-element-DO_dk2mB.mjs → ngxviewbuilder-runtime-multi-select-element-5YHKOX69.mjs}

@@ -1 +1 @@
-import{t as V}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as y,d as _,g as M,n as k,on as E,sn as A,t as O,yt as z}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.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-BUzRnWUH.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(E);eventService=c(M);expressionService=c(_);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}))}showSearchBox(){return this.model()?.showSearch!==false&&this.flattenAllOptions().length>10}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 (showSearchBox()) {\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 (showSearchBox()) {\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};
+import{t as V}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as y,d as _,g as M,n as k,on as E,sn as A,t as O,yt as z}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.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-D0lfZvuW.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(E);eventService=c(M);expressionService=c(_);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}))}showSearchBox(){return this.model()?.showSearch!==false&&this.flattenAllOptions().length>10}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 (showSearchBox()) {\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 (showSearchBox()) {\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-BZouLH-5.mjs → ngxviewbuilder-runtime-number-element-MNO3T8kR.mjs}

@@ -1 +1 @@
-import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as h,g,on as v,t as d,yt as y}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as f,rt as b,t as m}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.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(v);localeFormatService=l(h);eventService=l(g);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};
+import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as h,g,on as v,t as d,yt as y}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as f,rt as b,t as m}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.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(v);localeFormatService=l(h);eventService=l(g);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-number-stepper-element-WzMSnzXR.mjs → ngxviewbuilder-runtime-number-stepper-element-Jl6DZNAb.mjs}

@@ -1 +1 @@
-import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as b,on as m}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as u,rt as v,t as d}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as h,ChangeDetectorRef as g,Component as y,Injector as _,computed as p,effect as x,inject as r,input as f,signal as w}from"@angular/core";var D=c({NumberStepperElement:()=>a});var a=class l{model=f.required(...ngDevMode?[{debugName:"model"}]:[]);tid=u(this.model,"nvb-number-stepper","number-stepper");displayValue=w(0,...ngDevMode?[{debugName:"displayValue"}]:[]);canDecrement=p(()=>{this.displayValue();return this.model().canDecrement()},...ngDevMode?[{debugName:"canDecrement"}]:[]);canIncrement=p(()=>{this.displayValue();return this.model().canIncrement()},...ngDevMode?[{debugName:"canIncrement"}]:[]);elementActionService=r(v);dataService=r(m);eventService=r(b);cdr=r(g);injector=r(_);onPropertyChangedHandler=t=>{const n=String(this.model()?.dataPath??"").trim();if(!n)return;if(String(t?.payload?.elementNameOrPath??"").trim()!==n)return;this.cdr.markForCheck()};ngOnInit(){this.syncDisplayValue();x(()=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=this.dataService.getValue(t);if(!Object.is(this.model().value,n))this.model().value=n;this.syncDisplayValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onDecrement(){this.model().decrement("change");this.syncDisplayValue();this.runActions("change",this.model().value)}onIncrement(){this.model().increment("change");this.syncDisplayValue();this.runActions("change",this.model().value)}syncDisplayValue(){this.displayValue.set(this.model().numericValue)}runActions(t,n){const o=n!==void 0?n:this.model().value;const i=String(this.model().name??"").trim();const s={value:o,item:null,row:null};if(i)s[i]=o;this.elementActionService.runActions(this.model(),this.model().events??[],t,s)}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:l,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:l,isStandalone:true,selector:"number-stepper-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-number-stepper\"\n    [class.nvb-number-stepper--disabled]=\"model().disabled\"\n    [attr.data-testid]=\"tid('root')\"\n  >\n    <button [attr.data-testid]=\"tid('decrement')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n      [disabled]=\"model().disabled || !canDecrement()\"\n      [attr.aria-label]=\"'Decrease value'\"\n      (click)=\"onDecrement()\"\n    >\n      <span class=\"material-symbols-outlined\">remove</span>\n    </button>\n\n    <span\n      class=\"nvb-number-stepper__value\"\n      role=\"spinbutton\"\n      [attr.aria-valuenow]=\"displayValue()\"\n      [attr.aria-valuemin]=\"model().min ?? null\"\n      [attr.aria-valuemax]=\"model().max ?? null\"\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n    >\n      {{ displayValue() }}\n    </span>\n\n    <button [attr.data-testid]=\"tid('increment')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n      [disabled]=\"model().disabled || !canIncrement()\"\n      [attr.aria-label]=\"'Increase value'\"\n      (click)=\"onIncrement()\"\n    >\n      <span class=\"material-symbols-outlined\">add</span>\n    </button>\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:a,decorators:[{type:y,args:[{selector:"number-stepper-element",changeDetection:h.OnPush,imports:[d],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-number-stepper\"\n    [class.nvb-number-stepper--disabled]=\"model().disabled\"\n    [attr.data-testid]=\"tid('root')\"\n  >\n    <button [attr.data-testid]=\"tid('decrement')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n      [disabled]=\"model().disabled || !canDecrement()\"\n      [attr.aria-label]=\"'Decrease value'\"\n      (click)=\"onDecrement()\"\n    >\n      <span class=\"material-symbols-outlined\">remove</span>\n    </button>\n\n    <span\n      class=\"nvb-number-stepper__value\"\n      role=\"spinbutton\"\n      [attr.aria-valuenow]=\"displayValue()\"\n      [attr.aria-valuemin]=\"model().min ?? null\"\n      [attr.aria-valuemax]=\"model().max ?? null\"\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n    >\n      {{ displayValue() }}\n    </span>\n\n    <button [attr.data-testid]=\"tid('increment')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n      [disabled]=\"model().disabled || !canIncrement()\"\n      [attr.aria-label]=\"'Increase value'\"\n      (click)=\"onIncrement()\"\n    >\n      <span class=\"material-symbols-outlined\">add</span>\n    </button>\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{D as n,a as t};
+import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as b,on as m}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as u,rt as v,t as d}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as h,ChangeDetectorRef as g,Component as y,Injector as _,computed as p,effect as x,inject as r,input as f,signal as w}from"@angular/core";var D=c({NumberStepperElement:()=>a});var a=class l{model=f.required(...ngDevMode?[{debugName:"model"}]:[]);tid=u(this.model,"nvb-number-stepper","number-stepper");displayValue=w(0,...ngDevMode?[{debugName:"displayValue"}]:[]);canDecrement=p(()=>{this.displayValue();return this.model().canDecrement()},...ngDevMode?[{debugName:"canDecrement"}]:[]);canIncrement=p(()=>{this.displayValue();return this.model().canIncrement()},...ngDevMode?[{debugName:"canIncrement"}]:[]);elementActionService=r(v);dataService=r(m);eventService=r(b);cdr=r(g);injector=r(_);onPropertyChangedHandler=t=>{const n=String(this.model()?.dataPath??"").trim();if(!n)return;if(String(t?.payload?.elementNameOrPath??"").trim()!==n)return;this.cdr.markForCheck()};ngOnInit(){this.syncDisplayValue();x(()=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=this.dataService.getValue(t);if(!Object.is(this.model().value,n))this.model().value=n;this.syncDisplayValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onDecrement(){this.model().decrement("change");this.syncDisplayValue();this.runActions("change",this.model().value)}onIncrement(){this.model().increment("change");this.syncDisplayValue();this.runActions("change",this.model().value)}syncDisplayValue(){this.displayValue.set(this.model().numericValue)}runActions(t,n){const o=n!==void 0?n:this.model().value;const i=String(this.model().name??"").trim();const s={value:o,item:null,row:null};if(i)s[i]=o;this.elementActionService.runActions(this.model(),this.model().events??[],t,s)}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:l,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:l,isStandalone:true,selector:"number-stepper-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-number-stepper\"\n    [class.nvb-number-stepper--disabled]=\"model().disabled\"\n    [attr.data-testid]=\"tid('root')\"\n  >\n    <button [attr.data-testid]=\"tid('decrement')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n      [disabled]=\"model().disabled || !canDecrement()\"\n      [attr.aria-label]=\"'Decrease value'\"\n      (click)=\"onDecrement()\"\n    >\n      <span class=\"material-symbols-outlined\">remove</span>\n    </button>\n\n    <span\n      class=\"nvb-number-stepper__value\"\n      role=\"spinbutton\"\n      [attr.aria-valuenow]=\"displayValue()\"\n      [attr.aria-valuemin]=\"model().min ?? null\"\n      [attr.aria-valuemax]=\"model().max ?? null\"\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n    >\n      {{ displayValue() }}\n    </span>\n\n    <button [attr.data-testid]=\"tid('increment')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n      [disabled]=\"model().disabled || !canIncrement()\"\n      [attr.aria-label]=\"'Increase value'\"\n      (click)=\"onIncrement()\"\n    >\n      <span class=\"material-symbols-outlined\">add</span>\n    </button>\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:a,decorators:[{type:y,args:[{selector:"number-stepper-element",changeDetection:h.OnPush,imports:[d],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-number-stepper\"\n    [class.nvb-number-stepper--disabled]=\"model().disabled\"\n    [attr.data-testid]=\"tid('root')\"\n  >\n    <button [attr.data-testid]=\"tid('decrement')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n      [disabled]=\"model().disabled || !canDecrement()\"\n      [attr.aria-label]=\"'Decrease value'\"\n      (click)=\"onDecrement()\"\n    >\n      <span class=\"material-symbols-outlined\">remove</span>\n    </button>\n\n    <span\n      class=\"nvb-number-stepper__value\"\n      role=\"spinbutton\"\n      [attr.aria-valuenow]=\"displayValue()\"\n      [attr.aria-valuemin]=\"model().min ?? null\"\n      [attr.aria-valuemax]=\"model().max ?? null\"\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n    >\n      {{ displayValue() }}\n    </span>\n\n    <button [attr.data-testid]=\"tid('increment')\"\n      type=\"button\"\n      class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n      [disabled]=\"model().disabled || !canIncrement()\"\n      [attr.aria-label]=\"'Increase value'\"\n      (click)=\"onIncrement()\"\n    >\n      <span class=\"material-symbols-outlined\">add</span>\n    </button>\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{D as n,a as t};