@ngxviewbuilder/runtime 0.12.2 → 0.12.4

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

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

package/fesm2022/ngxviewbuilder-runtime-signature-pad-element-BxZMh4-H.mjs

@@ -1 +0,0 @@
-import{t as p}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as v,on as u}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as h,rt as m,t as l}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as g,ChangeDetectorRef as b,Component as f,Injector as _,ViewChild as y,effect as w,inject as s,input as x,signal as k}from"@angular/core";var E=p({SignaturePadElement:()=>i});var i=class o{canvasRef;model=x.required(...ngDevMode?[{debugName:"model"}]:[]);tid=h(this.model,"nvb-signature-pad","signature-pad");isEmpty=k(true,...ngDevMode?[{debugName:"isEmpty"}]:[]);ctx=null;drawing=false;lastX=0;lastY=0;injector=s(_);dataService=s(u);elementActionService=s(m);eventService=s(v);cdr=s(b);onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){w(()=>{const e=String(this.model()?.dataPath??"").trim();if(!e)return;const t=this.dataService.getValue(e);if(t!==this.model().value){this.model().value=t;this.loadFromValue(String(t??""))}},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngAfterViewInit(){this.initCanvas();const e=String(this.model()?.value??"").trim();if(e)this.loadFromValue(e)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler);const e=this.canvasRef?.nativeElement;if(e){e.removeEventListener("mousedown",this.onMouseDown);e.removeEventListener("mousemove",this.onMouseMove);e.removeEventListener("mouseup",this.onMouseUp);e.removeEventListener("mouseleave",this.onMouseUp);e.removeEventListener("touchstart",this.onTouchStart);e.removeEventListener("touchmove",this.onTouchMove);e.removeEventListener("touchend",this.onTouchEnd)}}onClear(e){e.preventDefault();if(this.isLocked())return;this.clearCanvas();this.isEmpty.set(true);this.commitValue("")}isLocked(){const e=this.model();return Boolean(e?.disabled)||Boolean(e?.readOnly)||Boolean(e["__pfInteractionLocked"])}initCanvas(){const e=this.canvasRef?.nativeElement;if(!e)return;e.width=e.offsetWidth||400;e.height=Number(this.model()?.canvasHeight??200);this.ctx=e.getContext("2d");this.fillBackground();e.addEventListener("mousedown",this.onMouseDown);e.addEventListener("mousemove",this.onMouseMove);e.addEventListener("mouseup",this.onMouseUp);e.addEventListener("mouseleave",this.onMouseUp);e.addEventListener("touchstart",this.onTouchStart,{passive:false});e.addEventListener("touchmove",this.onTouchMove,{passive:false});e.addEventListener("touchend",this.onTouchEnd)}fillBackground(){const e=this.canvasRef?.nativeElement;const t=this.ctx;if(!e||!t)return;t.fillStyle=String(this.model()?.backgroundColor??"#ffffff");t.fillRect(0,0,e.width,e.height)}clearCanvas(){const e=this.canvasRef?.nativeElement;const t=this.ctx;if(!e||!t)return;t.clearRect(0,0,e.width,e.height);this.fillBackground()}loadFromValue(e){if(!e.startsWith("data:"))return;const t=this.canvasRef?.nativeElement;const n=this.ctx;if(!t||!n)return;const a=new Image;a.onload=()=>{n.clearRect(0,0,t.width,t.height);n.drawImage(a,0,0);this.isEmpty.set(false)};a.src=e}startDraw(e,t){if(this.isLocked())return;this.drawing=true;this.lastX=e;this.lastY=t;const n=this.ctx;if(!n)return;n.beginPath();n.arc(e,t,Number(this.model()?.strokeWidth??2)/2,0,Math.PI*2);n.fillStyle=String(this.model()?.strokeColor??"#000000");n.fill();this.isEmpty.set(false)}moveDraw(e,t){if(!this.drawing||this.isLocked())return;const n=this.ctx;if(!n)return;n.beginPath();n.moveTo(this.lastX,this.lastY);n.lineTo(e,t);n.strokeStyle=String(this.model()?.strokeColor??"#000000");n.lineWidth=Number(this.model()?.strokeWidth??2);n.lineCap="round";n.lineJoin="round";n.stroke();this.lastX=e;this.lastY=t}endDraw(){if(!this.drawing)return;this.drawing=false;const e=this.canvasRef?.nativeElement;if(!e)return;const t=String(this.model()?.exportFormat??"png").toLowerCase()==="jpeg"?"image/jpeg":"image/png";const n=e.toDataURL(t);this.commitValue(n)}commitValue(e){this.model().value=e;const t=String(this.model().dataPath??"").trim();if(t)this.dataService.setValue(t,e);const n={value:e,item:null,row:null};const a=String(this.model().name??"").trim();if(a)n[a]=e;this.elementActionService.runActions(this.model(),this.model().events??[],"change",n)}getCanvasPos(e,t){const n=this.canvasRef?.nativeElement;if(!n)return{x:0,y:0};const a=n.getBoundingClientRect();const d=n.width/a.width;const c=n.height/a.height;return{x:(e-a.left)*d,y:(t-a.top)*c}}onMouseDown=e=>{e.preventDefault();const t=this.getCanvasPos(e.clientX,e.clientY);this.startDraw(t.x,t.y)};onMouseMove=e=>{const t=this.getCanvasPos(e.clientX,e.clientY);this.moveDraw(t.x,t.y)};onMouseUp=()=>{this.endDraw()};onTouchStart=e=>{e.preventDefault();const t=e.touches[0];if(!t)return;const n=this.getCanvasPos(t.clientX,t.clientY);this.startDraw(n.x,n.y)};onTouchMove=e=>{e.preventDefault();const t=e.touches[0];if(!t)return;const n=this.getCanvasPos(t.clientX,t.clientY);this.moveDraw(n.x,n.y)};onTouchEnd=()=>{this.endDraw()};static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:o,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:o,isStandalone:true,selector:"signature-pad-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},viewQueries:[{propertyName:"canvasRef",first:true,predicate:["canvas"],descendants:true}],ngImport:r,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-signature-pad\"\n    [class.nvb-signature-pad--disabled]=\"model().disabled\"\n    [class.nvb-signature-pad--readonly]=\"model().readOnly\"\n  >\n    <div class=\"nvb-signature-pad__canvas-wrapper\">\n      <canvas\n        #canvas\n        class=\"nvb-signature-pad__canvas\"\n        [style.height.px]=\"model().canvasHeight\"\n        [attr.aria-label]=\"model().label || 'Signature pad'\"\n        [attr.role]=\"'img'\"\n        [attr.data-testid]=\"tid('root')\"\n      ></canvas>\n\n      @if (model().disabled || model().readOnly) {\n        <div class=\"nvb-signature-pad__overlay\" aria-hidden=\"true\"></div>\n      }\n    </div>\n\n    <div class=\"nvb-signature-pad__footer\">\n      <span class=\"nvb-signature-pad__hint\">\n        @if (isEmpty()) {\n          Sign above\n        }\n      </span>\n      @if (!model().disabled && !model().readOnly) {\n        <button\n          type=\"button\"\n          class=\"nvb-signature-pad__clear\"\n          [disabled]=\"isEmpty()\"\n          [attr.aria-label]=\"model().clearLabel || 'Clear signature'\"\n          [attr.data-testid]=\"tid('clear')\"\n          (click)=\"onClear($event)\"\n        >\n          <span class=\"material-symbols-outlined\" aria-hidden=\"true\">backspace</span>\n          {{ model().clearLabel || 'Clear' }}\n        </button>\n      }\n    </div>\n  </div>\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-signature-pad{display:flex;flex-direction:column;gap:8px;width:100%}.nvb-signature-pad__canvas-wrapper{position:relative;width:100%;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);overflow:hidden;background:var(--nvb-color-neutral-000);cursor:crosshair;transition:border-color .16s ease}.nvb-signature-pad__canvas-wrapper:hover:not(.nvb-signature-pad--disabled .nvb-signature-pad__canvas-wrapper){border-color:var(--nvb-color-neutral-400)}.nvb-signature-pad--disabled .nvb-signature-pad__canvas-wrapper,.nvb-signature-pad--readonly .nvb-signature-pad__canvas-wrapper{cursor:default;background:var(--nvb-color-neutral-050, #f8fafc)}.nvb-signature-pad__canvas{display:block;width:100%;height:200px;touch-action:none;user-select:none;-webkit-user-select:none}.nvb-signature-pad__overlay{position:absolute;inset:0;background:transparent;cursor:not-allowed;z-index:1}.nvb-signature-pad__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.nvb-signature-pad__hint{font-size:12px;color:var(--nvb-color-neutral-400);font-style:italic;min-height:1em}.nvb-signature-pad__clear{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:transparent;color:var(--nvb-color-neutral-600);font-size:12px;font-family:inherit;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-signature-pad__clear span{font-size:14px}.nvb-signature-pad__clear:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-error-500, #ef4444) 8%,transparent);border-color:var(--nvb-color-error-500, #ef4444);color:var(--nvb-color-error-700, #b91c1c)}.nvb-signature-pad__clear:disabled{opacity:.4;cursor:not-allowed}.nvb-signature-pad--disabled{opacity:.6}\n'],dependencies:[{kind:"component",type:l,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:i,decorators:[{type:f,args:[{selector:"signature-pad-element",changeDetection:g.OnPush,imports:[l],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-signature-pad\"\n    [class.nvb-signature-pad--disabled]=\"model().disabled\"\n    [class.nvb-signature-pad--readonly]=\"model().readOnly\"\n  >\n    <div class=\"nvb-signature-pad__canvas-wrapper\">\n      <canvas\n        #canvas\n        class=\"nvb-signature-pad__canvas\"\n        [style.height.px]=\"model().canvasHeight\"\n        [attr.aria-label]=\"model().label || 'Signature pad'\"\n        [attr.role]=\"'img'\"\n        [attr.data-testid]=\"tid('root')\"\n      ></canvas>\n\n      @if (model().disabled || model().readOnly) {\n        <div class=\"nvb-signature-pad__overlay\" aria-hidden=\"true\"></div>\n      }\n    </div>\n\n    <div class=\"nvb-signature-pad__footer\">\n      <span class=\"nvb-signature-pad__hint\">\n        @if (isEmpty()) {\n          Sign above\n        }\n      </span>\n      @if (!model().disabled && !model().readOnly) {\n        <button\n          type=\"button\"\n          class=\"nvb-signature-pad__clear\"\n          [disabled]=\"isEmpty()\"\n          [attr.aria-label]=\"model().clearLabel || 'Clear signature'\"\n          [attr.data-testid]=\"tid('clear')\"\n          (click)=\"onClear($event)\"\n        >\n          <span class=\"material-symbols-outlined\" aria-hidden=\"true\">backspace</span>\n          {{ model().clearLabel || 'Clear' }}\n        </button>\n      }\n    </div>\n  </div>\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-signature-pad{display:flex;flex-direction:column;gap:8px;width:100%}.nvb-signature-pad__canvas-wrapper{position:relative;width:100%;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);overflow:hidden;background:var(--nvb-color-neutral-000);cursor:crosshair;transition:border-color .16s ease}.nvb-signature-pad__canvas-wrapper:hover:not(.nvb-signature-pad--disabled .nvb-signature-pad__canvas-wrapper){border-color:var(--nvb-color-neutral-400)}.nvb-signature-pad--disabled .nvb-signature-pad__canvas-wrapper,.nvb-signature-pad--readonly .nvb-signature-pad__canvas-wrapper{cursor:default;background:var(--nvb-color-neutral-050, #f8fafc)}.nvb-signature-pad__canvas{display:block;width:100%;height:200px;touch-action:none;user-select:none;-webkit-user-select:none}.nvb-signature-pad__overlay{position:absolute;inset:0;background:transparent;cursor:not-allowed;z-index:1}.nvb-signature-pad__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.nvb-signature-pad__hint{font-size:12px;color:var(--nvb-color-neutral-400);font-style:italic;min-height:1em}.nvb-signature-pad__clear{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:transparent;color:var(--nvb-color-neutral-600);font-size:12px;font-family:inherit;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.nvb-signature-pad__clear span{font-size:14px}.nvb-signature-pad__clear:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-error-500, #ef4444) 8%,transparent);border-color:var(--nvb-color-error-500, #ef4444);color:var(--nvb-color-error-700, #b91c1c)}.nvb-signature-pad__clear:disabled{opacity:.4;cursor:not-allowed}.nvb-signature-pad--disabled{opacity:.6}\n']}]}],propDecorators:{canvasRef:[{type:y,args:["canvas"]}],model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{E as n,i as t};

package/fesm2022/ngxviewbuilder-runtime-single-checkbox-element-DZiHDP6i.mjs

@@ -1 +0,0 @@
-import{t as h}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as m,on as b,t as s}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as p,rt as g,t as d}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as t from"@angular/core";import{ChangeDetectionStrategy as u,ChangeDetectorRef as v,Component as k,Injector as x,effect as y,inject as o,input as f,signal as _}from"@angular/core";var S=h({SingleCheckboxElement:()=>l});var l=class i{model=f.required(...ngDevMode?[{debugName:"model"}]:[]);tid=p(this.model,"nvb-single-checkbox","single-checkbox");checked=_(false,...ngDevMode?[{debugName:"checked"}]:[]);elementActionService=o(g);dataService=o(b);eventService=o(m);cdr=o(v);injector=o(x);onPropertyChangedHandler=e=>{const n=String(this.model()?.dataPath??"").trim();if(!n)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==n)return;this.cdr.markForCheck()};ngOnInit(){this.syncCheckedState();y(()=>{const e=String(this.model()?.dataPath??"").trim();if(!e)return;const n=this.dataService.getValue(e);if(!Object.is(this.model().value,n))this.model().value=n;this.syncCheckedState()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onToggle(e){const n=e.target;if(!n||this.isInteractionLocked())return;this.model().setValue(Boolean(n.checked),"change");this.syncCheckedState();this.runActions("input",this.model().value);this.runActions("change",this.model().value)}onFocus(){this.runActions("focus",this.model().value)}onBlur(){this.runActions("blur",this.model().value)}checkboxLabel(){const e=String(this.model().checkboxLabel??"").trim();if(e)return e;return String(this.model().label??"").trim()||"Selected"}runActions(e,n){const a=n!==void 0?n:this.model().value;const r=String(this.model().name??"").trim();const c={value:a,item:null,row:null};if(r)c[r]=a;this.elementActionService.runActions(this.model(),this.model().events??[],e,c)}syncCheckedState(){this.checked.set(this.model().isChecked())}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:i,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:i,isStandalone:true,selector:"single-checkbox-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:t,template:"<element-wrapper [model]=\"model()\">\n  <label class=\"nvb-single-checkbox\" [class.nvb-single-checkbox--disabled]=\"model().disabled\">\n    <input\n      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\n      type=\"checkbox\"\n      [attr.id]=\"model().name ? model().name + '-single-checkbox' : null\"\n      [attr.name]=\"model().name || null\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-label]=\"checkboxLabel() | dynamicText: model()\"\n      [checked]=\"checked()\"\n      [disabled]=\"model().disabled\"\n      (change)=\"onToggle($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n    <span class=\"nvb-single-checkbox__label\">\n      {{ checkboxLabel() | dynamicText: model() }}\n      @if (model().required) {\n        <span class=\"nvb-single-checkbox__required\">*</span>\n      }\n    </span>\n  </label>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-single-checkbox{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:var(--nvb-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-single-checkbox--disabled{cursor:not-allowed;opacity:.65}.nvb-single-checkbox__input{width:16px;height:16px;margin:0}.nvb-single-checkbox__label{font-size:13px;line-height:20px;color:var(--nvb-color-neutral-700)}.nvb-single-checkbox__required{color:var(--nvb-color-risk-600)}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"pipe",type:s,name:"dynamicText"}],changeDetection:t.ChangeDetectionStrategy.OnPush})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:l,decorators:[{type:k,args:[{selector:"single-checkbox-element",changeDetection:u.OnPush,imports:[d,s],template:"<element-wrapper [model]=\"model()\">\n  <label class=\"nvb-single-checkbox\" [class.nvb-single-checkbox--disabled]=\"model().disabled\">\n    <input\n      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\n      type=\"checkbox\"\n      [attr.id]=\"model().name ? model().name + '-single-checkbox' : null\"\n      [attr.name]=\"model().name || null\"\n      [attr.data-testid]=\"tid('root')\"\n      [attr.aria-label]=\"checkboxLabel() | dynamicText: model()\"\n      [checked]=\"checked()\"\n      [disabled]=\"model().disabled\"\n      (change)=\"onToggle($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n    <span class=\"nvb-single-checkbox__label\">\n      {{ checkboxLabel() | dynamicText: model() }}\n      @if (model().required) {\n        <span class=\"nvb-single-checkbox__required\">*</span>\n      }\n    </span>\n  </label>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-single-checkbox{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:var(--nvb-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-single-checkbox--disabled{cursor:not-allowed;opacity:.65}.nvb-single-checkbox__input{width:16px;height:16px;margin:0}.nvb-single-checkbox__label{font-size:13px;line-height:20px;color:var(--nvb-color-neutral-700)}.nvb-single-checkbox__required{color:var(--nvb-color-risk-600)}\n"]}]}],propDecorators:{model:[{type:t.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{S as n,l as t};

package/fesm2022/ngxviewbuilder-runtime-slider-element-NBbgW-1w.mjs

@@ -1 +0,0 @@
-import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{g as m,on as b,yt as v}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as h,rt as g,t as d}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as x,ChangeDetectorRef as f,Component as y,Injector as k,effect as _,inject as i,input as w,signal as p}from"@angular/core";import{NgClass as u}from"@angular/common";var V=c({SliderElement:()=>o});var o=class s{model=w.required(...ngDevMode?[{debugName:"model"}]:[]);tid=h(this.model,"nvb-slider","slider");sliderValue=p(0,...ngDevMode?[{debugName:"sliderValue"}]:[]);useCompactStyle=p(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);elementActionService=i(g);dataService=i(b);eventService=i(m);cdr=i(f);injector=i(k);onPropertyChangedHandler=r=>{const e=String(this.model()?.dataPath??"").trim();if(!e)return;if(String(r?.payload?.elementNameOrPath??"").trim()!==e)return;this.cdr.markForCheck()};ngOnInit(){if(this.model()?.parentElement&&this.model()?.parentElement instanceof v)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.syncFromModelValue();_(()=>{const r=String(this.model()?.dataPath??"").trim();if(!r)return;const e=this.dataService.getValue(r);if(!Object.is(this.model().value,e))this.model().value=e;this.syncFromModelValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onInput(r){if(this.model().disabled||this.model().readOnly){this.syncFromModelValue();return}const e=this.readEventValue(r);if(e===null)return;this.sliderValue.set(e);this.model().setValueFromNumber(e,"input");this.runActions("input",e)}onChange(r){if(this.model().disabled||this.model().readOnly){this.syncFromModelValue();return}const e=this.readEventValue(r);if(e===null)return;this.sliderValue.set(e);this.model().setValueFromNumber(e,"change");this.runActions("change",e)}onFocus(){this.runActions("focus",this.sliderValue())}onBlur(){this.runActions("blur",this.sliderValue())}displayValue(){return String(this.sliderValue())}runActions(r,e){const n=e!==void 0?e:this.sliderValue();const t=String(this.model().name??"").trim();const l={value:n,item:null,row:null};if(t)l[t]=n;this.elementActionService.runActions(this.model(),this.model().events??[],r,l)}readEventValue(r){const e=r.target;if(!e)return null;const n=Number(e.value);if(!Number.isFinite(n))return null;return n}syncFromModelValue(){const r=this.model().resolveMin();const e=this.model().resolveMax();const n=this.model().value;const t=typeof n==="number"?n:Number(n);const l=Math.max(r,Math.min(e,Number.isFinite(t)?t:r));this.sliderValue.set(l)}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:s,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:s,isStandalone:true,selector:"slider-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-slider\" [ngClass]=\"{ 'nvb-slider--compact': useCompactStyle() }\">\n    <input\n      class=\"nvb-slider__input\"\n      type=\"range\"\n      [id]=\"fieldWrapper.controlId()\"\n      [disabled]=\"model().disabled\"\n      [min]=\"model().resolveMin()\"\n      [max]=\"model().resolveMax()\"\n      [step]=\"model().resolveStep()\"\n      [value]=\"sliderValue()\"\n      [attr.aria-describedby]=\"\n        fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n      \"\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      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (model().showValueLabel) {\n      <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-slider__value\">{{ displayValue() }}</span>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-slider{display:flex;align-items:center;gap:10px}.nvb-slider--compact{gap:8px}.nvb-slider__input{width:100%;margin:0;accent-color:var(--nvb-color-primary-500);cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;height:16px}.nvb-slider__input:disabled{cursor:not-allowed;opacity:.6}.nvb-slider__input:focus{outline:none}.nvb-slider__input::-webkit-slider-runnable-track{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-neutral-300) 78%,var(--nvb-color-surface-mix-target, white));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-400) 46%,transparent)}.nvb-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:1px solid var(--nvb-color-primary-600);background:var(--nvb-color-primary-500);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent)}.nvb-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent),0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 28%,transparent)}.nvb-slider__input::-moz-range-track{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-neutral-300) 78%,var(--nvb-color-surface-mix-target, white));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-400) 46%,transparent)}.nvb-slider__input::-moz-range-progress{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-primary-500) 82%,var(--nvb-color-primary-400))}.nvb-slider__input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid var(--nvb-color-primary-600);background:var(--nvb-color-primary-500);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent)}.nvb-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent),0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 28%,transparent)}.nvb-slider__value{min-width:40px;text-align:right;font-size:12px;color:var(--nvb-color-neutral-600);font-variant-numeric:tabular-nums}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:u,selector:"[ngClass]",inputs:["class","ngClass"]}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:o,decorators:[{type:y,args:[{selector:"slider-element",changeDetection:x.OnPush,imports:[d,u],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div class=\"nvb-slider\" [ngClass]=\"{ 'nvb-slider--compact': useCompactStyle() }\">\n    <input\n      class=\"nvb-slider__input\"\n      type=\"range\"\n      [id]=\"fieldWrapper.controlId()\"\n      [disabled]=\"model().disabled\"\n      [min]=\"model().resolveMin()\"\n      [max]=\"model().resolveMax()\"\n      [step]=\"model().resolveStep()\"\n      [value]=\"sliderValue()\"\n      [attr.aria-describedby]=\"\n        fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n      \"\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      (input)=\"onInput($event)\"\n      (change)=\"onChange($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (model().showValueLabel) {\n      <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-slider__value\">{{ displayValue() }}</span>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-slider{display:flex;align-items:center;gap:10px}.nvb-slider--compact{gap:8px}.nvb-slider__input{width:100%;margin:0;accent-color:var(--nvb-color-primary-500);cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;height:16px}.nvb-slider__input:disabled{cursor:not-allowed;opacity:.6}.nvb-slider__input:focus{outline:none}.nvb-slider__input::-webkit-slider-runnable-track{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-neutral-300) 78%,var(--nvb-color-surface-mix-target, white));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-400) 46%,transparent)}.nvb-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:1px solid var(--nvb-color-primary-600);background:var(--nvb-color-primary-500);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent)}.nvb-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent),0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 28%,transparent)}.nvb-slider__input::-moz-range-track{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-neutral-300) 78%,var(--nvb-color-surface-mix-target, white));border:1px solid color-mix(in oklab,var(--nvb-color-neutral-400) 46%,transparent)}.nvb-slider__input::-moz-range-progress{height:6px;border-radius:var(--nvb-radius-full);background:color-mix(in oklab,var(--nvb-color-primary-500) 82%,var(--nvb-color-primary-400))}.nvb-slider__input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid var(--nvb-color-primary-600);background:var(--nvb-color-primary-500);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent)}.nvb-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-neutral-000) 55%,transparent),0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 28%,transparent)}.nvb-slider__value{min-width:40px;text-align:right;font-size:12px;color:var(--nvb-color-neutral-600);font-variant-numeric:tabular-nums}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{V as n,o as t};

package/fesm2022/ngxviewbuilder-runtime-stats-card-element-DUxzXyTC.mjs

@@ -1 +0,0 @@
-import{t as d}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{d as v,t as i}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as b,t as c}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as m,Component as p,computed as n,inject as u,input as g}from"@angular/core";import{NgClass as l}from"@angular/common";var x=d({StatsCardElement:()=>e});var e=class s{expressionService=u(v);model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=b(this.model,"nvb-stats-card","stats-card");resolvedVariant=n(()=>this.resolveVariant(),...ngDevMode?[{debugName:"resolvedVariant"}]:[]);cardClass=n(()=>({[`nvb-stats-card--${this.resolvedVariant()}`]:true}),...ngDevMode?[{debugName:"cardClass"}]:[]);trendClass=n(()=>({[`nvb-stats-card__trend--${this.resolveTrendDirection()}`]:true}),...ngDevMode?[{debugName:"trendClass"}]:[]);iconName=n(()=>{return this.resolveExpressionValue(this.model()?.iconExpression)||String(this.model()?.icon??"").trim()||"monitoring"},...ngDevMode?[{debugName:"iconName"}]:[]);trendIcon=n(()=>{switch(this.resolveTrendDirection()){case"up":return"north_east";case"down":return"south_east";default:return"remove"}},...ngDevMode?[{debugName:"trendIcon"}]:[]);resolveVariant(){const o=this.resolveConditionalVariant()||this.resolveExpressionValue(this.model()?.variantExpression)||String(this.model()?.variant??"neutral");const r=String(o).trim().toLowerCase();if(r==="success")return"success";if(r==="warn"||r==="warning")return"warn";if(r==="risk"||r==="danger"||r==="error")return"risk";if(r==="info")return"info";if(r==="primary")return"primary";return"neutral"}resolveConditionalVariant(){if(String(this.model()?.variantMode??"static").trim().toLowerCase()!=="conditional")return"";const o=Array.isArray(this.model()?.variantRules)?this.model().variantRules:[];for(const r of o){const t=String(r?.condition??"").trim();if(!t)continue;if(Boolean(this.expressionService.evaluateInlineExpression(t,this.model())))return String(r?.variant??"").trim()}return""}resolveTrendDirection(){const o=this.resolveExpressionValue(this.model()?.trendDirectionExpression)||String(this.model()?.trendDirection??"neutral");const r=String(o).trim().toLowerCase();if(r==="up"||r==="down")return r;return"neutral"}resolveExpressionValue(o){const r=String(o??"").trim();if(!r)return"";const t=this.expressionService.evaluateInlineExpression(r,this.model());return String(t??"").trim()}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:s,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:s,isStandalone:true,selector:"stats-card-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\">\n  <article class=\"nvb-stats-card\" [ngClass]=\"cardClass()\" [attr.data-testid]=\"tid('root')\">\n    <header class=\"nvb-stats-card__header\">\n      <p class=\"nvb-stats-card__title\">{{ model().title | dynamicText: model() }}</p>\n      <span class=\"material-symbols-outlined nvb-stats-card__icon\">{{ iconName() }}</span>\n    </header>\n\n    <p class=\"nvb-stats-card__value\">{{ model().valueText | dynamicText: model() }}</p>\n\n    @if (model().trendText) {\n      <p class=\"nvb-stats-card__trend\" [ngClass]=\"trendClass()\">\n        <span class=\"material-symbols-outlined\">{{ trendIcon() }}</span>\n        <span>{{ model().trendText | dynamicText: model() }}</span>\n      </p>\n    }\n  </article>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-stats-card{width:100%;border-radius:var(--nvb-card-radius);border:1px solid var(--nvb-card-border-color);background:var(--nvb-card-bg);color:var(--nvb-color-neutral-700);padding:12px;display:grid;gap:8px}.nvb-stats-card__header{display:flex;justify-content:space-between;gap:10px;align-items:center}.nvb-stats-card__title{margin:0;font-size:12px;color:var(--nvb-color-neutral-500);line-height:1.25}.nvb-stats-card__icon{width:28px;height:28px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-stats-card__value{margin:0;font-size:clamp(22px,3.2vw,30px);font-weight:700;line-height:1.15;word-break:break-word}.nvb-stats-card__trend{margin:0;display:inline-flex;align-items:center;gap:4px;width:fit-content;border-radius:var(--nvb-radius-full);border:1px solid transparent;font-size:12px;min-height:24px;padding:2px 8px}.nvb-stats-card__trend span.material-symbols-outlined{font-size:14px}.nvb-stats-card--neutral{border-color:var(--nvb-color-neutral-300)}.nvb-stats-card--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--primary{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 42%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 32%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--warn,.nvb-stats-card--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 36%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--risk,.nvb-stats-card--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 34%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--primary .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-stats-card--success .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-success-500) 12%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-700) 85%,black)}.nvb-stats-card--warn .nvb-stats-card__icon,.nvb-stats-card--warning .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-warning-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-700) 84%,black)}.nvb-stats-card--risk .nvb-stats-card__icon,.nvb-stats-card--danger .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-stats-card--info .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-stats-card__trend--up{background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));border-color:color-mix(in oklab,var(--nvb-color-success-500) 30%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 78%,black)}.nvb-stats-card__trend--down{background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));border-color:color-mix(in oklab,var(--nvb-color-risk-500) 32%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-stats-card__trend--neutral{background:var(--nvb-color-neutral-100);border-color:var(--nvb-color-neutral-300);color:var(--nvb-color-neutral-600)}\n"],dependencies:[{kind:"component",type:c,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:l,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:i,name:"dynamicText"}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:e,decorators:[{type:p,args:[{selector:"stats-card-element",changeDetection:m.OnPush,imports:[c,l,i],template:"<element-wrapper [model]=\"model()\">\n  <article class=\"nvb-stats-card\" [ngClass]=\"cardClass()\" [attr.data-testid]=\"tid('root')\">\n    <header class=\"nvb-stats-card__header\">\n      <p class=\"nvb-stats-card__title\">{{ model().title | dynamicText: model() }}</p>\n      <span class=\"material-symbols-outlined nvb-stats-card__icon\">{{ iconName() }}</span>\n    </header>\n\n    <p class=\"nvb-stats-card__value\">{{ model().valueText | dynamicText: model() }}</p>\n\n    @if (model().trendText) {\n      <p class=\"nvb-stats-card__trend\" [ngClass]=\"trendClass()\">\n        <span class=\"material-symbols-outlined\">{{ trendIcon() }}</span>\n        <span>{{ model().trendText | dynamicText: model() }}</span>\n      </p>\n    }\n  </article>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-stats-card{width:100%;border-radius:var(--nvb-card-radius);border:1px solid var(--nvb-card-border-color);background:var(--nvb-card-bg);color:var(--nvb-color-neutral-700);padding:12px;display:grid;gap:8px}.nvb-stats-card__header{display:flex;justify-content:space-between;gap:10px;align-items:center}.nvb-stats-card__title{margin:0;font-size:12px;color:var(--nvb-color-neutral-500);line-height:1.25}.nvb-stats-card__icon{width:28px;height:28px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-700)}.nvb-stats-card__value{margin:0;font-size:clamp(22px,3.2vw,30px);font-weight:700;line-height:1.15;word-break:break-word}.nvb-stats-card__trend{margin:0;display:inline-flex;align-items:center;gap:4px;width:fit-content;border-radius:var(--nvb-radius-full);border:1px solid transparent;font-size:12px;min-height:24px;padding:2px 8px}.nvb-stats-card__trend span.material-symbols-outlined{font-size:14px}.nvb-stats-card--neutral{border-color:var(--nvb-color-neutral-300)}.nvb-stats-card--info{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--primary{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 42%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--success{border-color:color-mix(in oklab,var(--nvb-color-success-500) 32%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--warn,.nvb-stats-card--warning{border-color:color-mix(in oklab,var(--nvb-color-warning-500) 36%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--risk,.nvb-stats-card--danger{border-color:color-mix(in oklab,var(--nvb-color-risk-500) 34%,var(--nvb-color-surface-mix-target, white))}.nvb-stats-card--primary .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-stats-card--success .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-success-500) 12%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-700) 85%,black)}.nvb-stats-card--warn .nvb-stats-card__icon,.nvb-stats-card--warning .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-warning-500) 14%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-warning-700) 84%,black)}.nvb-stats-card--risk .nvb-stats-card__icon,.nvb-stats-card--danger .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-stats-card--info .nvb-stats-card__icon{background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-primary-700)}.nvb-stats-card__trend--up{background:color-mix(in oklab,var(--nvb-color-success-500) 14%,var(--nvb-color-surface-mix-target, white));border-color:color-mix(in oklab,var(--nvb-color-success-500) 30%,var(--nvb-color-surface-mix-target, white));color:color-mix(in oklab,var(--nvb-color-success-500) 78%,black)}.nvb-stats-card__trend--down{background:color-mix(in oklab,var(--nvb-color-risk-500) 14%,var(--nvb-color-surface-mix-target, white));border-color:color-mix(in oklab,var(--nvb-color-risk-500) 32%,var(--nvb-color-surface-mix-target, white));color:var(--nvb-color-risk-700)}.nvb-stats-card__trend--neutral{background:var(--nvb-color-neutral-100);border-color:var(--nvb-color-neutral-300);color:var(--nvb-color-neutral-600)}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,e as t};