@ngxviewbuilder/runtime 0.10.5 → 0.12.0

package/fesm2022/ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs

@@ -0,0 +1 @@
+var o=Object.defineProperty;var l=(r,a)=>{let e={};for(var t in r)o(e,t,{get:r[t],enumerable:true});if(!a)o(e,Symbol.toStringTag,{value:"Module"});return e};export{l as t};

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

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

package/fesm2022/ngxviewbuilder-runtime-select-button-element-D3ECf6NN.mjs

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

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

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

package/fesm2022/ngxviewbuilder-runtime-signature-pad-element-DNWzJf8n.mjs

@@ -0,0 +1 @@
+import{t as p}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as v,g as u}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as h,rt as m,t as l}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.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(v);elementActionService=s(m);eventService=s(u);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-CwUV4QeU.mjs

@@ -0,0 +1 @@
+import{t as h}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as m,g as b,t as s}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as p,rt as g,t as d}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.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(m);eventService=o(b);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-DG3yzEol.mjs

@@ -0,0 +1 @@
+import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as m,g as b,yt as v}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as h,rt as g,t as d}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.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(m);eventService=i(b);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-spacer-element-DmK0-mBg.mjs

@@ -0,0 +1 @@
+import{t as p}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{r as l,t as o}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as m,Component as d,computed as c,input as g}from"@angular/core";import{NgStyle as s}from"@angular/common";var h=p({SpacerElement:()=>i});var i=class a{model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=l(this.model,"nvb-spacer","spacer");spacerStyle=c(()=>{const n=String(this.model()?.axis??"vertical").trim().toLowerCase();const t=this.normalizeSize(this.model()?.size,"20px");if(n==="horizontal")return{width:t,height:"1px","min-height":"1px"};return{width:"100%",height:t,"min-height":t}},...ngDevMode?[{debugName:"spacerStyle"}]:[]);normalizeSize(n,t){const r=String(n??"").trim();if(!r)return t;if(/^-?\d+(\.\d+)?$/.test(r))return`${r}px`;return r}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:a,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:a,isStandalone:true,selector:"spacer-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\">\n  <div\n    class=\"nvb-spacer\"\n    [ngStyle]=\"spacerStyle()\"\n    aria-hidden=\"true\"\n    [attr.data-testid]=\"tid('root')\"\n  ></div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-spacer{display:block;width:100%;min-height:1px}\n"],dependencies:[{kind:"component",type:o,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:s,selector:"[ngStyle]",inputs:["ngStyle"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:i,decorators:[{type:d,args:[{selector:"spacer-element",changeDetection:m.OnPush,imports:[o,s],template:"<element-wrapper [model]=\"model()\">\n  <div\n    class=\"nvb-spacer\"\n    [ngStyle]=\"spacerStyle()\"\n    aria-hidden=\"true\"\n    [attr.data-testid]=\"tid('root')\"\n  ></div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-spacer{display:block;width:100%;min-height:1px}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{h as n,i as t};

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

@@ -0,0 +1 @@
+import{t as d}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{d as v,t as i}from"./ngxviewbuilder-runtime-dynamic-text.pipe-DJNHX-1z.mjs";import{r as b,t as c}from"./ngxviewbuilder-runtime-element-wrapper-FxbwPLem.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};