@ngxviewbuilder/runtime 0.12.2 → 0.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngxviewbuilder-runtime-autocomplete-element-DU7SLoLr.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-avatar-element-BWDaCDjn.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-badge-element-BUv50o0Q.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-breadcrumbs-element-Cb6NqxmR.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-button-element-LyUxiJtc.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-chart-element-B1uBvHYa.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-checkbox-element-CQzqJqdF.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-column-C9GuN6kf.mjs +43 -0
- package/fesm2022/ngxviewbuilder-runtime-custom-html-element-BR66FC2H.mjs +3 -0
- package/fesm2022/ngxviewbuilder-runtime-date-range-element-C8RBJmSj.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-datepicker-element-DT_3dhZY.mjs +1 -0
- package/fesm2022/{ngxviewbuilder-runtime-divider-element-Bit-YRpc.mjs → ngxviewbuilder-runtime-divider-element-Dy0UbtJZ.mjs} +1 -1
- package/fesm2022/ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-file-upload-element-D9RXvqKq.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-icon-element-BhhGVwki.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-iframe-element-Cu80J5fV.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-image-element-BcWyv_1w.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-list-box-element-B3arqtqK.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-list-grid-element-Bypg41r5.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-message-card-element-MG1HDIgX.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-multi-select-element-BWJx77Pg.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs +4 -0
- package/fesm2022/ngxviewbuilder-runtime-number-element-Cv-8UzYT.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-number-stepper-element-BERWK0N0.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-nvb-select-DZN__Phy.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-page-title-element-BypNpk6v.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-phone-input-element-Dc7vFgbW.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-progress-bar-element-CTsruGjk.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-radio-element-BVBDe7Ek.mjs +1 -0
- package/fesm2022/{ngxviewbuilder-runtime-rich-text-element-DAl3vSxG.mjs → ngxviewbuilder-runtime-rich-text-element-wkavxR4_.mjs} +2 -2
- package/fesm2022/ngxviewbuilder-runtime-router-outlet-element-D5MWP2_E.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-select-button-element-BTHOZoYq.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-select-element-BmbIc2mf.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-signature-pad-element-C8Wm6CAy.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-single-checkbox-element-D6xFAe8I.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-slider-element-DDrlelkb.mjs +1 -0
- package/fesm2022/{ngxviewbuilder-runtime-spacer-element-BGJ-ObOf.mjs → ngxviewbuilder-runtime-spacer-element-Byp-9ui-.mjs} +1 -1
- package/fesm2022/ngxviewbuilder-runtime-stats-card-element-BlpMA4xC.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-table-element-DkFoz7Bs.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-text-element-x7z3vIFH.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-textarea-element-vyeC0HZs.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-time-picker-element-Dkz84ISf.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-toast-element-C52aKUbB.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-toggle-switch-element-DVMw3-vu.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime-video-element-DgRSZoBA.mjs +1 -0
- package/fesm2022/ngxviewbuilder-runtime.mjs +1 -1
- package/package.json +1 -1
- package/types/ngxviewbuilder-runtime.d.ts +116 -6
- package/fesm2022/ngxviewbuilder-runtime-autocomplete-element-DWbMobho.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-avatar-element-98vFX6ZL.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-badge-element-WdHbUp_X.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-breadcrumbs-element-qlHbgWfh.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-button-element-BWI56rGB.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-chart-element-wN98hSa2.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-checkbox-element-yAUJgMY7.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-column-CEOo23I_.mjs +0 -43
- package/fesm2022/ngxviewbuilder-runtime-custom-html-element-D7ezjkGw.mjs +0 -3
- package/fesm2022/ngxviewbuilder-runtime-date-range-element-kRoWWvXf.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-datepicker-element-Co2_JHM2.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs +0 -4
- package/fesm2022/ngxviewbuilder-runtime-file-upload-element-B1sGgTAJ.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-icon-element-BBV3IriU.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-iframe-element-DAKlSTTJ.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-image-element-Co9eNt6D.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-list-box-element-BkqVfq4H.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-list-grid-element-BsVooLf9.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-message-card-element-DOlB-FAw.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-multi-select-element-5YHKOX69.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-number-element-MNO3T8kR.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-number-stepper-element-Jl6DZNAb.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-nvb-select-DuPHFQk6.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-page-title-element-BdfBrnaW.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-phone-input-element-BDZkscMD.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-progress-bar-element-Dg7Y6-jq.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-radio-element-xscwN_Hs.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-router-outlet-element-BpGv-kkh.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-select-button-element-BPH_N-fd.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-select-element-B_FOlIzR.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-signature-pad-element-BxZMh4-H.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-single-checkbox-element-DZiHDP6i.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-slider-element-NBbgW-1w.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-stats-card-element-DUxzXyTC.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-table-element-yvDWlU-z.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-text-element-C9W3pPu7.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-textarea-element-55rqT93w.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-time-picker-element-C1p0lG_4.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-toast-element-Dc8tFqFS.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-toggle-switch-element-DEmC69ye.mjs +0 -1
- package/fesm2022/ngxviewbuilder-runtime-video-element-COR0eePU.mjs +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as h,bt as g,n as d,sn as v,v as y}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as f}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as b,t as m}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as I,ChangeDetectorRef as V,Component as C,Injector as F,effect as S,inject as l,input as D,signal as o}from"@angular/core";import{NgClass as p}from"@angular/common";var x=c({NumberElement:()=>s});var s=class u{model=D.required(...ngDevMode?[{debugName:"model"}]:[]);tid=b(this.model,"nvb-number","number");useCompactStyle=o(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);displayValue=o("",...ngDevMode?[{debugName:"displayValue"}]:[]);isEditing=o(false,...ngDevMode?[{debugName:"isEditing"}]:[]);elementActionService=l(f);dataService=l(v);localeFormatService=l(y);eventService=l(h);cdr=l(V);injector=l(F);onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){if(this.model()?.parentElement&&this.model()?.parentElement instanceof g)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.refreshDisplayValue();S(()=>{const e=String(this.model()?.dataPath??"").trim();if(!e)return;const t=this.dataService.getValue(e);if(!Object.is(this.model().value,t))this.model().value=t;if(!this.isEditing()||this.isValueComputedOrLocked())this.refreshDisplayValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}isValueComputedOrLocked(){const e=this.model();return Boolean(e?.readOnly)||Boolean(e?.disabled)||String(e?.expression??"").trim().length>0}onInput(e){this.syncDisplayValueFromTarget(e);if(this.shouldCommitForTrigger("input"))this.applyTypedInputValue(e,"input");this.runActions("input",e)}onChange(e){this.syncDisplayValueFromTarget(e);if(this.shouldCommitForTrigger("change"))this.applyTypedInputValue(e,"change");this.runActions("change",e)}onBlur(e){this.applyTypedInputValue(e,"blur");this.isEditing.set(false);this.refreshDisplayValue();this.runActions("blur",e)}onFocus(e){this.isEditing.set(true);this.runActions("focus",e)}shouldCommitForTrigger(e){const t=e==="input"?"oninput":"onchange";const n=this.normalizeExecutionMode(this.model().logicExecutionMode);const r=this.normalizeExecutionMode(this.model().validationExecutionMode);if(n===t||r===t)return true;return(this.model().events??[]).some(i=>String(i?.trigger??"").trim().toLowerCase()===e)}normalizeExecutionMode(e){const t=String(e??"").trim().toLowerCase();if(t==="oninput")return"oninput";if(t==="onchange")return"onchange";return"onblur"}onKeyDown(e){if(this.model().disabled||this.model().readOnly)return;if(this.isControlShortcut(e)||this.isNavigationKey(e.key))return;const t=String(e.key??"");if(!/^[0-9.,\-\s]$/.test(t)){e.preventDefault();return}const n=e.target;if(!n)return;const r=this.buildCandidateValue(n,t);if(!this.isCandidateNumberInput(r))e.preventDefault()}onPaste(e){if(this.model().disabled||this.model().readOnly)return;const t=e.clipboardData?.getData("text")??"";if(!t)return;if(!/^[0-9.,\-\s]+$/.test(t)){e.preventDefault();return}const n=e.target;if(!n)return;const r=this.buildCandidateValue(n,t);if(!this.isCandidateNumberInput(r))e.preventDefault()}runActions(e,t){const n=this.resolveInputValue(t);const r=String(this.model().name??"").trim();const i={value:n,item:null,row:null};if(r)i[r]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,i)}resolveInputValue(e){if(this.isVisualFormatEnabled()){const n=e?.target;return this.localeFormatService.parseNumber(n?.value??this.displayValue(),this.resolveVisualLocale())}const t=e?.target;if(!t){const n=Number(this.model().value);return Number.isNaN(n)?null:n}return this.localeFormatService.parseNumber(t.value,this.resolveVisualLocale())}getInputType(){return this.model()?.["visualFormatEnabled"]?"text":"number"}getInputMode(){return String(this.model()?.["inputMode"]??"").trim().toLowerCase()==="numeric"?"numeric":"decimal"}getInputValue(){return this.displayValue()}resolveInputTextAlign(){return String(this.model()?.["numberInputAlign"]??"").trim().toLowerCase()==="right"?"right":"left"}isVisualFormatEnabled(){return Boolean(this.model()?.["visualFormatEnabled"])}resolveVisualLocale(){const e=String(this.model()?.["visualFormatLocale"]??"").trim();return this.localeFormatService.resolveLocale(e)}applyTypedInputValue(e,t){const n=e.target;if(!n)return;this.displayValue.set(n.value??"");const r=this.localeFormatService.parseNumber(n.value,this.resolveVisualLocale());if(r!==null){this.model().setValueFromNumber(r,t);return}if(!String(n.value??"").trim())this.model().setValueFromNumber(null,t)}syncDisplayValueFromTarget(e){const t=e.target;this.displayValue.set(t?.value??"")}refreshDisplayValue(){if(!this.isVisualFormatEnabled()){this.displayValue.set(String(this.model().value??""));return}const e=this.model().value;const t=typeof e==="number"?e:this.localeFormatService.parseNumber(e,this.resolveVisualLocale());if(t===null||!Number.isFinite(t)){this.displayValue.set("");return}const n=this.model()?.["visualFormatUseGrouping"];const r=this.model()?.["visualFormatMinFractionDigits"];const i=this.model()?.["visualFormatMaxFractionDigits"];this.displayValue.set(this.localeFormatService.formatNumber(t,{locale:this.resolveVisualLocale(),useGrouping:n===void 0||n===null?true:Boolean(n),minimumFractionDigits:r===null||r===void 0?void 0:Number(r),maximumFractionDigits:i===null||i===void 0?void 0:Number(i)}))}isControlShortcut(e){const t=String(e.key??"").toLowerCase();if(!(e.ctrlKey||e.metaKey))return false;return["a","c","v","x","z","y"].includes(t)}isNavigationKey(e){return["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","Tab","Enter","Escape"].includes(e)}buildCandidateValue(e,t){const n=e.selectionStart??e.value.length;const r=e.selectionEnd??n;return`${e.value.slice(0,n)}${t}${e.value.slice(r)}`}isCandidateNumberInput(e){const t=String(e??"").replace(/\s+/g,"").trim();if(!t)return true;if(!/^[0-9.,\-]+$/.test(t))return false;const n=(t.match(/-/g)||[]).length;if(n>1)return false;if(n===1&&!t.startsWith("-"))return false;if((t.match(/[.,]/g)||[]).length>1)return false;const r=this.resolveConfiguredMaxFractionDigits();if(r!==null){const i=Math.max(t.lastIndexOf(","),t.lastIndexOf("."));if(i>=0){if(t.slice(i+1).replace(/[^0-9]/g,"").length>r)return false}}return true}resolveConfiguredMaxFractionDigits(){if(!this.isVisualFormatEnabled())return null;const e=this.model()?.["visualFormatMaxFractionDigits"];const t=Number(e);if(!Number.isFinite(t))return null;return Math.max(0,Math.min(20,Math.floor(t)))}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:u,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:u,isStandalone:true,selector:"lib-number-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div class=\"nvb-number-input\">\n <input\n [id]=\"fieldWrapper.controlId()\"\n [type]=\"getInputType()\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.min]=\"getInputType() === 'number' ? (model()['min'] ?? null) : null\"\n [attr.max]=\"getInputType() === 'number' ? (model()['max'] ?? null) : null\"\n [attr.step]=\"getInputType() === 'number' ? (model()['step'] ?? null) : null\"\n [placeholder]=\"model().placeholder ? (model().placeholder | dynamicText: model()) : ''\"\n [disabled]=\"model().disabled\"\n [readOnly]=\"model().readOnly\"\n [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n [style.text-align]=\"resolveInputTextAlign()\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n [attr.aria-required]=\"model().required ? 'true' : null\"\n [attr.data-testid]=\"tid('input')\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [value]=\"getInputValue()\"\n />\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-number-input{position:relative;width:100%;min-width:0}\n"],dependencies:[{kind:"component",type:m,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:p,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:d,name:"dynamicText"}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:s,decorators:[{type:C,args:[{selector:"lib-number-element",changeDetection:I.OnPush,imports:[m,p,d],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div class=\"nvb-number-input\">\n <input\n [id]=\"fieldWrapper.controlId()\"\n [type]=\"getInputType()\"\n [attr.inputmode]=\"getInputMode()\"\n [attr.min]=\"getInputType() === 'number' ? (model()['min'] ?? null) : null\"\n [attr.max]=\"getInputType() === 'number' ? (model()['max'] ?? null) : null\"\n [attr.step]=\"getInputType() === 'number' ? (model()['step'] ?? null) : null\"\n [placeholder]=\"model().placeholder ? (model().placeholder | dynamicText: model()) : ''\"\n [disabled]=\"model().disabled\"\n [readOnly]=\"model().readOnly\"\n [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n [style.text-align]=\"resolveInputTextAlign()\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n [attr.aria-required]=\"model().required ? 'true' : null\"\n [attr.data-testid]=\"tid('input')\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [value]=\"getInputValue()\"\n />\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-number-input{position:relative;width:100%;min-width:0}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,s as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as c}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as m,sn as b}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as u}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as v,t as d}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as h,ChangeDetectorRef as g,Component as y,Injector as _,computed as p,effect as f,inject as r,input as x,signal as w}from"@angular/core";var D=c({NumberStepperElement:()=>a});var a=class l{model=x.required(...ngDevMode?[{debugName:"model"}]:[]);tid=v(this.model,"nvb-number-stepper","number-stepper");displayValue=w(0,...ngDevMode?[{debugName:"displayValue"}]:[]);canDecrement=p(()=>{this.displayValue();return this.model().canDecrement()},...ngDevMode?[{debugName:"canDecrement"}]:[]);canIncrement=p(()=>{this.displayValue();return this.model().canIncrement()},...ngDevMode?[{debugName:"canIncrement"}]:[]);elementActionService=r(u);dataService=r(b);eventService=r(m);cdr=r(g);injector=r(_);onPropertyChangedHandler=t=>{const n=String(this.model()?.dataPath??"").trim();if(!n)return;if(String(t?.payload?.elementNameOrPath??"").trim()!==n)return;this.cdr.markForCheck()};ngOnInit(){this.syncDisplayValue();f(()=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=this.dataService.getValue(t);if(!Object.is(this.model().value,n))this.model().value=n;this.syncDisplayValue()},{injector:this.injector});this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}onDecrement(){this.model().decrement("change");this.syncDisplayValue();this.runActions("change",this.model().value)}onIncrement(){this.model().increment("change");this.syncDisplayValue();this.runActions("change",this.model().value)}syncDisplayValue(){this.displayValue.set(this.model().numericValue)}runActions(t,n){const o=n!==void 0?n:this.model().value;const i=String(this.model().name??"").trim();const s={value:o,item:null,row:null};if(i)s[i]=o;this.elementActionService.runActions(this.model(),this.model().events??[],t,s)}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:l,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.1.0",version:"22.2.1",type:l,isStandalone:true,selector:"number-stepper-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div\n class=\"nvb-number-stepper\"\n [class.nvb-number-stepper--disabled]=\"model().disabled\"\n [attr.data-testid]=\"tid('root')\"\n >\n <button [attr.data-testid]=\"tid('decrement')\"\n type=\"button\"\n class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n [disabled]=\"model().disabled || !canDecrement()\"\n [attr.aria-label]=\"'Decrease value'\"\n (click)=\"onDecrement()\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n\n <span\n class=\"nvb-number-stepper__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"displayValue()\"\n [attr.aria-valuemin]=\"model().min ?? null\"\n [attr.aria-valuemax]=\"model().max ?? null\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n >\n {{ displayValue() }}\n </span>\n\n <button [attr.data-testid]=\"tid('increment')\"\n type=\"button\"\n class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n [disabled]=\"model().disabled || !canIncrement()\"\n [attr.aria-label]=\"'Increase value'\"\n (click)=\"onIncrement()\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:a,decorators:[{type:y,args:[{selector:"number-stepper-element",changeDetection:h.OnPush,imports:[d],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div\n class=\"nvb-number-stepper\"\n [class.nvb-number-stepper--disabled]=\"model().disabled\"\n [attr.data-testid]=\"tid('root')\"\n >\n <button [attr.data-testid]=\"tid('decrement')\"\n type=\"button\"\n class=\"nvb-number-stepper__btn nvb-number-stepper__btn--decrement\"\n [disabled]=\"model().disabled || !canDecrement()\"\n [attr.aria-label]=\"'Decrease value'\"\n (click)=\"onDecrement()\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n\n <span\n class=\"nvb-number-stepper__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"displayValue()\"\n [attr.aria-valuemin]=\"model().min ?? null\"\n [attr.aria-valuemax]=\"model().max ?? null\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n >\n {{ displayValue() }}\n </span>\n\n <button [attr.data-testid]=\"tid('increment')\"\n type=\"button\"\n class=\"nvb-number-stepper__btn nvb-number-stepper__btn--increment\"\n [disabled]=\"model().disabled || !canIncrement()\"\n [attr.aria-label]=\"'Increase value'\"\n (click)=\"onIncrement()\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-number-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));overflow:hidden;background:var(--nvb-color-neutral-000);height:var(--nvb-control-height, 40px);min-width:130px;-webkit-user-select:none;user-select:none}.nvb-number-stepper--disabled{opacity:.6;cursor:not-allowed}.nvb-number-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;background:var(--nvb-color-neutral-000);border:0;color:var(--nvb-color-primary-500);cursor:pointer;font-size:20px;transition:background-color .14s ease,color .14s ease;padding:0}.nvb-number-stepper__btn:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:active:not(:disabled){background:color-mix(in oklab,var(--nvb-color-primary-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-number-stepper__btn:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);position:relative;z-index:1}.nvb-number-stepper__btn:disabled{cursor:not-allowed;color:var(--nvb-color-neutral-400)}.nvb-number-stepper__btn .material-symbols-outlined{font-size:20px;line-height:1}.nvb-number-stepper__btn--decrement{border-right:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__btn--increment{border-left:1px solid var(--nvb-color-neutral-200)}.nvb-number-stepper__value{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:40px;padding:0 4px;text-align:center}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{D as n,a as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as y}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{a as D,i as R}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import{t as N}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import*as c from"@angular/core";import{ChangeDetectionStrategy as T,ChangeDetectorRef as P,Component as B,EventEmitter as h,HostListener as k,Input as d,Output as b,ViewChild as p,ViewChildren as F,forwardRef as I,inject as M,signal as l}from"@angular/core";import{NG_VALUE_ACCESSOR as V}from"@angular/forms";var x=class g{hostRef;nativeSelectRef;triggerButtonRef;menuRef;filterInputRef;optionButtonRefs;set value(e){this.internalValue=this.normalizeValue(e);this.syncNativeValue();this.syncFromNativeOptions();queueMicrotask(()=>this.syncFromNativeOptions())}get value(){return this.internalValue}set disabled(e){this.inputDisabled=this.coerceBoolean(e);this.syncDisabledState()}set required(e){this.inputRequired=this.coerceBoolean(e);this.syncRequiredState()}set filterable(e){const t=String(e??"").trim().toLowerCase();this.filterMode=t==="auto"?"auto":this.coerceBoolean(e)}set filterThreshold(e){const t=Number(e);this.filterThresholdValue=Number.isFinite(t)&&t>0?Math.round(t):11}set allowCustomValue(e){this.customValueAllowed=this.coerceBoolean(e)}get allowCustomValue(){return this.customValueAllowed}placeholder="";testId="";optionTestId(e){return this.testId?`${this.testId}-option-${R(e?.value)||"empty"}`:null}valueChange=new h;change=new h;focus=new h;blur=new h;options=l([],...ngDevMode?[{debugName:"options"}]:[]);filterQuery=l("",...ngDevMode?[{debugName:"filterQuery"}]:[]);filterTouched=l(false,...ngDevMode?[{debugName:"filterTouched"}]:[]);selectedLabel=l("",...ngDevMode?[{debugName:"selectedLabel"}]:[]);isPlaceholder=l(true,...ngDevMode?[{debugName:"isPlaceholder"}]:[]);isOpen=l(false,...ngDevMode?[{debugName:"isOpen"}]:[]);activeIndex=l(-1,...ngDevMode?[{debugName:"activeIndex"}]:[]);menuLeft=l(0,...ngDevMode?[{debugName:"menuLeft"}]:[]);menuTop=l(0,...ngDevMode?[{debugName:"menuTop"}]:[]);menuWidth=l(null,...ngDevMode?[{debugName:"menuWidth"}]:[]);menuMaxHeight=l(280,...ngDevMode?[{debugName:"menuMaxHeight"}]:[]);menuPlacement=l("bottom",...ngDevMode?[{debugName:"menuPlacement"}]:[]);menuId=`nvb-select-menu-${Math.random().toString(36).slice(2,9)}`;optionIdPrefix=`nvb-select-option-${Math.random().toString(36).slice(2,9)}-`;hostObserver=null;optionsObserver=null;removeGlobalListeners=null;forwardedHostClasses=new Set;forwardedHostAttributes=new WeakMap;internalValue="";filterMode="auto";filterThresholdValue=11;customValueAllowed=false;hasNavigatedMenu=false;inputDisabled=false;controlDisabled=false;inputRequired=false;syncInProgress=false;menuViewportPadding=8;menuVerticalGap=6;menuDefaultMaxHeight=280;menuMinHeight=96;onChangeCallback=()=>{};onTouchedCallback=()=>{};cdr=M(P);dropdownCoordinatorService=M(N);dropdownCoordinatorSubscription=null;dropdownId=`nvb-select-${Math.random().toString(36).slice(2,11)}`;constructor(e){this.hostRef=e}ngAfterViewInit(){this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(e===this.dropdownId)return;this.closeMenu()});this.setupObservers();this.setupGlobalListeners();queueMicrotask(()=>{this.syncProjectedState();this.syncFromNativeOptions()})}ngOnDestroy(){this.hostObserver?.disconnect();this.optionsObserver?.disconnect();this.removeGlobalListeners?.();this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.dropdownCoordinatorService.requestClose(this.dropdownId)}writeValue(e){this.internalValue=this.normalizeValue(e);this.syncNativeValue();this.syncFromNativeOptions();queueMicrotask(()=>this.syncFromNativeOptions())}registerOnChange(e){this.onChangeCallback=e}registerOnTouched(e){this.onTouchedCallback=e}setDisabledState(e){this.controlDisabled=Boolean(e);this.syncDisabledState()}onNativeChange(e){const t=this.normalizeValue(e.target?.value);this.internalValue=t;this.syncFromNativeOptions();this.onChangeCallback(t);this.valueChange.emit(t);this.change.emit(e)}onTriggerFocus(e){this.focus.emit(e)}onTriggerBlur(e){this.onTouchedCallback();this.blur.emit(e);queueMicrotask(()=>{if(!this.containsNode(this.resolveActiveNode()))this.closeMenu()})}onTriggerClick(e){e.preventDefault();if(this.isDisabled())return;this.isOpen()?this.closeMenu():this.openMenu()}onTriggerKeydown(e){if(this.isDisabled())return;switch(e.key){case"ArrowDown":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.moveActive(1);return;case"ArrowUp":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.moveActive(-1);return;case"Home":if(!this.isOpen())return;e.preventDefault();this.moveToEdge(1);return;case"End":if(!this.isOpen())return;e.preventDefault();this.moveToEdge(-1);return;case"Enter":case" ":e.preventDefault();if(!this.isOpen()){this.openMenu();return}this.selectActiveOption();return;case"Tab":this.closeMenu();return;case"Escape":if(!this.isOpen())return;e.preventDefault();this.closeMenu();return;default:return}}onOptionMouseDown(e,t){t.preventDefault();t.stopPropagation();if(this.isDisabled())return;this.commitOptionSelection(e)}onOptionClick(e,t){t.preventDefault();t.stopPropagation();if(this.isDisabled()||!this.isOpen())return;this.commitOptionSelection(e)}visibleOptions(){const e=this.filterQuery().trim().toLowerCase();if(!e||!this.filterTouched()||!this.isFilterVisible())return this.options();return this.options().filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e))}isFilterVisible(){if(this.customValueAllowed)return true;if(this.filterMode===true)return true;if(this.filterMode===false)return false;return this.options().length>=this.filterThresholdValue}onFilterInput(e){const t=String(e.target?.value??"");this.filterQuery.set(t);this.filterTouched.set(true);this.hasNavigatedMenu=false;const n=this.visibleOptions();this.activeIndex.set(n.length>0?this.findNearestEnabledIndex(0,1):-1);this.updateMenuPosition()}onFilterKeydown(e){switch(e.key){case"ArrowDown":e.preventDefault();this.moveActive(1);return;case"ArrowUp":e.preventDefault();this.moveActive(-1);return;case"Enter":e.preventDefault();if(this.hasNavigatedMenu&&this.activeIndex()>=0){this.commitOptionSelection(this.activeIndex());return}if(this.customValueAllowed){this.commitCustomValue(this.filterQuery());this.closeMenu();this.triggerButtonRef.nativeElement.focus();return}if(this.activeIndex()>=0)this.commitOptionSelection(this.activeIndex());return;case"Escape":e.preventDefault();this.closeMenu();this.triggerButtonRef.nativeElement.focus();return;case"Tab":if(this.customValueAllowed)this.commitCustomValue(this.filterQuery());this.closeMenu();return;default:return}}onFilterBlur(){queueMicrotask(()=>{if(this.containsNode(this.resolveActiveNode()))return;if(this.customValueAllowed)this.commitCustomValue(this.filterQuery());this.closeMenu()})}optionId(e){return`${this.optionIdPrefix}${e}`}activeDescendantId(){if(!this.isOpen()||this.activeIndex()<0)return null;return this.optionId(this.activeIndex())}onDocumentMouseDown(e){if(!this.isOpen())return;const t=e.target;if(this.containsNode(t))return;this.closeMenu()}onDocumentEscape(e){if(!this.isOpen())return;e.preventDefault();this.closeMenu();this.triggerButtonRef.nativeElement.focus()}syncProjectedState(){if(this.syncInProgress)return;this.syncInProgress=true;try{this.forwardHostClasses();this.forwardHostAttributesTo(this.triggerButtonRef.nativeElement,()=>false);this.forwardHostAttributesTo(this.nativeSelectRef.nativeElement,e=>e.startsWith("aria-")||e==="tabindex"||e==="role");this.syncDisabledState();this.syncRequiredState();this.syncNativeValue()}finally{this.syncInProgress=false}}forwardHostClasses(){const e=this.triggerButtonRef?.nativeElement;const t=this.nativeSelectRef?.nativeElement;if(!e||!t)return;const n=Array.from(this.hostRef.nativeElement.classList).filter(i=>this.shouldForwardHostClass(i));const r=new Set(n);this.forwardedHostClasses.forEach(i=>{if(r.has(i))return;e.classList.remove(i);t.classList.remove(i)});r.forEach(i=>{e.classList.add(i);t.classList.add(i)});this.forwardedHostClasses=r}shouldForwardHostClass(e){const t=String(e??"").trim();if(!t)return false;if(t.startsWith("ng-")||t.startsWith("input-ng-"))return false;return true}forwardHostAttributesTo(e,t){const n=this.forwardedHostAttributes.get(e)??new Set;const r=new Set;Array.from(this.hostRef.nativeElement.attributes).forEach(i=>{const o=i.name;if(o==="class"||o==="style"||o==="value"||o==="id"||o==="data-testid"||o.startsWith("_nghost-")||t(o))return;r.add(o);if(e.getAttribute(o)!==i.value)e.setAttribute(o,i.value)});n.forEach(i=>{if(!r.has(i))e.removeAttribute(i)});this.forwardedHostAttributes.set(e,r)}syncNativeValue(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;if(e.value!==this.internalValue)e.value=this.internalValue}syncDisabledState(){const e=this.nativeSelectRef?.nativeElement;const t=this.triggerButtonRef?.nativeElement;if(!e||!t)return;const n=this.isDisabled();e.disabled=n;t.disabled=n}syncRequiredState(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;e.required=Boolean(this.inputRequired)}isDisabled(){return this.inputDisabled||this.controlDisabled}setupObservers(){this.hostObserver?.disconnect();this.optionsObserver?.disconnect();this.hostObserver=new MutationObserver(()=>{this.runInZone(()=>{this.syncProjectedState()})});this.hostObserver.observe(this.hostRef.nativeElement,{attributes:true});const e=this.nativeSelectRef.nativeElement;this.optionsObserver=new MutationObserver(()=>{this.runInZone(()=>{this.syncFromNativeOptions()})});this.optionsObserver.observe(e,{childList:true,subtree:true,attributes:true,characterData:true})}syncFromNativeOptions(){const e=this.nativeSelectRef?.nativeElement;if(!e)return;const t=Array.from(e.options).map(s=>({value:String(s.value??""),label:String(s.label??s.textContent??""),disabled:Boolean(s.disabled)}));this.options.set(t);if(t.length===0){this.selectedLabel.set(this.customValueAllowed?this.internalValue||this.placeholder:"");this.isPlaceholder.set(this.internalValue==="");this.activeIndex.set(-1);return}const n=this.normalizeValue(e.value);const r=t.some(s=>s.value===this.internalValue);if(this.customValueAllowed&&!r){this.selectedLabel.set(this.internalValue||this.placeholder);this.isPlaceholder.set(this.internalValue==="");this.activeIndex.set(-1);return}if(!r&&!this.internalValue&&n)this.internalValue=n;const i=t.findIndex(s=>s.value===this.internalValue);const o=t.findIndex(s=>s.value===n);const a=i>=0?i:o;const u=a>=0?t[a]:t[0];this.selectedLabel.set(String(u?.label??""));this.isPlaceholder.set(a>=0?t[a]?.value==="":n==="");if(this.activeIndex()<0||this.activeIndex()>=t.length||t[this.activeIndex()]?.disabled)this.activeIndex.set(this.findNearestEnabledIndex(a>=0?a:0,1))}openMenu(){if(this.isDisabled())return;this.updateMenuPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.filterQuery.set(this.customValueAllowed?this.internalValue:"");this.filterTouched.set(false);this.hasNavigatedMenu=false;const e=this.visibleOptions().findIndex(t=>t.value===this.internalValue);this.activeIndex.set(this.findNearestEnabledIndex(e>=0?e:0,1));this.cdr.detectChanges();this.updateMenuPosition();queueMicrotask(()=>{this.updateMenuPosition();this.ensureActiveOptionVisible();const t=this.filterInputRef?.nativeElement;t?.focus();t?.select()})}closeMenu(){this.isOpen.set(false);this.filterQuery.set("");this.filterTouched.set(false);this.hasNavigatedMenu=false;this.dropdownCoordinatorService.requestClose(this.dropdownId)}commitCustomValue(e){const t=this.normalizeValue(e);if(t===this.internalValue)return;this.internalValue=t;this.syncNativeValue();this.syncFromNativeOptions();this.onChangeCallback(t);this.valueChange.emit(t);this.change.emit(new Event("change"));this.cdr.markForCheck()}setupGlobalListeners(){if(typeof document==="undefined"||typeof window==="undefined")return;const e=()=>{if(!this.isOpen())return;this.runInZone(()=>{this.updateMenuPosition()})};const t=()=>{if(!this.isOpen())return;this.runInZone(()=>{this.updateMenuPosition()})};document.addEventListener("scroll",e,true);window.addEventListener("resize",t);this.removeGlobalListeners=()=>{document.removeEventListener("scroll",e,true);window.removeEventListener("resize",t)}}updateMenuPosition(){if(typeof window==="undefined"||!this.triggerButtonRef?.nativeElement)return;const e=this.triggerButtonRef.nativeElement.getBoundingClientRect();const t=this.menuRef?.nativeElement?.offsetHeight??0;const n=Math.max(t,Math.min(Math.max(this.visibleOptions().length*36+12+(this.isFilterVisible()?44:0),80),this.menuDefaultMaxHeight));const r=Math.max(window.innerWidth??0,0);const i=Math.max(window.innerHeight??0,0);const o=Math.max(0,i-e.bottom-this.menuViewportPadding-this.menuVerticalGap);const a=Math.max(0,e.top-this.menuViewportPadding-this.menuVerticalGap);const u=Math.max(Math.round(e.width),84);const s=this.hostRef.nativeElement.classList.contains("nvb-select--fit-content");const m=s?this.measureFitContentMenuWidth():0;const v=s?Math.max(u,Math.min(m||u,320)):u;const w=this.menuViewportPadding;const C=Math.max(w,r-v-this.menuViewportPadding);const O=Math.min(Math.max(e.left,w),C);const f=o<Math.min(n,220)&&a>o;const E=f?a:o;const S=Math.min(this.menuDefaultMaxHeight,Math.max(this.menuMinHeight,E));const _=D(this.hostRef.nativeElement);this.menuPlacement.set(f?"top":"bottom");this.menuLeft.set(O-_.left);this.menuTop.set((f?e.top:e.bottom+this.menuVerticalGap)-_.top);this.menuWidth.set(v);this.menuMaxHeight.set(S)}measureFitContentMenuWidth(){if(typeof document==="undefined"||typeof window==="undefined")return 0;const e=this.triggerButtonRef?.nativeElement;if(!e)return 0;const t=document.createElement("span");const n=t.style;const r=getComputedStyle(e);const i=this.optionButtonRefs?.first?getComputedStyle(this.optionButtonRefs.first.nativeElement):null;const o=this.menuRef?.nativeElement?getComputedStyle(this.menuRef.nativeElement):null;n.position="fixed";n.visibility="hidden";n.pointerEvents="none";n.whiteSpace="nowrap";n.inset="-9999px auto auto -9999px";n.font=i?.font||r.font;n.fontSize=i?.fontSize||r.fontSize;n.fontFamily=i?.fontFamily||r.fontFamily;n.fontWeight=i?.fontWeight||r.fontWeight;n.letterSpacing=i?.letterSpacing||r.letterSpacing;document.body.appendChild(t);let a=0;this.options().forEach(v=>{t.textContent=v.label||"";a=Math.max(a,Math.ceil(t.getBoundingClientRect().width))});t.remove();const u=this.readPixelValue(i?.paddingLeft)+this.readPixelValue(i?.paddingRight);const s=this.readPixelValue(o?.paddingLeft)+this.readPixelValue(o?.paddingRight);const m=this.readPixelValue(o?.borderLeftWidth)+this.readPixelValue(o?.borderRightWidth);return Math.ceil(a+u+s+m+8)}readPixelValue(e){const t=Number.parseFloat(String(e??"0"));return Number.isFinite(t)?t:0}moveActive(e){const t=this.visibleOptions();if(t.length===0){this.activeIndex.set(-1);return}this.hasNavigatedMenu=true;const n=this.activeIndex()>=0?this.activeIndex()+e:e>0?0:t.length-1;this.activeIndex.set(this.findNearestEnabledIndex(n,e));this.ensureActiveOptionVisible()}moveToEdge(e){const t=this.visibleOptions();if(t.length===0){this.activeIndex.set(-1);return}this.hasNavigatedMenu=true;const n=e>0?0:t.length-1;this.activeIndex.set(this.findNearestEnabledIndex(n,e));this.ensureActiveOptionVisible()}selectActiveOption(){if(this.activeIndex()<0)return;this.commitOptionSelection(this.activeIndex())}commitOptionSelection(e){this.selectOptionByIndex(e,true);this.closeMenu();this.triggerButtonRef.nativeElement.focus()}selectOptionByIndex(e,t){const n=this.visibleOptions()[e];if(!n||n.disabled)return;const r=n.value;const i=this.internalValue;this.internalValue=r;this.syncNativeValue();this.syncFromNativeOptions();if(t&&i!==r)this.nativeSelectRef.nativeElement.dispatchEvent(new Event("change",{bubbles:true}))}findNearestEnabledIndex(e,t){const n=this.visibleOptions();if(n.length===0)return-1;let r=Math.max(0,Math.min(n.length-1,e));for(let i=0;i<n.length;i++){const o=(r+i*t+n.length)%n.length;if(!n[o]?.disabled)return o}return-1}ensureActiveOptionVisible(){queueMicrotask(()=>{const e=this.optionButtonRefs?.toArray()??[];const t=this.activeIndex();(t>=0?e[t]?.nativeElement:null)?.scrollIntoView({block:"nearest"})})}containsNode(e){return Boolean(e&&this.hostRef.nativeElement.contains(e))}resolveActiveNode(){const e=this.hostRef.nativeElement.getRootNode();if(typeof ShadowRoot!=="undefined"&&e instanceof ShadowRoot)return e.activeElement;if(e instanceof Document)return e.activeElement;if(typeof document!=="undefined")return document.activeElement;return null}normalizeValue(e){return String(e??"")}coerceBoolean(e){if(typeof e==="string"){const t=e.trim().toLowerCase();if(!t)return false;return t!=="false"&&t!=="0"&&t!=="off"}return Boolean(e)}runInZone(e){e();this.cdr.markForCheck()}static ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:g,deps:[{token:c.ElementRef}],target:c.ɵɵFactoryTarget.Component});static ɵcmp=c.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:g,isStandalone:true,selector:"nvb-select",inputs:{value:"value",disabled:"disabled",required:"required",filterable:"filterable",filterThreshold:"filterThreshold",allowCustomValue:"allowCustomValue",placeholder:"placeholder",testId:"testId"},outputs:{valueChange:"valueChange",change:"change",focus:"focus",blur:"blur"},host:{listeners:{"document:mousedown":"onDocumentMouseDown($event)","document:keydown.escape":"onDocumentEscape($event)"}},providers:[{provide:V,useExisting:I(()=>g),multi:true}],viewQueries:[{propertyName:"nativeSelectRef",first:true,predicate:["nativeSelect"],descendants:true,static:true},{propertyName:"triggerButtonRef",first:true,predicate:["triggerButton"],descendants:true,static:true},{propertyName:"menuRef",first:true,predicate:["menuRef"],descendants:true},{propertyName:"filterInputRef",first:true,predicate:["filterInput"],descendants:true},{propertyName:"optionButtonRefs",predicate:["optionButton"],descendants:true}],ngImport:c,template:"<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\n <select\n #nativeSelect\n class=\"nvb-select__native\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onNativeChange($event)\"\n >\n <ng-content />\n </select>\n\n <button\n #triggerButton\n type=\"button\"\n class=\"nvb-select__trigger\"\n [attr.data-testid]=\"testId ? testId + '-trigger' : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (click)=\"onTriggerClick($event)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus($event)\"\n (blur)=\"onTriggerBlur($event)\"\n >\n <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\n {{ selectedLabel() }}\n </span>\n <span class=\"nvb-select__arrow\" aria-hidden=\"true\">▾</span>\n </button>\n\n @if (isOpen()) {\n <div\n #menuRef\n class=\"nvb-select__menu\"\n [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\n [id]=\"menuId\"\n role=\"listbox\"\n [style.left.px]=\"menuLeft()\"\n [style.top.px]=\"menuTop()\"\n [style.width.px]=\"menuWidth()\"\n [style.maxHeight.px]=\"menuMaxHeight()\"\n >\n @if (isFilterVisible()) {\n <div class=\"nvb-select__filter\">\n <input\n #filterInput\n type=\"text\"\n class=\"nvb-select__filter-input\"\n [attr.data-testid]=\"testId ? testId + '-search' : null\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n [value]=\"filterQuery()\"\n [attr.placeholder]=\"\n allowCustomValue\n ? placeholder || ('select.typeOrPick' | uiT: 'Type or pick')\n : ('select.filter' | uiT: 'Filter')\n \"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeydown($event)\"\n (blur)=\"onFilterBlur()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n @for (option of visibleOptions(); track option.value + ':' + $index; let i = $index) {\n <button\n #optionButton\n type=\"button\"\n class=\"nvb-select__option\"\n role=\"option\"\n [id]=\"optionId(i)\"\n [attr.data-testid]=\"optionTestId(option)\"\n [disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.value === value\"\n [class.nvb-select__option--selected]=\"option.value === value\"\n [class.nvb-select__option--active]=\"i === activeIndex()\"\n (mousedown)=\"onOptionMouseDown(i, $event)\"\n (click)=\"onOptionClick(i, $event)\"\n >\n {{ option.label }}\n </button>\n } @empty {\n <p class=\"nvb-select__empty\">\n {{\n allowCustomValue\n ? ('select.pressEnterToUse' | uiT: 'Press Enter to use what you typed')\n : ('select.noMatches' | uiT: 'No matches')\n }}\n </p>\n }\n </div>\n }\n</div>\n",styles:['@charset "UTF-8";:host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--nvb-color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--nvb-color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--nvb-color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--nvb-color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--nvb-color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--nvb-color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--nvb-color-neutral-000);--nvb-select-menu-border: var(--nvb-color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--nvb-color-neutral-700);--nvb-select-option-hover-bg: var(--nvb-color-primary-050);--nvb-select-option-hover-color: var(--nvb-color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 14%, var(--nvb-color-neutral-000) );--nvb-select-option-selected-color: var(--nvb-color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-900) 10%, transparent);--nvb-select-option-radius: var(--nvb-radius-sm);--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.nvb-dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.nvb-dark){--nvb-select-menu-bg: color-mix(in oklch, var(--nvb-color-neutral-900) 82%, var(--nvb-color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--nvb-color-neutral-600) 70%, var(--nvb-color-neutral-700) );--nvb-select-option-color: var(--nvb-color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--nvb-color-primary-400) 22%, var(--nvb-color-neutral-900) );--nvb-select-option-hover-color: var(--nvb-color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 30%, var(--nvb-color-neutral-900) );--nvb-select-option-selected-color: var(--nvb-color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--nvb-color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--nvb-color-neutral-500) 36%,transparent);border-radius:var(--nvb-radius-full)}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--nvb-color-neutral-500) 54%,transparent)}.nvb-select__filter{position:sticky;top:0;z-index:1;padding:6px;border-bottom:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000)}.nvb-select__filter-input{width:100%;box-sizing:border-box;height:28px;padding:0 8px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm);font:inherit;font-size:12px;color:var(--nvb-color-neutral-800);background:var(--nvb-color-neutral-000);outline:none}.nvb-select__filter-input:focus{border-color:var(--nvb-color-primary-500)}.nvb-select__empty{margin:0;padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n'],dependencies:[{kind:"pipe",type:y,name:"uiT"}],changeDetection:c.ChangeDetectionStrategy.OnPush})};c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:x,decorators:[{type:B,args:[{selector:"nvb-select",changeDetection:T.OnPush,imports:[y],providers:[{provide:V,useExisting:I(()=>x),multi:true}],template:"<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\n <select\n #nativeSelect\n class=\"nvb-select__native\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onNativeChange($event)\"\n >\n <ng-content />\n </select>\n\n <button\n #triggerButton\n type=\"button\"\n class=\"nvb-select__trigger\"\n [attr.data-testid]=\"testId ? testId + '-trigger' : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (click)=\"onTriggerClick($event)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus($event)\"\n (blur)=\"onTriggerBlur($event)\"\n >\n <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\n {{ selectedLabel() }}\n </span>\n <span class=\"nvb-select__arrow\" aria-hidden=\"true\">▾</span>\n </button>\n\n @if (isOpen()) {\n <div\n #menuRef\n class=\"nvb-select__menu\"\n [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\n [id]=\"menuId\"\n role=\"listbox\"\n [style.left.px]=\"menuLeft()\"\n [style.top.px]=\"menuTop()\"\n [style.width.px]=\"menuWidth()\"\n [style.maxHeight.px]=\"menuMaxHeight()\"\n >\n @if (isFilterVisible()) {\n <div class=\"nvb-select__filter\">\n <input\n #filterInput\n type=\"text\"\n class=\"nvb-select__filter-input\"\n [attr.data-testid]=\"testId ? testId + '-search' : null\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n [value]=\"filterQuery()\"\n [attr.placeholder]=\"\n allowCustomValue\n ? placeholder || ('select.typeOrPick' | uiT: 'Type or pick')\n : ('select.filter' | uiT: 'Filter')\n \"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeydown($event)\"\n (blur)=\"onFilterBlur()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n @for (option of visibleOptions(); track option.value + ':' + $index; let i = $index) {\n <button\n #optionButton\n type=\"button\"\n class=\"nvb-select__option\"\n role=\"option\"\n [id]=\"optionId(i)\"\n [attr.data-testid]=\"optionTestId(option)\"\n [disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.value === value\"\n [class.nvb-select__option--selected]=\"option.value === value\"\n [class.nvb-select__option--active]=\"i === activeIndex()\"\n (mousedown)=\"onOptionMouseDown(i, $event)\"\n (click)=\"onOptionClick(i, $event)\"\n >\n {{ option.label }}\n </button>\n } @empty {\n <p class=\"nvb-select__empty\">\n {{\n allowCustomValue\n ? ('select.pressEnterToUse' | uiT: 'Press Enter to use what you typed')\n : ('select.noMatches' | uiT: 'No matches')\n }}\n </p>\n }\n </div>\n }\n</div>\n",styles:['@charset "UTF-8";:host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--nvb-color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--nvb-color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--nvb-color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--nvb-color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--nvb-color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--nvb-color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--nvb-color-neutral-000);--nvb-select-menu-border: var(--nvb-color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--nvb-color-neutral-700);--nvb-select-option-hover-bg: var(--nvb-color-primary-050);--nvb-select-option-hover-color: var(--nvb-color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 14%, var(--nvb-color-neutral-000) );--nvb-select-option-selected-color: var(--nvb-color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-900) 10%, transparent);--nvb-select-option-radius: var(--nvb-radius-sm);--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.nvb-dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.nvb-dark){--nvb-select-menu-bg: color-mix(in oklch, var(--nvb-color-neutral-900) 82%, var(--nvb-color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--nvb-color-neutral-600) 70%, var(--nvb-color-neutral-700) );--nvb-select-option-color: var(--nvb-color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--nvb-color-primary-400) 22%, var(--nvb-color-neutral-900) );--nvb-select-option-hover-color: var(--nvb-color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--nvb-color-primary-500) 30%, var(--nvb-color-neutral-900) );--nvb-select-option-selected-color: var(--nvb-color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, var(--nvb-radius-sm));background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--nvb-color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--nvb-color-neutral-500) 36%,transparent);border-radius:var(--nvb-radius-full)}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--nvb-color-neutral-500) 54%,transparent)}.nvb-select__filter{position:sticky;top:0;z-index:1;padding:6px;border-bottom:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-000)}.nvb-select__filter-input{width:100%;box-sizing:border-box;height:28px;padding:0 8px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm);font:inherit;font-size:12px;color:var(--nvb-color-neutral-800);background:var(--nvb-color-neutral-000);outline:none}.nvb-select__filter-input:focus{border-color:var(--nvb-color-primary-500)}.nvb-select__empty{margin:0;padding:10px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n']}]}],ctorParameters:()=>[{type:c.ElementRef}],propDecorators:{nativeSelectRef:[{type:p,args:["nativeSelect",{static:true}]}],triggerButtonRef:[{type:p,args:["triggerButton",{static:true}]}],menuRef:[{type:p,args:["menuRef"]}],filterInputRef:[{type:p,args:["filterInput"]}],optionButtonRefs:[{type:F,args:["optionButton"]}],value:[{type:d}],disabled:[{type:d}],required:[{type:d}],filterable:[{type:d}],filterThreshold:[{type:d}],allowCustomValue:[{type:d}],placeholder:[{type:d}],testId:[{type:d}],valueChange:[{type:b}],change:[{type:b}],focus:[{type:b}],blur:[{type:b}],onDocumentMouseDown:[{type:k,args:["document:mousedown",["$event"]]}],onDocumentEscape:[{type:k,args:["document:keydown.escape",["$event"]]}]}});export{x as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as d}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{n as r}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as g}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{o as p,r as c,t as s}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as t from"@angular/core";import{ChangeDetectionStrategy as h,Component as v,computed as n,inject as b,input as u}from"@angular/core";import{NgClass as m}from"@angular/common";var x=d({PageTitleElement:()=>i});var i=class l{model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=c(this.model,"nvb-page-title","page-title");elementActionService=b(g);alignClass=n(()=>{const e=String(this.model()?.align??"left").trim().toLowerCase();if(e==="center")return"nvb-page-title--center";if(e==="right")return"nvb-page-title--right";return""},...ngDevMode?[{debugName:"alignClass"}]:[]);headingLevel=n(()=>{const e=String(this.model()?.level??"h2").trim().toLowerCase();if(e==="h1"||e==="h3"||e==="h4")return e;return"h2"},...ngDevMode?[{debugName:"headingLevel"}]:[]);iconName=n(()=>String(this.model()?.icon??"").trim(),...ngDevMode?[{debugName:"iconName"}]:[]);hasTitle=n(()=>String(this.model()?.title??"").trim().length>0,...ngDevMode?[{debugName:"hasTitle"}]:[]);hasSubtitle=n(()=>String(this.model()?.subtitle??"").trim().length>0,...ngDevMode?[{debugName:"hasSubtitle"}]:[]);onTitleClick(e){const a={value:this.model().title,item:null,row:null};const o=String(this.model().name??"").trim();if(o)a[o]=this.model().title;this.elementActionService.runActions(this.model(),this.model().events??[],"click",a);e.stopPropagation()}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:l,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:l,isStandalone:true,selector:"page-title-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:t,template:"<element-wrapper [model]=\"model()\">\n <header\n class=\"nvb-page-title\"\n [ngClass]=\"alignClass()\"\n [attr.data-testid]=\"tid('root')\"\n (click)=\"onTitleClick($event)\"\n >\n @if (hasTitle() || iconName()) {\n <div class=\"nvb-page-title__heading\">\n @if (iconName()) {\n <nvb-icon class=\"nvb-page-title__icon\" [name]=\"iconName()\"></nvb-icon>\n }\n\n @if (hasTitle()) {\n @switch (headingLevel()) {\n @case ('h1') {\n <h1>{{ model().title | dynamicText: model() }}</h1>\n }\n @case ('h3') {\n <h3>{{ model().title | dynamicText: model() }}</h3>\n }\n @case ('h4') {\n <h4>{{ model().title | dynamicText: model() }}</h4>\n }\n @default {\n <h2>{{ model().title | dynamicText: model() }}</h2>\n }\n }\n }\n </div>\n }\n\n @if (hasSubtitle()) {\n <p class=\"nvb-page-title__subtitle\">{{ model().subtitle | dynamicText: model() }}</p>\n }\n\n @if (model().showDivider) {\n <hr class=\"nvb-page-title__divider\" />\n }\n </header>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-page-title{width:100%;display:grid;gap:6px;color:var(--nvb-color-neutral-700)}.nvb-page-title__heading{display:inline-flex;align-items:center;gap:8px;min-width:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4,.nvb-page-title p{margin:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4{line-height:1.3;color:var(--nvb-color-neutral-800);word-break:break-word}.nvb-page-title h1{font-size:clamp(24px,3.6vw,36px)}.nvb-page-title h2{font-size:clamp(20px,2.9vw,30px)}.nvb-page-title h3{font-size:clamp(18px,2.4vw,24px)}.nvb-page-title h4{font-size:clamp(16px,2vw,20px)}.nvb-page-title__subtitle{color:var(--nvb-color-neutral-500);font-size:13px;line-height:1.45;white-space:pre-wrap}.nvb-page-title__icon{font-size:20px;color:var(--nvb-color-primary-600);flex-shrink:0}.nvb-page-title__divider{width:100%;border:none;border-top:1px solid var(--nvb-color-neutral-300);margin:2px 0 0}.nvb-page-title--center{text-align:center;justify-items:center}.nvb-page-title--right{text-align:right;justify-items:end}\n"],dependencies:[{kind:"component",type:s,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:m,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:p,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:r,name:"dynamicText"}],changeDetection:t.ChangeDetectionStrategy.OnPush})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:i,decorators:[{type:v,args:[{selector:"page-title-element",changeDetection:h.OnPush,imports:[s,m,r,p],template:"<element-wrapper [model]=\"model()\">\n <header\n class=\"nvb-page-title\"\n [ngClass]=\"alignClass()\"\n [attr.data-testid]=\"tid('root')\"\n (click)=\"onTitleClick($event)\"\n >\n @if (hasTitle() || iconName()) {\n <div class=\"nvb-page-title__heading\">\n @if (iconName()) {\n <nvb-icon class=\"nvb-page-title__icon\" [name]=\"iconName()\"></nvb-icon>\n }\n\n @if (hasTitle()) {\n @switch (headingLevel()) {\n @case ('h1') {\n <h1>{{ model().title | dynamicText: model() }}</h1>\n }\n @case ('h3') {\n <h3>{{ model().title | dynamicText: model() }}</h3>\n }\n @case ('h4') {\n <h4>{{ model().title | dynamicText: model() }}</h4>\n }\n @default {\n <h2>{{ model().title | dynamicText: model() }}</h2>\n }\n }\n }\n </div>\n }\n\n @if (hasSubtitle()) {\n <p class=\"nvb-page-title__subtitle\">{{ model().subtitle | dynamicText: model() }}</p>\n }\n\n @if (model().showDivider) {\n <hr class=\"nvb-page-title__divider\" />\n }\n </header>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-page-title{width:100%;display:grid;gap:6px;color:var(--nvb-color-neutral-700)}.nvb-page-title__heading{display:inline-flex;align-items:center;gap:8px;min-width:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4,.nvb-page-title p{margin:0}.nvb-page-title h1,.nvb-page-title h2,.nvb-page-title h3,.nvb-page-title h4{line-height:1.3;color:var(--nvb-color-neutral-800);word-break:break-word}.nvb-page-title h1{font-size:clamp(24px,3.6vw,36px)}.nvb-page-title h2{font-size:clamp(20px,2.9vw,30px)}.nvb-page-title h3{font-size:clamp(18px,2.4vw,24px)}.nvb-page-title h4{font-size:clamp(16px,2vw,20px)}.nvb-page-title__subtitle{color:var(--nvb-color-neutral-500);font-size:13px;line-height:1.45;white-space:pre-wrap}.nvb-page-title__icon{font-size:20px;color:var(--nvb-color-primary-600);flex-shrink:0}.nvb-page-title__divider{width:100%;border:none;border-top:1px solid var(--nvb-color-neutral-300);margin:2px 0 0}.nvb-page-title--center{text-align:center;justify-items:center}.nvb-page-title--right{text-align:right;justify-items:end}\n"]}]}],propDecorators:{model:[{type:t.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{x as n,i as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as h}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{Ct as v,Et as b,Tt as g,_ as y,bt as f,n as u}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as C}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as x,t as m}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import{t as p}from"./ngxviewbuilder-runtime-nvb-select-DZN__Phy.mjs";import*as r from"@angular/core";import{ChangeDetectionStrategy as w,ChangeDetectorRef as I,Component as _,computed as o,inject as a,input as S,signal as c}from"@angular/core";var W=h({PhoneInputElement:()=>l});var l=class i{model=S.required(...ngDevMode?[{debugName:"model"}]:[]);tid=x(this.model,"nvb-phone-input","phone-input");useCompactStyle=c(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);selectedCountryCode=c("LT",...ngDevMode?[{debugName:"selectedCountryCode"}]:[]);allowedCountries=o(()=>g(this.model()?.allowedCountryCodes),...ngDevMode?[{debugName:"allowedCountries"}]:[]);maxLength=o(()=>{const e=Number(this.model()?.["maxlength"]);if(!Number.isFinite(e)||e<=0)return 0;return Math.floor(e)},...ngDevMode?[{debugName:"maxLength"}]:[]);showMaxLengthCounter=o(()=>{if(this.maxLength()<=0)return false;const e=this.model()?.["showMaxLengthCounter"];if(e===void 0||e===null)return true;return Boolean(e)},...ngDevMode?[{debugName:"showMaxLengthCounter"}]:[]);currentLength=o(()=>String(this.resolveNumberValue()??"").length,...ngDevMode?[{debugName:"currentLength"}]:[]);elementActionService=a(C);eventService=a(y);cdr=a(I);onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){if(this.model()?.parentElement&&this.model()?.parentElement instanceof f)this.useCompactStyle.set(Boolean(this.model()?.parentElement["useCompactStyle"]));const e=this.model().value;const t=b(String(e?.["countryIso"]??this.model()?.defaultCountryCode??"LT"));this.selectedCountryCode.set(t.isoCode);this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}selectedCountryIso(){const e=String(this.selectedCountryCode()??"").trim().toUpperCase();const t=this.allowedCountries();if(t.some(n=>n.isoCode===e))return e;return t[0]?.isoCode??v[0].isoCode}resolveNumberValue(){return String(this.model().value?.["number"]??"").trim()}resolvePlaceholder(){return String(this.model().placeholder??"").trim()||"61234567"}onCountryChange(e){if(this.model().disabled||this.model().readOnly)return;const t=String(e.target?.value??"").trim();this.selectedCountryCode.set(t||this.selectedCountryIso());this.model().setValueFromParts(this.selectedCountryIso(),this.resolveNumberValue(),"change");this.runActions("change")}onInput(e){this.commitValue(e,"input")}onChange(e){this.commitValue(e,"change")}onBlur(e){this.commitValue(e,"blur")}onFocus(e){this.runActions("focus",e)}commitValue(e,t){if(this.model().disabled||this.model().readOnly)return;const n=e.target;this.model().setValueFromParts(this.selectedCountryIso(),n?.value??"",t);this.runActions(t,e)}runActions(e,t){const n=this.model().value;const d=String(this.model().name??"").trim();const s={value:n,item:null,row:null,countryIso:n?.["countryIso"]??null,countryCode:n?.["countryCode"]??null,number:n?.["number"]??""};if(d)s[d]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,s)}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:i,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:i,isStandalone:true,selector:"phone-input-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:r,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div\n class=\"nvb-phone\"\n [class.nvb-phone--compact]=\"useCompactStyle()\"\n [attr.data-testid]=\"tid('input-root')\"\n >\n <nvb-select\n class=\"nvb-phone__country nvb-select--fit-content\"\n [value]=\"selectedCountryIso()\"\n [disabled]=\"model().disabled\"\n [required]=\"model().required\"\n [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : 'Country code'\"\n [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.data-testid]=\"tid('country')\"\n (change)=\"onCountryChange($event)\"\n >\n @for (country of allowedCountries(); track country.isoCode) {\n <option [value]=\"country.isoCode\">{{ country.isoCode }} ({{ country.dialCode }})</option>\n }\n </nvb-select>\n\n <input\n [id]=\"fieldWrapper.controlId()\"\n type=\"tel\"\n class=\"nvb-phone__number\"\n [placeholder]=\"resolvePlaceholder() | dynamicText: model()\"\n [disabled]=\"model().disabled\"\n [readOnly]=\"model().readOnly\"\n [attr.autocomplete]=\"model().autocomplete || 'tel'\"\n [attr.inputmode]=\"'tel'\"\n [attr.minlength]=\"model()['minlength'] ?? null\"\n [attr.maxlength]=\"model()['maxlength'] ?? null\"\n [attr.pattern]=\"model()['pattern'] ?? null\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n [attr.aria-required]=\"model().required ? 'true' : null\"\n [attr.data-testid]=\"tid('input')\"\n [value]=\"resolveNumberValue()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n />\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-phone{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;width:100%;align-items:stretch}.nvb-phone--compact{grid-template-columns:max-content minmax(0,1fr);gap:8px}.nvb-phone__country{width:fit-content;min-width:0;max-width:112px;--nvb-select-fit-min-width: 84px}.nvb-phone__number{width:100%;min-width:0;min-height:var(--nvb-input-height, 34px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;padding:0 10px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-phone__number:focus-visible{outline:0;border-color:var(--nvb-color-primary-500);box-shadow:0 0 0 2px color-mix(in oklch,var(--nvb-color-primary-500) 28%,transparent)}.nvb-phone__number:disabled{cursor:not-allowed;opacity:.75}@media(max-width:640px){.nvb-phone{grid-template-columns:1fr}.nvb-phone__country{width:100%;max-width:none}}\n"],dependencies:[{kind:"component",type:m,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:p,selector:"nvb-select",inputs:["value","disabled","required","filterable","filterThreshold","allowCustomValue","placeholder","testId"],outputs:["valueChange","change","focus","blur"]},{kind:"pipe",type:u,name:"dynamicText"}],changeDetection:r.ChangeDetectionStrategy.OnPush})};r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:r,type:l,decorators:[{type:_,args:[{selector:"phone-input-element",changeDetection:w.OnPush,imports:[m,u,p],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n <div\n class=\"nvb-phone\"\n [class.nvb-phone--compact]=\"useCompactStyle()\"\n [attr.data-testid]=\"tid('input-root')\"\n >\n <nvb-select\n class=\"nvb-phone__country nvb-select--fit-content\"\n [value]=\"selectedCountryIso()\"\n [disabled]=\"model().disabled\"\n [required]=\"model().required\"\n [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : 'Country code'\"\n [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.data-testid]=\"tid('country')\"\n (change)=\"onCountryChange($event)\"\n >\n @for (country of allowedCountries(); track country.isoCode) {\n <option [value]=\"country.isoCode\">{{ country.isoCode }} ({{ country.dialCode }})</option>\n }\n </nvb-select>\n\n <input\n [id]=\"fieldWrapper.controlId()\"\n type=\"tel\"\n class=\"nvb-phone__number\"\n [placeholder]=\"resolvePlaceholder() | dynamicText: model()\"\n [disabled]=\"model().disabled\"\n [readOnly]=\"model().readOnly\"\n [attr.autocomplete]=\"model().autocomplete || 'tel'\"\n [attr.inputmode]=\"'tel'\"\n [attr.minlength]=\"model()['minlength'] ?? null\"\n [attr.maxlength]=\"model()['maxlength'] ?? null\"\n [attr.pattern]=\"model()['pattern'] ?? null\"\n [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n [attr.aria-required]=\"model().required ? 'true' : null\"\n [attr.data-testid]=\"tid('input')\"\n [value]=\"resolveNumberValue()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n />\n </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-phone{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;width:100%;align-items:stretch}.nvb-phone--compact{grid-template-columns:max-content minmax(0,1fr);gap:8px}.nvb-phone__country{width:fit-content;min-width:0;max-width:112px;--nvb-select-fit-min-width: 84px}.nvb-phone__number{width:100%;min-width:0;min-height:var(--nvb-input-height, 34px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;padding:0 10px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-phone__number:focus-visible{outline:0;border-color:var(--nvb-color-primary-500);box-shadow:0 0 0 2px color-mix(in oklch,var(--nvb-color-primary-500) 28%,transparent)}.nvb-phone__number:disabled{cursor:not-allowed;opacity:.75}@media(max-width:640px){.nvb-phone{grid-template-columns:1fr}.nvb-phone__country{width:100%;max-width:none}}\n"]}]}],propDecorators:{model:[{type:r.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{W as n,l as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as m}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{n as c,on as b,sn as f}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{i as p,r as h,t as d}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as e from"@angular/core";import{ChangeDetectionStrategy as _,Component as x,Injector as k,computed as a,effect as y,inject as v,input as w,signal as n}from"@angular/core";import{NgClass as g}from"@angular/common";var I=m({ProgressBarElement:()=>o});var o=class l{model=w.required(...ngDevMode?[{debugName:"model"}]:[]);tid=h(this.model,"nvb-progress-bar","progress-bar");instanceToken=a(()=>p(this.model()?.dataPath)||p(this.model()?.name),...ngDevMode?[{debugName:"instanceToken"}]:[]);dataSourceLoaded=n(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=n(b.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);progressValue=n(0,...ngDevMode?[{debugName:"progressValue"}]:[]);progressMax=n(100,...ngDevMode?[{debugName:"progressMax"}]:[]);progressPercent=a(()=>{const r=this.model().resolveMin();const s=this.progressMax();const i=this.progressValue();const t=s-r;if(t<=0)return i>=s?100:0;const u=(i-r)/t*100;return Math.max(0,Math.min(100,u))},...ngDevMode?[{debugName:"progressPercent"}]:[]);shellClass=a(()=>({[`nvb-progress-bar--variant-${this.model().variant}`]:true,[`nvb-progress-bar--display-${this.model().displayType}`]:true,[`nvb-progress-bar--style-${this.model().styleType}`]:true}),...ngDevMode?[{debugName:"shellClass"}]:[]);isCircular=a(()=>this.model().displayType==="circular",...ngDevMode?[{debugName:"isCircular"}]:[]);trackAriaValueText=a(()=>{return`${this.formatNumber(this.progressValue())} of ${this.formatNumber(this.progressMax())} (${this.formatNumber(this.progressPercent())}%)`},...ngDevMode?[{debugName:"trackAriaValueText"}]:[]);displayValue=a(()=>{return`${this.formatNumber(this.progressValue())} / ${this.formatNumber(this.progressMax())}`},...ngDevMode?[{debugName:"displayValue"}]:[]);valueLabelText=a(()=>{const r=this.model().valueLabelMode;if(r==="value")return this.formatNumber(this.progressValue());if(r==="fraction")return this.displayValue();return`${this.formatNumber(this.progressPercent())}%`},...ngDevMode?[{debugName:"valueLabelText"}]:[]);circleCircumference=a(()=>2*Math.PI*54,...ngDevMode?[{debugName:"circleCircumference"}]:[]);circleDashOffset=a(()=>this.circleCircumference()*(1-this.progressPercent()/100),...ngDevMode?[{debugName:"circleDashOffset"}]:[]);dataService=v(f);injector=v(k);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.syncFromModel()};ngOnInit(){this.dataSourceLoaded.set(!this.model().dataSource||Boolean(this.model().dataSourceLoaded));this.isEditorView.set(b.isEditor());this.model().afterDataSourceLoad?.add(this.onDataSourceLoadedHandler);this.syncFromModel();y(()=>{const r=String(this.model()?.dataPath??"").trim();if(!r){this.syncFromModel();return}const s=this.dataService.getValue(r);if(s!==void 0&&!Object.is(this.model().value,s))this.model().value=s;this.syncFromModel()},{injector:this.injector})}ngOnDestroy(){this.model().afterDataSourceLoad?.remove(this.onDataSourceLoadedHandler)}syncFromModel(){const r=this.model().resolveProgressState();this.progressMax.set(r.max);this.progressValue.set(r.value)}formatNumber(r){if(!Number.isFinite(r))return"0";if(Number.isInteger(r))return String(r);return String(Number(r.toFixed(2))).replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:l,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:l,isStandalone:true,selector:"progress-bar-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:e,template:"<element-wrapper [model]=\"model()\" [showTextWrapperInput]=\"false\" #fieldWrapper=\"elementWrapper\">\n @if (model().dataSource && !dataSourceLoaded()) {\n @if (isEditorView()) {\n <div class=\"nvb-progress-bar nvb-progress-bar--editor-placeholder\" [ngClass]=\"shellClass()\">\n @if (isCircular()) {\n <div class=\"nvb-progress-bar__circle-shell nvb-progress-bar__circle-shell--placeholder\">\n <svg class=\"nvb-progress-bar__circle\" viewBox=\"0 0 128 128\" aria-hidden=\"true\">\n <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n <circle\n class=\"nvb-progress-bar__circle-fill\"\n cx=\"64\"\n cy=\"64\"\n r=\"54\"\n [attr.stroke-dasharray]=\"circleCircumference()\"\n [attr.stroke-dashoffset]=\"circleCircumference() * 0.58\"\n ></circle>\n </svg>\n <span class=\"nvb-progress-bar__circle-value\">42</span>\n </div>\n } @else {\n <div class=\"nvb-progress-bar__track\">\n <div class=\"nvb-progress-bar__fill\" style=\"width: 42%\"></div>\n </div>\n }\n\n <small class=\"nvb-progress-bar__source\">\n {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n </small>\n </div>\n } @else {\n <div class=\"nvb-progress-bar nvb-progress-bar--loading\" aria-busy=\"true\" role=\"status\">\n <div class=\"nvb-progress-bar__track\">\n <div class=\"nvb-progress-bar__fill nvb-progress-bar__fill--loading\"></div>\n </div>\n </div>\n }\n } @else {\n <div class=\"nvb-progress-bar\" [ngClass]=\"shellClass()\">\n @if (model().label || (model().showValueLabel && !isCircular())) {\n <div class=\"nvb-progress-bar__header\">\n @if (model().label) {\n <span\n [id]=\"fieldWrapper.labelId()\"\n class=\"nvb-progress-bar__label\"\n [attr.data-testid]=\"instanceToken() ? 'nvb-label-' + instanceToken() : null\"\n >\n {{ model().label | dynamicText: model() }}\n </span>\n }\n\n @if (model().showValueLabel && !isCircular()) {\n <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__value\">\n {{ valueLabelText() }}\n </span>\n }\n </div>\n }\n\n @if (isCircular()) {\n <div class=\"nvb-progress-bar__circle-shell\">\n <svg\n class=\"nvb-progress-bar__circle\"\n [id]=\"fieldWrapper.controlId()\"\n viewBox=\"0 0 128 128\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n [attr.aria-describedby]=\"\n fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n \"\n [attr.aria-valuemin]=\"model().resolveMin()\"\n [attr.aria-valuemax]=\"progressMax()\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuetext]=\"trackAriaValueText()\"\n [attr.data-testid]=\"tid('root')\"\n >\n <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n <circle\n class=\"nvb-progress-bar__circle-fill\"\n cx=\"64\"\n cy=\"64\"\n r=\"54\"\n [attr.stroke-dasharray]=\"circleCircumference()\"\n [attr.stroke-dashoffset]=\"circleDashOffset()\"\n ></circle>\n </svg>\n\n @if (model().showValueLabel) {\n <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__circle-value\">\n {{ valueLabelText() }}\n </span>\n }\n </div>\n } @else {\n <div\n class=\"nvb-progress-bar__track\"\n [id]=\"fieldWrapper.controlId()\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n [attr.aria-describedby]=\"\n fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n \"\n [attr.aria-valuemin]=\"model().resolveMin()\"\n [attr.aria-valuemax]=\"progressMax()\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuetext]=\"trackAriaValueText()\"\n [attr.data-testid]=\"tid('root')\"\n >\n <div\n class=\"nvb-progress-bar__fill\"\n [style.width.%]=\"progressPercent()\"\n [style.--nvb-progress-percent]=\"progressPercent()\"\n ></div>\n </div>\n }\n\n @if (model().description) {\n <span\n [id]=\"fieldWrapper.descriptionId()\"\n class=\"nvb-progress-bar__description\"\n [attr.data-testid]=\"instanceToken() ? 'nvb-description-' + instanceToken() : null\"\n >\n {{ model().description | dynamicText: model() }}\n </span>\n }\n </div>\n }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-progress-bar{--nvb-progress-fill: var(--nvb-color-primary-600);--nvb-progress-fill-strong: var(--nvb-color-primary-600);--nvb-progress-track: color-mix( in oklab, var(--nvb-color-neutral-200) 82%, var(--nvb-color-neutral-000) );--nvb-progress-track-border: color-mix(in oklab, var(--nvb-color-neutral-300) 70%, transparent);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}.nvb-progress-bar--variant-success{--nvb-progress-fill: var(--nvb-color-success-500);--nvb-progress-fill-strong: var(--nvb-color-success-600)}.nvb-progress-bar--variant-warning{--nvb-progress-fill: var(--nvb-color-warning-500);--nvb-progress-fill-strong: var(--nvb-color-warning-700)}.nvb-progress-bar--variant-risk{--nvb-progress-fill: var(--nvb-color-risk-500);--nvb-progress-fill-strong: var(--nvb-color-risk-600)}.nvb-progress-bar__track{position:relative;overflow:hidden;width:100%;min-width:0;height:12px;border-radius:var(--nvb-radius-full);background:var(--nvb-progress-track);border:1px solid var(--nvb-progress-track-border);box-shadow:inset 0 1px 2px #0f172a0f}.nvb-progress-bar__fill{position:relative;height:100%;max-width:100%;border-radius:inherit;background:var(--nvb-progress-fill-strong);transition:width .22s ease}.nvb-progress-bar__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.nvb-progress-bar__label{min-width:0;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__track{background:color-mix(in oklab,var(--nvb-progress-fill) 10%,var(--nvb-color-neutral-000));border-color:color-mix(in oklab,var(--nvb-progress-fill) 18%,var(--nvb-color-neutral-200))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__fill{background:color-mix(in oklab,var(--nvb-progress-fill) 76%,var(--nvb-color-neutral-000))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-striped .nvb-progress-bar__fill{background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--nvb-progress-fill-strong) 88%,white) 0 12px,var(--nvb-progress-fill) 12px 24px),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong));background-size:32px 32px,100% 100%;animation:nvb-progress-bar-stripes 1s linear infinite}.nvb-progress-bar--display-linear.nvb-progress-bar--style-segmented .nvb-progress-bar__fill{background:repeating-linear-gradient(90deg,var(--nvb-progress-fill) 0 calc(25% - 2px),color-mix(in oklab,var(--nvb-color-neutral-000) 86%,transparent) calc(25% - 2px) 25%),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong))}.nvb-progress-bar__value{flex:0 0 auto;text-align:right;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-800);font-variant-numeric:tabular-nums}.nvb-progress-bar__description{font-size:12px;line-height:16px;color:var(--nvb-color-neutral-500)}.nvb-progress-bar__circle-shell{position:relative;display:grid;place-items:center;width:min(172px,100%);aspect-ratio:1;align-self:flex-start}.nvb-progress-bar__circle{width:100%;height:100%;overflow:visible}.nvb-progress-bar__circle-track,.nvb-progress-bar__circle-fill{fill:none;stroke-width:10}.nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-color-neutral-200) 84%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-fill{stroke:var(--nvb-progress-fill-strong);stroke-linecap:round;transform:rotate(-90deg);transform-origin:64px 64px;transition:stroke-dashoffset .22s ease}.nvb-progress-bar--display-circular.nvb-progress-bar--style-soft .nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-progress-fill) 14%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-value{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;line-height:1;font-weight:500;color:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-progress-bar__circle-shell--placeholder{opacity:.9}.nvb-progress-bar__fill--loading{width:36%;background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 0%,var(--nvb-color-primary-500) 50%,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 100%);background-size:200% 100%;animation:nvb-progress-bar-loading 1.2s ease-in-out infinite}.nvb-progress-bar--editor-placeholder{flex-direction:column;align-items:stretch;gap:6px}.nvb-progress-bar__source{color:var(--nvb-color-neutral-500);font-size:12px;line-height:16px}.nvb-progress-bar--display-circular{width:fit-content;max-width:100%}@keyframes nvb-progress-bar-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes nvb-progress-bar-stripes{0%{background-position:0 0,0 0}to{background-position:32px 0,0 0}}\n"],dependencies:[{kind:"component",type:d,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:g,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:c,name:"dynamicText"}],changeDetection:e.ChangeDetectionStrategy.OnPush})};e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:e,type:o,decorators:[{type:x,args:[{selector:"progress-bar-element",changeDetection:_.OnPush,imports:[d,g,c],template:"<element-wrapper [model]=\"model()\" [showTextWrapperInput]=\"false\" #fieldWrapper=\"elementWrapper\">\n @if (model().dataSource && !dataSourceLoaded()) {\n @if (isEditorView()) {\n <div class=\"nvb-progress-bar nvb-progress-bar--editor-placeholder\" [ngClass]=\"shellClass()\">\n @if (isCircular()) {\n <div class=\"nvb-progress-bar__circle-shell nvb-progress-bar__circle-shell--placeholder\">\n <svg class=\"nvb-progress-bar__circle\" viewBox=\"0 0 128 128\" aria-hidden=\"true\">\n <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n <circle\n class=\"nvb-progress-bar__circle-fill\"\n cx=\"64\"\n cy=\"64\"\n r=\"54\"\n [attr.stroke-dasharray]=\"circleCircumference()\"\n [attr.stroke-dashoffset]=\"circleCircumference() * 0.58\"\n ></circle>\n </svg>\n <span class=\"nvb-progress-bar__circle-value\">42</span>\n </div>\n } @else {\n <div class=\"nvb-progress-bar__track\">\n <div class=\"nvb-progress-bar__fill\" style=\"width: 42%\"></div>\n </div>\n }\n\n <small class=\"nvb-progress-bar__source\">\n {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n </small>\n </div>\n } @else {\n <div class=\"nvb-progress-bar nvb-progress-bar--loading\" aria-busy=\"true\" role=\"status\">\n <div class=\"nvb-progress-bar__track\">\n <div class=\"nvb-progress-bar__fill nvb-progress-bar__fill--loading\"></div>\n </div>\n </div>\n }\n } @else {\n <div class=\"nvb-progress-bar\" [ngClass]=\"shellClass()\">\n @if (model().label || (model().showValueLabel && !isCircular())) {\n <div class=\"nvb-progress-bar__header\">\n @if (model().label) {\n <span\n [id]=\"fieldWrapper.labelId()\"\n class=\"nvb-progress-bar__label\"\n [attr.data-testid]=\"instanceToken() ? 'nvb-label-' + instanceToken() : null\"\n >\n {{ model().label | dynamicText: model() }}\n </span>\n }\n\n @if (model().showValueLabel && !isCircular()) {\n <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__value\">\n {{ valueLabelText() }}\n </span>\n }\n </div>\n }\n\n @if (isCircular()) {\n <div class=\"nvb-progress-bar__circle-shell\">\n <svg\n class=\"nvb-progress-bar__circle\"\n [id]=\"fieldWrapper.controlId()\"\n viewBox=\"0 0 128 128\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n [attr.aria-describedby]=\"\n fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n \"\n [attr.aria-valuemin]=\"model().resolveMin()\"\n [attr.aria-valuemax]=\"progressMax()\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuetext]=\"trackAriaValueText()\"\n [attr.data-testid]=\"tid('root')\"\n >\n <circle class=\"nvb-progress-bar__circle-track\" cx=\"64\" cy=\"64\" r=\"54\"></circle>\n <circle\n class=\"nvb-progress-bar__circle-fill\"\n cx=\"64\"\n cy=\"64\"\n r=\"54\"\n [attr.stroke-dasharray]=\"circleCircumference()\"\n [attr.stroke-dashoffset]=\"circleDashOffset()\"\n ></circle>\n </svg>\n\n @if (model().showValueLabel) {\n <span [id]=\"fieldWrapper.partId('value')\" class=\"nvb-progress-bar__circle-value\">\n {{ valueLabelText() }}\n </span>\n }\n </div>\n } @else {\n <div\n class=\"nvb-progress-bar__track\"\n [id]=\"fieldWrapper.controlId()\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\n [attr.aria-describedby]=\"\n fieldWrapper.describedByIds(model().showValueLabel ? fieldWrapper.partId('value') : null)\n \"\n [attr.aria-valuemin]=\"model().resolveMin()\"\n [attr.aria-valuemax]=\"progressMax()\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuetext]=\"trackAriaValueText()\"\n [attr.data-testid]=\"tid('root')\"\n >\n <div\n class=\"nvb-progress-bar__fill\"\n [style.width.%]=\"progressPercent()\"\n [style.--nvb-progress-percent]=\"progressPercent()\"\n ></div>\n </div>\n }\n\n @if (model().description) {\n <span\n [id]=\"fieldWrapper.descriptionId()\"\n class=\"nvb-progress-bar__description\"\n [attr.data-testid]=\"instanceToken() ? 'nvb-description-' + instanceToken() : null\"\n >\n {{ model().description | dynamicText: model() }}\n </span>\n }\n </div>\n }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-progress-bar{--nvb-progress-fill: var(--nvb-color-primary-600);--nvb-progress-fill-strong: var(--nvb-color-primary-600);--nvb-progress-track: color-mix( in oklab, var(--nvb-color-neutral-200) 82%, var(--nvb-color-neutral-000) );--nvb-progress-track-border: color-mix(in oklab, var(--nvb-color-neutral-300) 70%, transparent);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}.nvb-progress-bar--variant-success{--nvb-progress-fill: var(--nvb-color-success-500);--nvb-progress-fill-strong: var(--nvb-color-success-600)}.nvb-progress-bar--variant-warning{--nvb-progress-fill: var(--nvb-color-warning-500);--nvb-progress-fill-strong: var(--nvb-color-warning-700)}.nvb-progress-bar--variant-risk{--nvb-progress-fill: var(--nvb-color-risk-500);--nvb-progress-fill-strong: var(--nvb-color-risk-600)}.nvb-progress-bar__track{position:relative;overflow:hidden;width:100%;min-width:0;height:12px;border-radius:var(--nvb-radius-full);background:var(--nvb-progress-track);border:1px solid var(--nvb-progress-track-border);box-shadow:inset 0 1px 2px #0f172a0f}.nvb-progress-bar__fill{position:relative;height:100%;max-width:100%;border-radius:inherit;background:var(--nvb-progress-fill-strong);transition:width .22s ease}.nvb-progress-bar__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.nvb-progress-bar__label{min-width:0;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-900)}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__track{background:color-mix(in oklab,var(--nvb-progress-fill) 10%,var(--nvb-color-neutral-000));border-color:color-mix(in oklab,var(--nvb-progress-fill) 18%,var(--nvb-color-neutral-200))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-soft .nvb-progress-bar__fill{background:color-mix(in oklab,var(--nvb-progress-fill) 76%,var(--nvb-color-neutral-000))}.nvb-progress-bar--display-linear.nvb-progress-bar--style-striped .nvb-progress-bar__fill{background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--nvb-progress-fill-strong) 88%,white) 0 12px,var(--nvb-progress-fill) 12px 24px),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong));background-size:32px 32px,100% 100%;animation:nvb-progress-bar-stripes 1s linear infinite}.nvb-progress-bar--display-linear.nvb-progress-bar--style-segmented .nvb-progress-bar__fill{background:repeating-linear-gradient(90deg,var(--nvb-progress-fill) 0 calc(25% - 2px),color-mix(in oklab,var(--nvb-color-neutral-000) 86%,transparent) calc(25% - 2px) 25%),linear-gradient(90deg,var(--nvb-progress-fill),var(--nvb-progress-fill-strong))}.nvb-progress-bar__value{flex:0 0 auto;text-align:right;font-size:14px;line-height:18px;font-weight:600;color:var(--nvb-color-neutral-800);font-variant-numeric:tabular-nums}.nvb-progress-bar__description{font-size:12px;line-height:16px;color:var(--nvb-color-neutral-500)}.nvb-progress-bar__circle-shell{position:relative;display:grid;place-items:center;width:min(172px,100%);aspect-ratio:1;align-self:flex-start}.nvb-progress-bar__circle{width:100%;height:100%;overflow:visible}.nvb-progress-bar__circle-track,.nvb-progress-bar__circle-fill{fill:none;stroke-width:10}.nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-color-neutral-200) 84%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-fill{stroke:var(--nvb-progress-fill-strong);stroke-linecap:round;transform:rotate(-90deg);transform-origin:64px 64px;transition:stroke-dashoffset .22s ease}.nvb-progress-bar--display-circular.nvb-progress-bar--style-soft .nvb-progress-bar__circle-track{stroke:color-mix(in oklab,var(--nvb-progress-fill) 14%,var(--nvb-color-neutral-000))}.nvb-progress-bar__circle-value{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;line-height:1;font-weight:500;color:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-progress-bar__circle-shell--placeholder{opacity:.9}.nvb-progress-bar__fill--loading{width:36%;background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 0%,var(--nvb-color-primary-500) 50%,color-mix(in oklab,var(--nvb-color-primary-400) 74%,var(--nvb-color-primary-300)) 100%);background-size:200% 100%;animation:nvb-progress-bar-loading 1.2s ease-in-out infinite}.nvb-progress-bar--editor-placeholder{flex-direction:column;align-items:stretch;gap:6px}.nvb-progress-bar__source{color:var(--nvb-color-neutral-500);font-size:12px;line-height:16px}.nvb-progress-bar--display-circular{width:fit-content;max-width:100%}@keyframes nvb-progress-bar-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes nvb-progress-bar-stripes{0%{background-position:0 0,0 0}to{background-position:32px 0,0 0}}\n"]}]}],propDecorators:{model:[{type:e.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{I as n,o as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as b}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as m,f as h,on as c,sn as g}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as f,ot as x}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{i as p,t as u}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as i from"@angular/core";import{ChangeDetectionStrategy as y,Component as w,computed as v,inject as r,input as I,signal as l}from"@angular/core";var S=b({RadioElement:()=>s});var s=class d{model=I.required(...ngDevMode?[{debugName:"model"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(c.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);loadingPlaceholderItems=[0,1,2];dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);dataService=r(g);eventService=r(m);expressionService=r(h);elementActionService=r(f);visibleOptions=v(()=>{this.dataVersion();return(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))},...ngDevMode?[{debugName:"visibleOptions"}]:[]);dataSourceLoading=v(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){const e=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(e);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(c.isEditor())}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler)}selectOption(e){if(this.isInteractionLocked())return;this.model().value=e.value;this.model().setValue(this.model().value,"change");this.runActions("input",e);this.runActions("change",e)}onOptionFocus(e){if(this.isInteractionLocked())return;this.runActions("focus",e)}onOptionBlur(e){if(this.isInteractionLocked())return;this.runActions("blur",e)}resolveOptionInputId(e,n){return`${this.slugify(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"radio")}-option-${this.slugify(String(e?.value??n).trim()||String(n+1))}`}resolveOptionTestId(e,n){return`nvb-${p(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"radio")}-radio-${p(String(e?.value??n).trim()||String(n+1))}`}resolveOptionAriaLabel(e,n){const t=String(e?.label??"").trim();if(t)return t;return`Option ${n+1}`}isOptionVisible(e){const n=String(e?.visibleIf??"").trim();if(!n)return true;try{const t=n.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return true;const o=this.expressionService.applyContextToExpression(t,this.model());return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),o)}catch{return true}}passesOptionFilters(e){const n=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const t=String(this.model().filterIfEqual??"").trim();const o=String(this.model().filterIfNotEqual??"").trim();if(!n&&!t&&!o)return true;const a=this.dataService.getData()??{};return x([e],n,a,{valuePath:"value",filterIfEqual:t,filterIfNotEqual:o}).length>0}runActions(e,n){const t=this.model().value;const o=String(this.model().name??"").trim();const a={value:t,item:n??null,row:null};if(o)a[o]=t;this.elementActionService.runActions(this.model(),this.model().events??[],e,a)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return this.dataSourceLoading()||Boolean(e.disabled)||Boolean(e.readOnly)}slugify(e){return String(e??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:d,deps:[],target:i.ɵɵFactoryTarget.Component});static ɵcmp=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:d,isStandalone:true,selector:"radio-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:i,template:'<element-wrapper\n [model]="model()"\n [labelForInput]="null"\n groupRole="radiogroup"\n #fieldWrapper="elementWrapper"\n>\n @if (model().dataSource && !dataSourceLoaded()) {\n @if (isEditorView()) {\n <div class="nvb-empty-element-wrapper">\n <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n </ul>\n <small class="nvb-element-title">\n <span class="material-symbols-outlined">database</span>\n {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n </small>\n </div>\n } @else {\n <ul\n [id]="fieldWrapper.controlId()"\n class="nvb-choice-list nvb-choice-list--loading"\n [class.nvb-choice-list--fit-content]="model().fitContent"\n [class.nvb-row]="model().showInline"\n [class.nvb-column]="!model().showInline"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n aria-busy="true"\n aria-live="polite"\n role="status"\n >\n @for (placeholder of loadingPlaceholderItems; track placeholder) {\n <li class="nvb-choice-loading-item" aria-hidden="true">\n <span class="nvb-choice-loading-dot"></span>\n <span class="nvb-choice-loading-line"></span>\n </li>\n }\n <span class="nvb-sr-only">Loading radio options...</span>\n </ul>\n }\n } @else {\n <ul\n [id]="fieldWrapper.controlId()"\n class="nvb-choice-list"\n [class.nvb-choice-list--fit-content]="model().fitContent"\n [class.nvb-row]="model().showInline"\n [class.nvb-column]="!model().showInline"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n >\n @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n <li class="nvb-input-wrapper">\n <input\n [id]="resolveOptionInputId(option, optionIndex)"\n type="radio"\n class="nvb-control__radio-input"\n [attr.name]="model().name"\n [attr.value]="option.value"\n [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n [disabled]="model().disabled"\n (click)="selectOption(option)"\n (focus)="onOptionFocus(option)"\n (blur)="onOptionBlur(option)"\n [checked]="model().value === option.value"\n />\n <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n </li>\n }\n </ul>\n }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__radio-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__radio-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-dot{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-full);background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:radio-choice-shimmer 1.35s ease-in-out infinite}@keyframes radio-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"],dependencies:[{kind:"component",type:u,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:i.ChangeDetectionStrategy.OnPush})};i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:i,type:s,decorators:[{type:w,args:[{selector:"radio-element",changeDetection:y.OnPush,imports:[u],template:'<element-wrapper\n [model]="model()"\n [labelForInput]="null"\n groupRole="radiogroup"\n #fieldWrapper="elementWrapper"\n>\n @if (model().dataSource && !dataSourceLoaded()) {\n @if (isEditorView()) {\n <div class="nvb-empty-element-wrapper">\n <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n <li>\n <input type="checkbox" class="nvb-control__radio-input" tabindex="-1" aria-hidden="true" disabled />\n <hr class="nvb-empty-row__blank" />\n </li>\n </ul>\n <small class="nvb-element-title">\n <span class="material-symbols-outlined">database</span>\n {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n </small>\n </div>\n } @else {\n <ul\n [id]="fieldWrapper.controlId()"\n class="nvb-choice-list nvb-choice-list--loading"\n [class.nvb-choice-list--fit-content]="model().fitContent"\n [class.nvb-row]="model().showInline"\n [class.nvb-column]="!model().showInline"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n aria-busy="true"\n aria-live="polite"\n role="status"\n >\n @for (placeholder of loadingPlaceholderItems; track placeholder) {\n <li class="nvb-choice-loading-item" aria-hidden="true">\n <span class="nvb-choice-loading-dot"></span>\n <span class="nvb-choice-loading-line"></span>\n </li>\n }\n <span class="nvb-sr-only">Loading radio options...</span>\n </ul>\n }\n } @else {\n <ul\n [id]="fieldWrapper.controlId()"\n class="nvb-choice-list"\n [class.nvb-choice-list--fit-content]="model().fitContent"\n [class.nvb-row]="model().showInline"\n [class.nvb-column]="!model().showInline"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n >\n @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n <li class="nvb-input-wrapper">\n <input\n [id]="resolveOptionInputId(option, optionIndex)"\n type="radio"\n class="nvb-control__radio-input"\n [attr.name]="model().name"\n [attr.value]="option.value"\n [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n [attr.aria-describedby]="fieldWrapper.describedByIds()"\n [disabled]="model().disabled"\n (click)="selectOption(option)"\n (focus)="onOptionFocus(option)"\n (blur)="onOptionBlur(option)"\n [checked]="model().value === option.value"\n />\n <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n </li>\n }\n </ul>\n }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__radio-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__radio-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-dot{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-full);background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:radio-choice-shimmer 1.35s ease-in-out infinite}@keyframes radio-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"]}]}],propDecorators:{model:[{type:i.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{S as n,s as t};
|