@ngxviewbuilder/runtime 0.12.1 → 0.12.3

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

@@ -1 +0,0 @@
-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};

package/fesm2022/ngxviewbuilder-runtime-number-element-BZouLH-5.mjs

@@ -1 +0,0 @@
-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};

package/fesm2022/ngxviewbuilder-runtime-number-stepper-element-WzMSnzXR.mjs

@@ -1 +0,0 @@
-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};

package/fesm2022/ngxviewbuilder-runtime-nvb-select-xpsQ0a-_.mjs

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

package/fesm2022/ngxviewbuilder-runtime-page-title-element-BgA2xImq.mjs

@@ -1 +0,0 @@
-import{t as d}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{t as r}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{o as p,r as g,rt as c,t as s}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import*as t from"@angular/core";import{ChangeDetectionStrategy as h,Component as v,computed as n,inject as b,input as u}from"@angular/core";import{NgClass as m}from"@angular/common";var x=d({PageTitleElement:()=>i});var i=class l{model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=g(this.model,"nvb-page-title","page-title");elementActionService=b(c);alignClass=n(()=>{const e=String(this.model()?.align??"left").trim().toLowerCase();if(e==="center")return"nvb-page-title--center";if(e==="right")return"nvb-page-title--right";return""},...ngDevMode?[{debugName:"alignClass"}]:[]);headingLevel=n(()=>{const e=String(this.model()?.level??"h2").trim().toLowerCase();if(e==="h1"||e==="h3"||e==="h4")return e;return"h2"},...ngDevMode?[{debugName:"headingLevel"}]:[]);iconName=n(()=>String(this.model()?.icon??"").trim(),...ngDevMode?[{debugName:"iconName"}]:[]);hasTitle=n(()=>String(this.model()?.title??"").trim().length>0,...ngDevMode?[{debugName:"hasTitle"}]:[]);hasSubtitle=n(()=>String(this.model()?.subtitle??"").trim().length>0,...ngDevMode?[{debugName:"hasSubtitle"}]:[]);onTitleClick(e){const a={value:this.model().title,item:null,row:null};const o=String(this.model().name??"").trim();if(o)a[o]=this.model().title;this.elementActionService.runActions(this.model(),this.model().events??[],"click",a);e.stopPropagation()}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:l,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:l,isStandalone:true,selector:"page-title-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:t,template:"<element-wrapper [model]=\"model()\">\n  <header\n    class=\"nvb-page-title\"\n    [ngClass]=\"alignClass()\"\n    [attr.data-testid]=\"tid('root')\"\n    (click)=\"onTitleClick($event)\"\n  >\n    @if (hasTitle() || iconName()) {\n      <div class=\"nvb-page-title__heading\">\n        @if (iconName()) {\n          <nvb-icon class=\"nvb-page-title__icon\" [name]=\"iconName()\"></nvb-icon>\n        }\n\n        @if (hasTitle()) {\n          @switch (headingLevel()) {\n            @case ('h1') {\n              <h1>{{ model().title | dynamicText: model() }}</h1>\n            }\n            @case ('h3') {\n              <h3>{{ model().title | dynamicText: model() }}</h3>\n            }\n            @case ('h4') {\n              <h4>{{ model().title | dynamicText: model() }}</h4>\n            }\n            @default {\n              <h2>{{ model().title | dynamicText: model() }}</h2>\n            }\n          }\n        }\n      </div>\n    }\n\n    @if (hasSubtitle()) {\n      <p class=\"nvb-page-title__subtitle\">{{ model().subtitle | dynamicText: model() }}</p>\n    }\n\n    @if (model().showDivider) {\n      <hr class=\"nvb-page-title__divider\" />\n    }\n  </header>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-page-title{width:100%;display:grid;gap:6px;color:var(--nvb-color-neutral-700)}.nvb-page-title__heading{display:inline-flex;align-items:center;gap:8px;min-width:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4,.nvb-page-title p{margin:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4{line-height:1.3;color:var(--nvb-color-neutral-800);word-break:break-word}.nvb-page-title h1{font-size:clamp(24px,3.6vw,36px)}.nvb-page-title h2{font-size:clamp(20px,2.9vw,30px)}.nvb-page-title h3{font-size:clamp(18px,2.4vw,24px)}.nvb-page-title h4{font-size:clamp(16px,2vw,20px)}.nvb-page-title__subtitle{color:var(--nvb-color-neutral-500);font-size:13px;line-height:1.45;white-space:pre-wrap}.nvb-page-title__icon{font-size:20px;color:var(--nvb-color-primary-600);flex-shrink:0}.nvb-page-title__divider{width:100%;border:none;border-top:1px solid var(--nvb-color-neutral-300);margin:2px 0 0}.nvb-page-title--center{text-align:center;justify-items:center}.nvb-page-title--right{text-align:right;justify-items:end}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:m,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:p,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:r,name:"dynamicText"}],changeDetection:t.ChangeDetectionStrategy.OnPush})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:i,decorators:[{type:v,args:[{selector:"page-title-element",changeDetection:h.OnPush,imports:[s,m,r,p],template:"<element-wrapper [model]=\"model()\">\n  <header\n    class=\"nvb-page-title\"\n    [ngClass]=\"alignClass()\"\n    [attr.data-testid]=\"tid('root')\"\n    (click)=\"onTitleClick($event)\"\n  >\n    @if (hasTitle() || iconName()) {\n      <div class=\"nvb-page-title__heading\">\n        @if (iconName()) {\n          <nvb-icon class=\"nvb-page-title__icon\" [name]=\"iconName()\"></nvb-icon>\n        }\n\n        @if (hasTitle()) {\n          @switch (headingLevel()) {\n            @case ('h1') {\n              <h1>{{ model().title | dynamicText: model() }}</h1>\n            }\n            @case ('h3') {\n              <h3>{{ model().title | dynamicText: model() }}</h3>\n            }\n            @case ('h4') {\n              <h4>{{ model().title | dynamicText: model() }}</h4>\n            }\n            @default {\n              <h2>{{ model().title | dynamicText: model() }}</h2>\n            }\n          }\n        }\n      </div>\n    }\n\n    @if (hasSubtitle()) {\n      <p class=\"nvb-page-title__subtitle\">{{ model().subtitle | dynamicText: model() }}</p>\n    }\n\n    @if (model().showDivider) {\n      <hr class=\"nvb-page-title__divider\" />\n    }\n  </header>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-page-title{width:100%;display:grid;gap:6px;color:var(--nvb-color-neutral-700)}.nvb-page-title__heading{display:inline-flex;align-items:center;gap:8px;min-width:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4,.nvb-page-title p{margin:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4{line-height:1.3;color:var(--nvb-color-neutral-800);word-break:break-word}.nvb-page-title h1{font-size:clamp(24px,3.6vw,36px)}.nvb-page-title h2{font-size:clamp(20px,2.9vw,30px)}.nvb-page-title h3{font-size:clamp(18px,2.4vw,24px)}.nvb-page-title h4{font-size:clamp(16px,2vw,20px)}.nvb-page-title__subtitle{color:var(--nvb-color-neutral-500);font-size:13px;line-height:1.45;white-space:pre-wrap}.nvb-page-title__icon{font-size:20px;color:var(--nvb-color-primary-600);flex-shrink:0}.nvb-page-title__divider{width:100%;border:none;border-top:1px solid var(--nvb-color-neutral-300);margin:2px 0 0}.nvb-page-title--center{text-align:center;justify-items:center}.nvb-page-title--right{text-align:right;justify-items:end}\n"]}]}],propDecorators:{model:[{type:t.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,i as t};

package/fesm2022/ngxviewbuilder-runtime-phone-input-element-wJDjqRGH.mjs

@@ -1 +0,0 @@
-import{t as h}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{St as v,Tt as b,g,t as u,wt as y,yt as f}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as C,rt as x,t as m}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import{t as p}from"./ngxviewbuilder-runtime-nvb-select-xpsQ0a-_.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as w,ChangeDetectorRef as I,Component as _,computed as o,inject as a,input as S,signal as c}from"@angular/core";var W=h({PhoneInputElement:()=>l});var l=class i{model=S.required(...ngDevMode?[{debugName:"model"}]:[]);tid=C(this.model,"nvb-phone-input","phone-input");useCompactStyle=c(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);selectedCountryCode=c("LT",...ngDevMode?[{debugName:"selectedCountryCode"}]:[]);allowedCountries=o(()=>y(this.model()?.allowedCountryCodes),...ngDevMode?[{debugName:"allowedCountries"}]:[]);maxLength=o(()=>{const e=Number(this.model()?.["maxlength"]);if(!Number.isFinite(e)||e<=0)return 0;return Math.floor(e)},...ngDevMode?[{debugName:"maxLength"}]:[]);showMaxLengthCounter=o(()=>{if(this.maxLength()<=0)return false;const e=this.model()?.["showMaxLengthCounter"];if(e===void 0||e===null)return true;return Boolean(e)},...ngDevMode?[{debugName:"showMaxLengthCounter"}]:[]);currentLength=o(()=>String(this.resolveNumberValue()??"").length,...ngDevMode?[{debugName:"currentLength"}]:[]);elementActionService=a(x);eventService=a(g);cdr=a(I);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 f)this.useCompactStyle.set(Boolean(this.model()?.parentElement["useCompactStyle"]));const e=this.model().value;const t=b(String(e?.["countryIso"]??this.model()?.defaultCountryCode??"LT"));this.selectedCountryCode.set(t.isoCode);this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}selectedCountryIso(){const e=String(this.selectedCountryCode()??"").trim().toUpperCase();const t=this.allowedCountries();if(t.some(n=>n.isoCode===e))return e;return t[0]?.isoCode??v[0].isoCode}resolveNumberValue(){return String(this.model().value?.["number"]??"").trim()}resolvePlaceholder(){return String(this.model().placeholder??"").trim()||"61234567"}onCountryChange(e){if(this.model().disabled||this.model().readOnly)return;const t=String(e.target?.value??"").trim();this.selectedCountryCode.set(t||this.selectedCountryIso());this.model().setValueFromParts(this.selectedCountryIso(),this.resolveNumberValue(),"change");this.runActions("change")}onInput(e){this.commitValue(e,"input")}onChange(e){this.commitValue(e,"change")}onBlur(e){this.commitValue(e,"blur")}onFocus(e){this.runActions("focus",e)}commitValue(e,t){if(this.model().disabled||this.model().readOnly)return;const n=e.target;this.model().setValueFromParts(this.selectedCountryIso(),n?.value??"",t);this.runActions(t,e)}runActions(e,t){const n=this.model().value;const d=String(this.model().name??"").trim();const s={value:n,item:null,row:null,countryIso:n?.["countryIso"]??null,countryCode:n?.["countryCode"]??null,number:n?.["number"]??""};if(d)s[d]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,s)}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:i,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:i,isStandalone:true,selector:"phone-input-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:r,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-phone\"\n    [class.nvb-phone--compact]=\"useCompactStyle()\"\n    [attr.data-testid]=\"tid('input-root')\"\n  >\n    <nvb-select\n      class=\"nvb-phone__country nvb-select--fit-content\"\n      [value]=\"selectedCountryIso()\"\n      [disabled]=\"model().disabled\"\n      [required]=\"model().required\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : 'Country code'\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.data-testid]=\"tid('country')\"\n      (change)=\"onCountryChange($event)\"\n    >\n      @for (country of allowedCountries(); track country.isoCode) {\n        <option [value]=\"country.isoCode\">{{ country.isoCode }} ({{ country.dialCode }})</option>\n      }\n    </nvb-select>\n\n    <input\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"tel\"\n      class=\"nvb-phone__number\"\n      [placeholder]=\"resolvePlaceholder() | dynamicText: model()\"\n      [disabled]=\"model().disabled\"\n      [readOnly]=\"model().readOnly\"\n      [attr.autocomplete]=\"model().autocomplete || 'tel'\"\n      [attr.inputmode]=\"'tel'\"\n      [attr.minlength]=\"model()['minlength'] ?? null\"\n      [attr.maxlength]=\"model()['maxlength'] ?? null\"\n      [attr.pattern]=\"model()['pattern'] ?? null\"\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      [value]=\"resolveNumberValue()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n    />\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-phone{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;width:100%;align-items:stretch}.nvb-phone--compact{grid-template-columns:max-content minmax(0,1fr);gap:8px}.nvb-phone__country{width:fit-content;min-width:0;max-width:112px;--nvb-select-fit-min-width: 84px}.nvb-phone__number{width:100%;min-width:0;min-height:var(--nvb-input-height, 34px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;padding:0 10px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-phone__number:focus-visible{outline:0;border-color:var(--nvb-color-primary-500);box-shadow:0 0 0 2px color-mix(in oklch,var(--nvb-color-primary-500) 28%,transparent)}.nvb-phone__number:disabled{cursor:not-allowed;opacity:.75}@media(max-width:640px){.nvb-phone{grid-template-columns:1fr}.nvb-phone__country{width:100%;max-width:none}}\n"],dependencies:[{kind:"component",type:m,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:p,selector:"nvb-select",inputs:["value","disabled","required","filterable","filterThreshold","allowCustomValue","placeholder","testId"],outputs:["valueChange","change","focus","blur"]},{kind:"pipe",type:u,name:"dynamicText"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:l,decorators:[{type:_,args:[{selector:"phone-input-element",changeDetection:w.OnPush,imports:[m,u,p],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-phone\"\n    [class.nvb-phone--compact]=\"useCompactStyle()\"\n    [attr.data-testid]=\"tid('input-root')\"\n  >\n    <nvb-select\n      class=\"nvb-phone__country nvb-select--fit-content\"\n      [value]=\"selectedCountryIso()\"\n      [disabled]=\"model().disabled\"\n      [required]=\"model().required\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : 'Country code'\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.data-testid]=\"tid('country')\"\n      (change)=\"onCountryChange($event)\"\n    >\n      @for (country of allowedCountries(); track country.isoCode) {\n        <option [value]=\"country.isoCode\">{{ country.isoCode }} ({{ country.dialCode }})</option>\n      }\n    </nvb-select>\n\n    <input\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"tel\"\n      class=\"nvb-phone__number\"\n      [placeholder]=\"resolvePlaceholder() | dynamicText: model()\"\n      [disabled]=\"model().disabled\"\n      [readOnly]=\"model().readOnly\"\n      [attr.autocomplete]=\"model().autocomplete || 'tel'\"\n      [attr.inputmode]=\"'tel'\"\n      [attr.minlength]=\"model()['minlength'] ?? null\"\n      [attr.maxlength]=\"model()['maxlength'] ?? null\"\n      [attr.pattern]=\"model()['pattern'] ?? null\"\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      [value]=\"resolveNumberValue()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n    />\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-phone{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;width:100%;align-items:stretch}.nvb-phone--compact{grid-template-columns:max-content minmax(0,1fr);gap:8px}.nvb-phone__country{width:fit-content;min-width:0;max-width:112px;--nvb-select-fit-min-width: 84px}.nvb-phone__number{width:100%;min-width:0;min-height:var(--nvb-input-height, 34px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;padding:0 10px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-phone__number:focus-visible{outline:0;border-color:var(--nvb-color-primary-500);box-shadow:0 0 0 2px color-mix(in oklch,var(--nvb-color-primary-500) 28%,transparent)}.nvb-phone__number:disabled{cursor:not-allowed;opacity:.75}@media(max-width:640px){.nvb-phone{grid-template-columns:1fr}.nvb-phone__country{width:100%;max-width:none}}\n"]}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{W as n,l as t};

package/fesm2022/ngxviewbuilder-runtime-progress-bar-element-Bdr0kdSH.mjs

@@ -1 +0,0 @@
-import{t as m}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as c,on as f,t as b}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{i as p,r as h,t as d}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as _,Component as x,Injector as k,computed as a,effect as y,inject as v,input as w,signal as n}from"@angular/core";import{NgClass as g}from"@angular/common";var I=m({ProgressBarElement:()=>o});var o=class l{model=w.required(...ngDevMode?[{debugName:"model"}]:[]);tid=h(this.model,"nvb-progress-bar","progress-bar");instanceToken=a(()=>p(this.model()?.dataPath)||p(this.model()?.name),...ngDevMode?[{debugName:"instanceToken"}]:[]);dataSourceLoaded=n(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=n(c.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);progressValue=n(0,...ngDevMode?[{debugName:"progressValue"}]:[]);progressMax=n(100,...ngDevMode?[{debugName:"progressMax"}]:[]);progressPercent=a(()=>{const r=this.model().resolveMin();const s=this.progressMax();const i=this.progressValue();const t=s-r;if(t<=0)return i>=s?100:0;const u=(i-r)/t*100;return Math.max(0,Math.min(100,u))},...ngDevMode?[{debugName:"progressPercent"}]:[]);shellClass=a(()=>({[`nvb-progress-bar--variant-${this.model().variant}`]:true,[`nvb-progress-bar--display-${this.model().displayType}`]:true,[`nvb-progress-bar--style-${this.model().styleType}`]:true}),...ngDevMode?[{debugName:"shellClass"}]:[]);isCircular=a(()=>this.model().displayType==="circular",...ngDevMode?[{debugName:"isCircular"}]:[]);trackAriaValueText=a(()=>{return`${this.formatNumber(this.progressValue())} of ${this.formatNumber(this.progressMax())} (${this.formatNumber(this.progressPercent())}%)`},...ngDevMode?[{debugName:"trackAriaValueText"}]:[]);displayValue=a(()=>{return`${this.formatNumber(this.progressValue())} / ${this.formatNumber(this.progressMax())}`},...ngDevMode?[{debugName:"displayValue"}]:[]);valueLabelText=a(()=>{const r=this.model().valueLabelMode;if(r==="value")return this.formatNumber(this.progressValue());if(r==="fraction")return this.displayValue();return`${this.formatNumber(this.progressPercent())}%`},...ngDevMode?[{debugName:"valueLabelText"}]:[]);circleCircumference=a(()=>2*Math.PI*54,...ngDevMode?[{debugName:"circleCircumference"}]:[]);circleDashOffset=a(()=>this.circleCircumference()*(1-this.progressPercent()/100),...ngDevMode?[{debugName:"circleDashOffset"}]:[]);dataService=v(f);injector=v(k);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.syncFromModel()};ngOnInit(){this.dataSourceLoaded.set(!this.model().dataSource||Boolean(this.model().dataSourceLoaded));this.isEditorView.set(c.isEditor());this.model().afterDataSourceLoad?.add(this.onDataSourceLoadedHandler);this.syncFromModel();y(()=>{const r=String(this.model()?.dataPath??"").trim();if(!r){this.syncFromModel();return}const s=this.dataService.getValue(r);if(s!==void 0&&!Object.is(this.model().value,s))this.model().value=s;this.syncFromModel()},{injector:this.injector})}ngOnDestroy(){this.model().afterDataSourceLoad?.remove(this.onDataSourceLoadedHandler)}syncFromModel(){const r=this.model().resolveProgressState();this.progressMax.set(r.max);this.progressValue.set(r.value)}formatNumber(r){if(!Number.isFinite(r))return"0";if(Number.isInteger(r))return String(r);return String(Number(r.toFixed(2))).replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}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.0.0",version:"22.2.1",type:l,isStandalone:true,selector:"progress-bar-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\" [showTextWrapperInput]=\"false\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class=\"nvb-progress-bar nvb-progress-bar--editor-placeholder\" [ngClass]=\"shellClass()\">\n        @if (isCircular()) {\n          <div class=\"nvb-progress-bar__circle-shell nvb-progress-bar__circle-shell--placeholder\">\n            <svg class=\"nvb-progress-bar__circle\" viewBox=\"0 0 128 128\" aria-hidden=\"true\">\n              <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n              <circle\n                class=\"nvb-progress-bar__circle-fill\"\n                cx=\"64\"\n                cy=\"64\"\n                r=\"54\"\n                [attr.stroke-dasharray]=\"circleCircumference()\"\n                [attr.stroke-dashoffset]=\"circleCircumference() * 0.58\"\n              ></circle>\n            </svg>\n            <span class=\"nvb-progress-bar__circle-value\">42</span>\n          </div>\n        } @else {\n          <div class=\"nvb-progress-bar__track\">\n            <div class=\"nvb-progress-bar__fill\" style=\"width: 42%\"></div>\n          </div>\n        }\n\n        <small class=\"nvb-progress-bar__source\">\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <div class=\"nvb-progress-bar nvb-progress-bar--loading\" aria-busy=\"true\" role=\"status\">\n        <div class=\"nvb-progress-bar__track\">\n          <div class=\"nvb-progress-bar__fill nvb-progress-bar__fill--loading\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    <div class=\"nvb-progress-bar\" [ngClass]=\"shellClass()\">\n      @if (model().label || (model().showValueLabel && !isCircular())) {\n        <div class=\"nvb-progress-bar__header\">\n          @if (model().label) {\n            <span\n              [id]=\"fieldWrapper.labelId()\"\n              class=\"nvb-progress-bar__label\"\n              [attr.data-testid]=\"instanceToken() ? 'nvb-label-' + instanceToken() : null\"\n            >\n              {{ model().label | dynamicText: model() }}\n            </span>\n          }\n\n          @if (model().showValueLabel && !isCircular()) {\n            <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__value\">\n              {{ valueLabelText() }}\n            </span>\n          }\n        </div>\n      }\n\n      @if (isCircular()) {\n        <div class=\"nvb-progress-bar__circle-shell\">\n          <svg\n            class=\"nvb-progress-bar__circle\"\n            [id]=\"fieldWrapper.controlId()\"\n            viewBox=\"0 0 128 128\"\n            role=\"progressbar\"\n            [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n            [attr.aria-describedby]=\"\n              fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n            \"\n            [attr.aria-valuemin]=\"model().resolveMin()\"\n            [attr.aria-valuemax]=\"progressMax()\"\n            [attr.aria-valuenow]=\"progressValue()\"\n            [attr.aria-valuetext]=\"trackAriaValueText()\"\n            [attr.data-testid]=\"tid('root')\"\n          >\n            <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n            <circle\n              class=\"nvb-progress-bar__circle-fill\"\n              cx=\"64\"\n              cy=\"64\"\n              r=\"54\"\n              [attr.stroke-dasharray]=\"circleCircumference()\"\n              [attr.stroke-dashoffset]=\"circleDashOffset()\"\n            ></circle>\n          </svg>\n\n          @if (model().showValueLabel) {\n            <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__circle-value\">\n              {{ valueLabelText() }}\n            </span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"nvb-progress-bar__track\"\n          [id]=\"fieldWrapper.controlId()\"\n          role=\"progressbar\"\n          [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n          [attr.aria-describedby]=\"\n            fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n          \"\n          [attr.aria-valuemin]=\"model().resolveMin()\"\n          [attr.aria-valuemax]=\"progressMax()\"\n          [attr.aria-valuenow]=\"progressValue()\"\n          [attr.aria-valuetext]=\"trackAriaValueText()\"\n          [attr.data-testid]=\"tid('root')\"\n        >\n          <div\n            class=\"nvb-progress-bar__fill\"\n            [style.width.%]=\"progressPercent()\"\n            [style.--nvb-progress-percent]=\"progressPercent()\"\n          ></div>\n        </div>\n      }\n\n      @if (model().description) {\n        <span\n          [id]=\"fieldWrapper.descriptionId()\"\n          class=\"nvb-progress-bar__description\"\n          [attr.data-testid]=\"instanceToken() ? 'nvb-description-' + instanceToken() : null\"\n        >\n          {{ model().description | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-progress-bar{--nvb-progress-fill: var(--nvb-color-primary-600);--nvb-progress-fill-strong: var(--nvb-color-primary-600);--nvb-progress-track: color-mix( in oklab, var(--nvb-color-neutral-200) 82%, var(--nvb-color-neutral-000) );--nvb-progress-track-border: color-mix(in oklab, var(--nvb-color-neutral-300) 70%, transparent);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}.nvb-progress-bar--variant-success{--nvb-progress-fill: var(--nvb-color-success-500);--nvb-progress-fill-strong: var(--nvb-color-success-600)}.nvb-progress-bar--variant-warning{--nvb-progress-fill: var(--nvb-color-warning-500);--nvb-progress-fill-strong: var(--nvb-color-warning-700)}.nvb-progress-bar--variant-risk{--nvb-progress-fill: var(--nvb-color-risk-500);--nvb-progress-fill-strong: var(--nvb-color-risk-600)}.nvb-progress-bar__track{position:relative;overflow:hidden;width:100%;min-width:0;height:12px;border-radius:var(--nvb-radius-full);background:var(--nvb-progress-track);border:1px solid var(--nvb-progress-track-border);box-shadow:inset 0 1px 2px #0f172a0f}.nvb-progress-bar__fill{position:relative;height:100%;max-width:100%;border-radius:inherit;background:var(--nvb-progress-fill-strong);transition:width .22s ease}.nvb-progress-bar__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.nvb-progress-bar__label{min-width:0;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__track{background:color-mix(in oklab,var(--nvb-progress-fill) 10%,var(--nvb-color-neutral-000));border-color:color-mix(in oklab,var(--nvb-progress-fill) 18%,var(--nvb-color-neutral-200))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__fill{background:color-mix(in oklab,var(--nvb-progress-fill) 76%,var(--nvb-color-neutral-000))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-striped .nvb-progress-bar__fill{background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--nvb-progress-fill-strong) 88%,white) 0 12px,var(--nvb-progress-fill) 12px 24px),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong));background-size:32px 32px,100% 100%;animation:nvb-progress-bar-stripes 1s linear infinite}.nvb-progress-bar--display-linear.nvb-progress-bar--style-segmented .nvb-progress-bar__fill{background:repeating-linear-gradient(90deg,var(--nvb-progress-fill) 0 calc(25% - 2px),color-mix(in oklab,var(--nvb-color-neutral-000) 86%,transparent) calc(25% - 2px) 25%),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong))}.nvb-progress-bar__value{flex:0 0 auto;text-align:right;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-800);font-variant-numeric:tabular-nums}.nvb-progress-bar__description{font-size:12px;line-height:16px;color:var(--nvb-color-neutral-500)}.nvb-progress-bar__circle-shell{position:relative;display:grid;place-items:center;width:min(172px,100%);aspect-ratio:1;align-self:flex-start}.nvb-progress-bar__circle{width:100%;height:100%;overflow:visible}.nvb-progress-bar__circle-track,.nvb-progress-bar__circle-fill{fill:none;stroke-width:10}.nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-color-neutral-200) 84%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-fill{stroke:var(--nvb-progress-fill-strong);stroke-linecap:round;transform:rotate(-90deg);transform-origin:64px 64px;transition:stroke-dashoffset .22s ease}.nvb-progress-bar--display-circular.nvb-progress-bar--style-soft .nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-progress-fill) 14%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-value{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;line-height:1;font-weight:500;color:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-progress-bar__circle-shell--placeholder{opacity:.9}.nvb-progress-bar__fill--loading{width:36%;background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 0%,var(--nvb-color-primary-500) 50%,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 100%);background-size:200% 100%;animation:nvb-progress-bar-loading 1.2s ease-in-out infinite}.nvb-progress-bar--editor-placeholder{flex-direction:column;align-items:stretch;gap:6px}.nvb-progress-bar__source{color:var(--nvb-color-neutral-500);font-size:12px;line-height:16px}.nvb-progress-bar--display-circular{width:fit-content;max-width:100%}@keyframes nvb-progress-bar-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes nvb-progress-bar-stripes{0%{background-position:0 0,0 0}to{background-position:32px 0,0 0}}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:g,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:b,name:"dynamicText"}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:o,decorators:[{type:x,args:[{selector:"progress-bar-element",changeDetection:_.OnPush,imports:[d,g,b],template:"<element-wrapper [model]=\"model()\" [showTextWrapperInput]=\"false\" #fieldWrapper=\"elementWrapper\">\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class=\"nvb-progress-bar nvb-progress-bar--editor-placeholder\" [ngClass]=\"shellClass()\">\n        @if (isCircular()) {\n          <div class=\"nvb-progress-bar__circle-shell nvb-progress-bar__circle-shell--placeholder\">\n            <svg class=\"nvb-progress-bar__circle\" viewBox=\"0 0 128 128\" aria-hidden=\"true\">\n              <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n              <circle\n                class=\"nvb-progress-bar__circle-fill\"\n                cx=\"64\"\n                cy=\"64\"\n                r=\"54\"\n                [attr.stroke-dasharray]=\"circleCircumference()\"\n                [attr.stroke-dashoffset]=\"circleCircumference() * 0.58\"\n              ></circle>\n            </svg>\n            <span class=\"nvb-progress-bar__circle-value\">42</span>\n          </div>\n        } @else {\n          <div class=\"nvb-progress-bar__track\">\n            <div class=\"nvb-progress-bar__fill\" style=\"width: 42%\"></div>\n          </div>\n        }\n\n        <small class=\"nvb-progress-bar__source\">\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <div class=\"nvb-progress-bar nvb-progress-bar--loading\" aria-busy=\"true\" role=\"status\">\n        <div class=\"nvb-progress-bar__track\">\n          <div class=\"nvb-progress-bar__fill nvb-progress-bar__fill--loading\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    <div class=\"nvb-progress-bar\" [ngClass]=\"shellClass()\">\n      @if (model().label || (model().showValueLabel && !isCircular())) {\n        <div class=\"nvb-progress-bar__header\">\n          @if (model().label) {\n            <span\n              [id]=\"fieldWrapper.labelId()\"\n              class=\"nvb-progress-bar__label\"\n              [attr.data-testid]=\"instanceToken() ? 'nvb-label-' + instanceToken() : null\"\n            >\n              {{ model().label | dynamicText: model() }}\n            </span>\n          }\n\n          @if (model().showValueLabel && !isCircular()) {\n            <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__value\">\n              {{ valueLabelText() }}\n            </span>\n          }\n        </div>\n      }\n\n      @if (isCircular()) {\n        <div class=\"nvb-progress-bar__circle-shell\">\n          <svg\n            class=\"nvb-progress-bar__circle\"\n            [id]=\"fieldWrapper.controlId()\"\n            viewBox=\"0 0 128 128\"\n            role=\"progressbar\"\n            [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n            [attr.aria-describedby]=\"\n              fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n            \"\n            [attr.aria-valuemin]=\"model().resolveMin()\"\n            [attr.aria-valuemax]=\"progressMax()\"\n            [attr.aria-valuenow]=\"progressValue()\"\n            [attr.aria-valuetext]=\"trackAriaValueText()\"\n            [attr.data-testid]=\"tid('root')\"\n          >\n            <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n            <circle\n              class=\"nvb-progress-bar__circle-fill\"\n              cx=\"64\"\n              cy=\"64\"\n              r=\"54\"\n              [attr.stroke-dasharray]=\"circleCircumference()\"\n              [attr.stroke-dashoffset]=\"circleDashOffset()\"\n            ></circle>\n          </svg>\n\n          @if (model().showValueLabel) {\n            <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__circle-value\">\n              {{ valueLabelText() }}\n            </span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"nvb-progress-bar__track\"\n          [id]=\"fieldWrapper.controlId()\"\n          role=\"progressbar\"\n          [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n          [attr.aria-describedby]=\"\n            fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n          \"\n          [attr.aria-valuemin]=\"model().resolveMin()\"\n          [attr.aria-valuemax]=\"progressMax()\"\n          [attr.aria-valuenow]=\"progressValue()\"\n          [attr.aria-valuetext]=\"trackAriaValueText()\"\n          [attr.data-testid]=\"tid('root')\"\n        >\n          <div\n            class=\"nvb-progress-bar__fill\"\n            [style.width.%]=\"progressPercent()\"\n            [style.--nvb-progress-percent]=\"progressPercent()\"\n          ></div>\n        </div>\n      }\n\n      @if (model().description) {\n        <span\n          [id]=\"fieldWrapper.descriptionId()\"\n          class=\"nvb-progress-bar__description\"\n          [attr.data-testid]=\"instanceToken() ? 'nvb-description-' + instanceToken() : null\"\n        >\n          {{ model().description | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-progress-bar{--nvb-progress-fill: var(--nvb-color-primary-600);--nvb-progress-fill-strong: var(--nvb-color-primary-600);--nvb-progress-track: color-mix( in oklab, var(--nvb-color-neutral-200) 82%, var(--nvb-color-neutral-000) );--nvb-progress-track-border: color-mix(in oklab, var(--nvb-color-neutral-300) 70%, transparent);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}.nvb-progress-bar--variant-success{--nvb-progress-fill: var(--nvb-color-success-500);--nvb-progress-fill-strong: var(--nvb-color-success-600)}.nvb-progress-bar--variant-warning{--nvb-progress-fill: var(--nvb-color-warning-500);--nvb-progress-fill-strong: var(--nvb-color-warning-700)}.nvb-progress-bar--variant-risk{--nvb-progress-fill: var(--nvb-color-risk-500);--nvb-progress-fill-strong: var(--nvb-color-risk-600)}.nvb-progress-bar__track{position:relative;overflow:hidden;width:100%;min-width:0;height:12px;border-radius:var(--nvb-radius-full);background:var(--nvb-progress-track);border:1px solid var(--nvb-progress-track-border);box-shadow:inset 0 1px 2px #0f172a0f}.nvb-progress-bar__fill{position:relative;height:100%;max-width:100%;border-radius:inherit;background:var(--nvb-progress-fill-strong);transition:width .22s ease}.nvb-progress-bar__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.nvb-progress-bar__label{min-width:0;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__track{background:color-mix(in oklab,var(--nvb-progress-fill) 10%,var(--nvb-color-neutral-000));border-color:color-mix(in oklab,var(--nvb-progress-fill) 18%,var(--nvb-color-neutral-200))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__fill{background:color-mix(in oklab,var(--nvb-progress-fill) 76%,var(--nvb-color-neutral-000))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-striped .nvb-progress-bar__fill{background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--nvb-progress-fill-strong) 88%,white) 0 12px,var(--nvb-progress-fill) 12px 24px),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong));background-size:32px 32px,100% 100%;animation:nvb-progress-bar-stripes 1s linear infinite}.nvb-progress-bar--display-linear.nvb-progress-bar--style-segmented .nvb-progress-bar__fill{background:repeating-linear-gradient(90deg,var(--nvb-progress-fill) 0 calc(25% - 2px),color-mix(in oklab,var(--nvb-color-neutral-000) 86%,transparent) calc(25% - 2px) 25%),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong))}.nvb-progress-bar__value{flex:0 0 auto;text-align:right;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-800);font-variant-numeric:tabular-nums}.nvb-progress-bar__description{font-size:12px;line-height:16px;color:var(--nvb-color-neutral-500)}.nvb-progress-bar__circle-shell{position:relative;display:grid;place-items:center;width:min(172px,100%);aspect-ratio:1;align-self:flex-start}.nvb-progress-bar__circle{width:100%;height:100%;overflow:visible}.nvb-progress-bar__circle-track,.nvb-progress-bar__circle-fill{fill:none;stroke-width:10}.nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-color-neutral-200) 84%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-fill{stroke:var(--nvb-progress-fill-strong);stroke-linecap:round;transform:rotate(-90deg);transform-origin:64px 64px;transition:stroke-dashoffset .22s ease}.nvb-progress-bar--display-circular.nvb-progress-bar--style-soft .nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-progress-fill) 14%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-value{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;line-height:1;font-weight:500;color:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-progress-bar__circle-shell--placeholder{opacity:.9}.nvb-progress-bar__fill--loading{width:36%;background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 0%,var(--nvb-color-primary-500) 50%,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 100%);background-size:200% 100%;animation:nvb-progress-bar-loading 1.2s ease-in-out infinite}.nvb-progress-bar--editor-placeholder{flex-direction:column;align-items:stretch;gap:6px}.nvb-progress-bar__source{color:var(--nvb-color-neutral-500);font-size:12px;line-height:16px}.nvb-progress-bar--display-circular{width:fit-content;max-width:100%}@keyframes nvb-progress-bar-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes nvb-progress-bar-stripes{0%{background-position:0 0,0 0}to{background-position:32px 0,0 0}}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{I as n,o as t};

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

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

package/fesm2022/ngxviewbuilder-runtime-router-outlet-element-DcIc0_OQ.mjs

@@ -1 +0,0 @@
-import{t as s}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as d,n as l}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as m,rt as v,t as i}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as p,Component as h,inject as b,input as g}from"@angular/core";import{RouterOutlet as u}from"@angular/router";var y=s({RouterOutletElement:()=>o});var o=class r{model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=m(this.model,"nvb-router-outlet","router-outlet");elementActionService=b(v);isEditor=d.isEditor();outletName(){const t=String(this.model()?.outletName??"").trim();return t.length>0?t:null}onActivate(t){this.runOutletActions("activateEvents",t)}onDeactivate(t){this.runOutletActions("deactivateEvents",t)}onAttach(t){this.runOutletActions("attachEvents",t)}onDetach(t){this.runOutletActions("detachEvents",t)}async runOutletActions(t,c){const n=this.model();const a=Array.isArray(n?.[t])?n[t]:[];if(a.length===0)return;await this.elementActionService.runActions(n,a,"click",{element:n,outletName:this.outletName(),component:c})}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:r,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:r,isStandalone:true,selector:"router-outlet-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-router-outlet\" [attr.data-testid]=\"tid('root')\">\n    @if (isEditor) {\n      <div class=\"nvb-router-outlet__placeholder\">\n        <div class=\"nvb-router-outlet__placeholder-title\">\n          {{ 'routerOutlet.placeholder' | uiT: 'Router outlet' }}\n        </div>\n        <div class=\"nvb-router-outlet__placeholder-hint\">\n          @if (outletName(); as name) {\n            {{ 'routerOutlet.namedHint' | uiT: 'Named outlet' }}: {{ name }}\n          } @else {\n            {{\n              'routerOutlet.primaryHint'\n                | uiT: 'Primary outlet  routed content renders here at runtime.'\n            }}\n          }\n        </div>\n      </div>\n    } @else if (outletName(); as name) {\n      <router-outlet\n        [name]=\"name\"\n        (activate)=\"onActivate($event)\"\n        (deactivate)=\"onDeactivate($event)\"\n        (attach)=\"onAttach($event)\"\n        (detach)=\"onDetach($event)\"\n      />\n    } @else {\n      <router-outlet\n        (activate)=\"onActivate($event)\"\n        (deactivate)=\"onDeactivate($event)\"\n        (attach)=\"onAttach($event)\"\n        (detach)=\"onDetach($event)\"\n      />\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;height:100%}.nvb-router-outlet{display:block;width:100%;height:100%;min-height:0}.nvb-router-outlet>*:not(router-outlet){display:block;width:100%;height:100%}.nvb-router-outlet__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:120px;height:100%;padding:16px;text-align:center;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:color-mix(in oklab,var(--nvb-color-neutral-100) 60%,var(--nvb-color-neutral-000))}.nvb-router-outlet__placeholder-title{font-size:13px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-router-outlet__placeholder-hint{font-size:12px;color:var(--nvb-color-neutral-700)}\n"],dependencies:[{kind:"component",type:i,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:u,selector:"router-outlet",inputs:["name","routerOutletData"],outputs:["activate","deactivate","attach","detach"],exportAs:["outlet"]},{kind:"pipe",type:l,name:"uiT"}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:o,decorators:[{type:h,args:[{selector:"router-outlet-element",changeDetection:p.OnPush,imports:[i,u,l],template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-router-outlet\" [attr.data-testid]=\"tid('root')\">\n    @if (isEditor) {\n      <div class=\"nvb-router-outlet__placeholder\">\n        <div class=\"nvb-router-outlet__placeholder-title\">\n          {{ 'routerOutlet.placeholder' | uiT: 'Router outlet' }}\n        </div>\n        <div class=\"nvb-router-outlet__placeholder-hint\">\n          @if (outletName(); as name) {\n            {{ 'routerOutlet.namedHint' | uiT: 'Named outlet' }}: {{ name }}\n          } @else {\n            {{\n              'routerOutlet.primaryHint'\n                | uiT: 'Primary outlet  routed content renders here at runtime.'\n            }}\n          }\n        </div>\n      </div>\n    } @else if (outletName(); as name) {\n      <router-outlet\n        [name]=\"name\"\n        (activate)=\"onActivate($event)\"\n        (deactivate)=\"onDeactivate($event)\"\n        (attach)=\"onAttach($event)\"\n        (detach)=\"onDetach($event)\"\n      />\n    } @else {\n      <router-outlet\n        (activate)=\"onActivate($event)\"\n        (deactivate)=\"onDeactivate($event)\"\n        (attach)=\"onAttach($event)\"\n        (detach)=\"onDetach($event)\"\n      />\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;height:100%}.nvb-router-outlet{display:block;width:100%;height:100%;min-height:0}.nvb-router-outlet>*:not(router-outlet){display:block;width:100%;height:100%}.nvb-router-outlet__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:120px;height:100%;padding:16px;text-align:center;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:color-mix(in oklab,var(--nvb-color-neutral-100) 60%,var(--nvb-color-neutral-000))}.nvb-router-outlet__placeholder-title{font-size:13px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-router-outlet__placeholder-hint{font-size:12px;color:var(--nvb-color-neutral-700)}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{y as n,o as t};

package/fesm2022/ngxviewbuilder-runtime-select-button-element-DM0If-wo.mjs

@@ -1 +0,0 @@
-import{t as f}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as v,d as x,g as _,on as y,t as u}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{ft as w,i as d,o as p,rt as k,t as m}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as S,Component as z,computed as g,inject as s,input as O,signal as l}from"@angular/core";import{NgStyle as h}from"@angular/common";var I=f({SelectButtonElement:()=>i});var i=class b{model=O.required(...ngDevMode?[{debugName:"model"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(v.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);loadingPlaceholderItems=[0,1,2];dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);dataService=s(y);eventService=s(_);expressionService=s(x);elementActionService=s(k);visibleOptions=g(()=>{this.dataVersion();return(this.model().options??[]).filter(t=>this.passesOptionFilters(t)&&this.isOptionVisible(t))},...ngDevMode?[{debugName:"visibleOptions"}]:[]);dataSourceLoading=g(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);styleVars(){const t=String(this.model()?.color??"").trim();const e=String(this.model()?.textColor??"").trim();const n=String(this.model()?.tone??"primary").trim().toLowerCase();const o={};if(t)o["--nvb-select-button-color"]=t;if(e)o["--nvb-select-button-text-color"]=e;o["--nvb-select-button-tone"]=n||"primary";return o}rootClass(){const t=String(this.model()?.variant??"buttons").trim().toLowerCase();const e=String(this.model()?.size??"normal").trim().toLowerCase();const n=String(this.model()?.orientation??"horizontal").trim().toLowerCase();return["nvb-select-button",t==="segmented"?"nvb-select-button--segmented":"nvb-select-button--buttons",`nvb-select-button--size-${e||"normal"}`,n==="vertical"?"nvb-select-button--vertical":"nvb-select-button--horizontal"].join(" ")}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);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(v.isEditor())}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler)}toggleOption(t){if(this.isInteractionLocked()||this.isOptionDisabled(t))return;const e=this.resolveNextValue(t);this.model().value=e;this.model().setValue(e,"change");this.runActions("input",t,e);this.runActions("change",t,e)}onOptionFocus(t){if(this.isInteractionLocked()||this.isOptionDisabled(t))return;this.runActions("focus",t)}onOptionBlur(t){if(this.isInteractionLocked()||this.isOptionDisabled(t))return;this.runActions("blur",t)}resolveOptionClass(t){const e=["nvb-select-button__option",`nvb-select-button__option--tone-${String(this.model()?.tone??"primary").trim().toLowerCase()||"primary"}`];e.push(String(this.model()?.variant??"buttons").trim().toLowerCase()==="segmented"?"nvb-select-button__option--variant-segmented":"nvb-select-button__option--variant-buttons");e.push(`nvb-select-button__option--${this.resolveSize()}`);e.push(this.isSelected(t)?"nvb-select-button__option--selected":"nvb-select-button__option--idle");if(this.resolveOptionIcon(t))e.push("nvb-select-button__option--with-icon");if(this.isOptionDisabled(t)||this.model().disabled||this.model().readOnly)e.push("nvb-select-button__option--disabled");return e.join(" ")}resolveOptionIcon(t){if(this.isSelected(t)&&this.model().showSelectedIcon)return"check";return String(t?.["icon"]??"").trim()}resolveOptionBadge(t){return String(t?.["badge"]??"").trim()}isSelected(t){const e=this.model().value;if(Array.isArray(e))return e.some(n=>this.isSameValue(n,t?.value));return this.isSameValue(e,t?.value)}resolveOptionAriaLabel(t,e){const n=String(t?.label??"").trim();if(n)return n;return`Option ${e+1}`}resolveOptionTestId(t,e){return`nvb-${d(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"select-button")}-select-button-${d(String(t?.value??e).trim()||String(e+1))}`}isOptionDisabled(t){const e=t?.["disabled"];if(typeof e==="string"){const n=e.trim().toLowerCase();return n==="true"||n==="1"||n==="yes"}return Boolean(e)}isOptionVisible(t){const e=String(t?.visibleIf??"").trim();if(!e)return true;try{const n=e.replace(/{/g,"").replace(/}/g,"").trim();if(!n)return true;const o=this.expressionService.applyContextToExpression(n,this.model());return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),o)}catch{return true}}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 a=this.dataService.getData()??{};return w([t],e,a,{valuePath:"value",filterIfEqual:n,filterIfNotEqual:o}).length>0}resolveNextValue(t){if(this.model().multiple){const e=Array.isArray(this.model().value)?[...this.model().value]:[];const n=e.findIndex(o=>this.isSameValue(o,t?.value));if(n>=0){e.splice(n,1);return e}e.push(t?.value);return e}if(this.model().allowEmpty&&this.isSelected(t))return null;return t?.value}runActions(t,e,n){const o=n===void 0?this.model().value:n;const a=String(this.model().name??"").trim();const c={value:o,item:e??null,row:null};if(a)c[a]=o;this.elementActionService.runActions(this.model(),this.model().events??[],t,c)}isInteractionLocked(){const t=this.model();if(!t)return false;if(Boolean(t["__pfInteractionLocked"]))return true;return this.dataSourceLoading()||Boolean(t.disabled)||Boolean(t.readOnly)}resolveSize(){const t=String(this.model()?.size??"normal").trim().toLowerCase();if(t==="small"||t==="large")return t;return"normal"}isSameValue(t,e){if(t===e)return true;if(t===null||t===void 0||e===null||e===void 0)return false;return String(t)===String(e)}slugify(t){return String(t??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:b,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:b,isStandalone:true,selector:"select-button-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:r,template:'<element-wrapper [model]="model()">\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <div class="nvb-select-button nvb-select-button--editor-placeholder">\n          @for (placeholder of loadingPlaceholderItems; track placeholder) {\n            <span class="nvb-select-button__skeleton"></span>\n          }\n        </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-select-button nvb-select-button--loading"\n        role="status"\n        aria-busy="true"\n        aria-live="polite"\n        [ngStyle]="styleVars()"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <span class="nvb-select-button__skeleton" aria-hidden="true"></span>\n        }\n        <span class="nvb-sr-only">Loading select button options...</span>\n      </div>\n    }\n  } @else {\n    <div [class]="rootClass()" role="group" [ngStyle]="styleVars()">\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <button\n          type="button"\n          [class]="resolveOptionClass(option)"\n          [disabled]="model().disabled || model().readOnly || isOptionDisabled(option)"\n          [attr.aria-label]="resolveOptionAriaLabel(option, optionIndex)"\n          [attr.aria-pressed]="isSelected(option)"\n          [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n          (click)="toggleOption(option)"\n          (focus)="onOptionFocus(option)"\n          (blur)="onOptionBlur(option)"\n        >\n          @if (resolveOptionIcon(option)) {\n            <nvb-icon class="nvb-select-button__icon" [name]="resolveOptionIcon(option)"></nvb-icon>\n          }\n          <span class="nvb-select-button__label">{{ option.label | dynamicText: model() }}</span>\n          @if (resolveOptionBadge(option)) {\n            <span class="nvb-select-button__badge">\n              {{ resolveOptionBadge(option) | dynamicText: model() }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  }\n</element-wrapper>\n',styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-select-button__option--tone-primary{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-primary-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-primary-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-neutral{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-neutral-700));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-neutral-900));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-select-button-color, var(--nvb-color-neutral-500))}.nvb-select-button__option--tone-success{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-success-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-success-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-info{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-info-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-info-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-warning{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-warning-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-warning-800));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 12%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-risk{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-risk-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-risk-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button--buttons{display:inline-flex;flex-wrap:nowrap;align-items:stretch;width:fit-content;max-width:100%}.nvb-select-button--buttons.nvb-select-button--vertical{flex-direction:column}.nvb-select-button--buttons .nvb-select-button__option{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--nvb-control-height, 36px);padding:0 14px;border:1px solid var(--nvb-color-neutral-300);border-radius:0;background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font-size:14px;font-weight:500;font-family:inherit;line-height:1;white-space:nowrap;cursor:pointer;z-index:0;transition:background-color .12s ease,border-color .12s ease,color .12s ease,z-index 0s}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option+.nvb-select-button__option{margin-left:-1px}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option+.nvb-select-button__option{margin-top:-1px}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child{border-radius:var(--nvb-radius-sm) 0 0 var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:last-child{border-radius:0 var(--nvb-radius-sm) var(--nvb-radius-sm) 0}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child:last-child{border-radius:var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child{border-radius:var(--nvb-radius-sm) var(--nvb-radius-sm) 0 0}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:last-child{border-radius:0 0 var(--nvb-radius-sm) var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child:last-child{border-radius:var(--nvb-radius-sm)}.nvb-select-button--buttons .nvb-select-button__option:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-400);z-index:1}.nvb-select-button--buttons .nvb-select-button__option:focus-visible{outline:0;z-index:2;box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-500) 18%, transparent))}.nvb-select-button--buttons .nvb-select-button__option--selected{background:var(--nvb-sb-accent-bg, color-mix(in oklab, var(--nvb-color-primary-500) 10%, white));border-color:var(--nvb-sb-accent-border, var(--nvb-color-primary-500));color:var(--nvb-sb-accent-fg, var(--nvb-color-primary-700));font-weight:600;z-index:1}.nvb-select-button--buttons .nvb-select-button__option--selected:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-sb-accent-bg, color-mix(in oklab, var(--nvb-color-primary-500) 10%, white)) 85%,var(--nvb-color-neutral-100))}.nvb-select-button--buttons .nvb-select-button__option:disabled,.nvb-select-button--buttons .nvb-select-button__option--disabled{opacity:.55;cursor:not-allowed}.nvb-select-button--size-small .nvb-select-button--buttons .nvb-select-button__option,.nvb-select-button--buttons.nvb-select-button--size-small .nvb-select-button__option{height:var(--nvb-control-height-sm, 28px);padding:0 10px;font-size:13px}.nvb-select-button--size-large .nvb-select-button--buttons .nvb-select-button__option,.nvb-select-button--buttons.nvb-select-button--size-large .nvb-select-button__option{height:44px;padding:0 18px;font-size:15px}.nvb-select-button--segmented{display:inline-flex;flex-wrap:nowrap;align-items:stretch;gap:2px;width:fit-content;max-width:100%;padding:3px;border-radius:var(--nvb-radius-sm);background:color-mix(in oklab,var(--nvb-color-neutral-100) 85%,var(--nvb-color-neutral-000));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 55%,transparent)}.nvb-select-button--segmented.nvb-select-button--vertical{flex-direction:column;border-radius:var(--nvb-radius-sm)}.nvb-select-button--segmented .nvb-select-button__option{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--nvb-control-height, 36px);padding:0 16px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.nvb-select-button--segmented.nvb-select-button--vertical .nvb-select-button__option{border-radius:var(--nvb-radius-sm)}.nvb-select-button--segmented .nvb-select-button__option:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-000) 60%,transparent);color:var(--nvb-color-neutral-800)}.nvb-select-button--segmented .nvb-select-button__option:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-500) 18%, transparent))}.nvb-select-button--segmented .nvb-select-button__option--selected{background:var(--nvb-sb-accent-bg, var(--nvb-color-neutral-000, #ffffff));color:var(--nvb-sb-accent-fg, var(--nvb-color-neutral-900));font-weight:600;box-shadow:inset 0 0 0 1px var(--nvb-sb-accent-border, transparent),0 1px 3px #0000001f,0 1px 2px #00000014}.nvb-select-button--segmented .nvb-select-button__option--selected:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-sb-accent-bg, var(--nvb-color-neutral-000, #ffffff)) 85%,var(--nvb-color-neutral-000, #ffffff))}.nvb-select-button--segmented .nvb-select-button__option:disabled,.nvb-select-button--segmented .nvb-select-button__option--disabled{opacity:.55;cursor:not-allowed}.nvb-select-button--segmented.nvb-select-button--size-small .nvb-select-button__option{min-height:var(--nvb-control-height-sm, 28px);padding:0 12px;font-size:13px}.nvb-select-button--segmented.nvb-select-button--size-large .nvb-select-button__option{min-height:44px;padding:0 20px;font-size:15px}.nvb-select-button__icon{font-size:18px;line-height:1;flex-shrink:0}.nvb-select-button__label{white-space:nowrap}.nvb-select-button__badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--nvb-radius-sm);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;background:color-mix(in oklab,var(--nvb-sb-accent, var(--nvb-color-primary-500)) 15%,var(--nvb-color-neutral-000, white));color:var(--nvb-sb-accent-fg, var(--nvb-color-primary-700))}.nvb-select-button__option--selected .nvb-select-button__badge{background:var(--nvb-sb-accent, var(--nvb-color-primary-500));color:var(--nvb-color-neutral-000, #ffffff)}.nvb-select-button--buttons.nvb-select-button--loading,.nvb-select-button--segmented.nvb-select-button--loading{width:100%;cursor:wait}.nvb-select-button__skeleton{width:108px;height:36px;border-radius:var(--nvb-radius-sm);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-select-button-shimmer 1.35s ease-in-out infinite;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-300) 58%,transparent)}.nvb-select-button--editor-placeholder .nvb-select-button__skeleton{opacity:.75;animation:none}@keyframes nvb-select-button-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}.nvb-element-title{color:var(--nvb-color-neutral-500);display:flex;align-items:center;gap:var(--nvb-space-2);font-size:12px;line-height:16px}.nvb-element-title span{font-size:18px}\n'],dependencies:[{kind:"component",type:m,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:h,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:p,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:u,name:"dynamicText"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:i,decorators:[{type:z,args:[{selector:"select-button-element",changeDetection:S.OnPush,imports:[m,u,h,p],template:'<element-wrapper [model]="model()">\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <div class="nvb-select-button nvb-select-button--editor-placeholder">\n          @for (placeholder of loadingPlaceholderItems; track placeholder) {\n            <span class="nvb-select-button__skeleton"></span>\n          }\n        </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-select-button nvb-select-button--loading"\n        role="status"\n        aria-busy="true"\n        aria-live="polite"\n        [ngStyle]="styleVars()"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <span class="nvb-select-button__skeleton" aria-hidden="true"></span>\n        }\n        <span class="nvb-sr-only">Loading select button options...</span>\n      </div>\n    }\n  } @else {\n    <div [class]="rootClass()" role="group" [ngStyle]="styleVars()">\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <button\n          type="button"\n          [class]="resolveOptionClass(option)"\n          [disabled]="model().disabled || model().readOnly || isOptionDisabled(option)"\n          [attr.aria-label]="resolveOptionAriaLabel(option, optionIndex)"\n          [attr.aria-pressed]="isSelected(option)"\n          [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n          (click)="toggleOption(option)"\n          (focus)="onOptionFocus(option)"\n          (blur)="onOptionBlur(option)"\n        >\n          @if (resolveOptionIcon(option)) {\n            <nvb-icon class="nvb-select-button__icon" [name]="resolveOptionIcon(option)"></nvb-icon>\n          }\n          <span class="nvb-select-button__label">{{ option.label | dynamicText: model() }}</span>\n          @if (resolveOptionBadge(option)) {\n            <span class="nvb-select-button__badge">\n              {{ resolveOptionBadge(option) | dynamicText: model() }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  }\n</element-wrapper>\n',styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-select-button__option--tone-primary{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-primary-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-primary-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-neutral{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-neutral-700));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-neutral-900));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-select-button-color, var(--nvb-color-neutral-500))}.nvb-select-button__option--tone-success{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-success-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-success-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-info{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-info-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-info-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-warning{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-warning-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-warning-800));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 12%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button__option--tone-risk{--nvb-sb-accent: var(--nvb-select-button-color, var(--nvb-color-risk-500));--nvb-sb-accent-fg: var(--nvb-select-button-text-color, var(--nvb-color-risk-700));--nvb-sb-accent-bg: var( --nvb-select-button-selected-bg, color-mix(in oklab, var(--nvb-sb-accent) 10%, var(--nvb-color-neutral-000, white)) );--nvb-sb-accent-border: var(--nvb-sb-accent)}.nvb-select-button--buttons{display:inline-flex;flex-wrap:nowrap;align-items:stretch;width:fit-content;max-width:100%}.nvb-select-button--buttons.nvb-select-button--vertical{flex-direction:column}.nvb-select-button--buttons .nvb-select-button__option{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--nvb-control-height, 36px);padding:0 14px;border:1px solid var(--nvb-color-neutral-300);border-radius:0;background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);font-size:14px;font-weight:500;font-family:inherit;line-height:1;white-space:nowrap;cursor:pointer;z-index:0;transition:background-color .12s ease,border-color .12s ease,color .12s ease,z-index 0s}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option+.nvb-select-button__option{margin-left:-1px}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option+.nvb-select-button__option{margin-top:-1px}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child{border-radius:var(--nvb-radius-sm) 0 0 var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:last-child{border-radius:0 var(--nvb-radius-sm) var(--nvb-radius-sm) 0}.nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child:last-child{border-radius:var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child{border-radius:var(--nvb-radius-sm) var(--nvb-radius-sm) 0 0}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:last-child{border-radius:0 0 var(--nvb-radius-sm) var(--nvb-radius-sm)}.nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child:last-child{border-radius:var(--nvb-radius-sm)}.nvb-select-button--buttons .nvb-select-button__option:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-400);z-index:1}.nvb-select-button--buttons .nvb-select-button__option:focus-visible{outline:0;z-index:2;box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-500) 18%, transparent))}.nvb-select-button--buttons .nvb-select-button__option--selected{background:var(--nvb-sb-accent-bg, color-mix(in oklab, var(--nvb-color-primary-500) 10%, white));border-color:var(--nvb-sb-accent-border, var(--nvb-color-primary-500));color:var(--nvb-sb-accent-fg, var(--nvb-color-primary-700));font-weight:600;z-index:1}.nvb-select-button--buttons .nvb-select-button__option--selected:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-sb-accent-bg, color-mix(in oklab, var(--nvb-color-primary-500) 10%, white)) 85%,var(--nvb-color-neutral-100))}.nvb-select-button--buttons .nvb-select-button__option:disabled,.nvb-select-button--buttons .nvb-select-button__option--disabled{opacity:.55;cursor:not-allowed}.nvb-select-button--size-small .nvb-select-button--buttons .nvb-select-button__option,.nvb-select-button--buttons.nvb-select-button--size-small .nvb-select-button__option{height:var(--nvb-control-height-sm, 28px);padding:0 10px;font-size:13px}.nvb-select-button--size-large .nvb-select-button--buttons .nvb-select-button__option,.nvb-select-button--buttons.nvb-select-button--size-large .nvb-select-button__option{height:44px;padding:0 18px;font-size:15px}.nvb-select-button--segmented{display:inline-flex;flex-wrap:nowrap;align-items:stretch;gap:2px;width:fit-content;max-width:100%;padding:3px;border-radius:var(--nvb-radius-sm);background:color-mix(in oklab,var(--nvb-color-neutral-100) 85%,var(--nvb-color-neutral-000));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 55%,transparent)}.nvb-select-button--segmented.nvb-select-button--vertical{flex-direction:column;border-radius:var(--nvb-radius-sm)}.nvb-select-button--segmented .nvb-select-button__option{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--nvb-control-height, 36px);padding:0 16px;border:0;border-radius:var(--nvb-radius-sm);background:transparent;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.nvb-select-button--segmented.nvb-select-button--vertical .nvb-select-button__option{border-radius:var(--nvb-radius-sm)}.nvb-select-button--segmented .nvb-select-button__option:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-000) 60%,transparent);color:var(--nvb-color-neutral-800)}.nvb-select-button--segmented .nvb-select-button__option:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--nvb-color-primary-500) 18%, transparent))}.nvb-select-button--segmented .nvb-select-button__option--selected{background:var(--nvb-sb-accent-bg, var(--nvb-color-neutral-000, #ffffff));color:var(--nvb-sb-accent-fg, var(--nvb-color-neutral-900));font-weight:600;box-shadow:inset 0 0 0 1px var(--nvb-sb-accent-border, transparent),0 1px 3px #0000001f,0 1px 2px #00000014}.nvb-select-button--segmented .nvb-select-button__option--selected:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-sb-accent-bg, var(--nvb-color-neutral-000, #ffffff)) 85%,var(--nvb-color-neutral-000, #ffffff))}.nvb-select-button--segmented .nvb-select-button__option:disabled,.nvb-select-button--segmented .nvb-select-button__option--disabled{opacity:.55;cursor:not-allowed}.nvb-select-button--segmented.nvb-select-button--size-small .nvb-select-button__option{min-height:var(--nvb-control-height-sm, 28px);padding:0 12px;font-size:13px}.nvb-select-button--segmented.nvb-select-button--size-large .nvb-select-button__option{min-height:44px;padding:0 20px;font-size:15px}.nvb-select-button__icon{font-size:18px;line-height:1;flex-shrink:0}.nvb-select-button__label{white-space:nowrap}.nvb-select-button__badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--nvb-radius-sm);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;background:color-mix(in oklab,var(--nvb-sb-accent, var(--nvb-color-primary-500)) 15%,var(--nvb-color-neutral-000, white));color:var(--nvb-sb-accent-fg, var(--nvb-color-primary-700))}.nvb-select-button__option--selected .nvb-select-button__badge{background:var(--nvb-sb-accent, var(--nvb-color-primary-500));color:var(--nvb-color-neutral-000, #ffffff)}.nvb-select-button--buttons.nvb-select-button--loading,.nvb-select-button--segmented.nvb-select-button--loading{width:100%;cursor:wait}.nvb-select-button__skeleton{width:108px;height:36px;border-radius:var(--nvb-radius-sm);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-select-button-shimmer 1.35s ease-in-out infinite;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-300) 58%,transparent)}.nvb-select-button--editor-placeholder .nvb-select-button__skeleton{opacity:.75;animation:none}@keyframes nvb-select-button-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}.nvb-element-title{color:var(--nvb-color-neutral-500);display:flex;align-items:center;gap:var(--nvb-space-2);font-size:12px;line-height:16px}.nvb-element-title span{font-size:18px}\n']}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{I as n,i as t};