@ngxviewbuilder/runtime 0.12.3 → 0.12.4

package/fesm2022/{ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs → ngxviewbuilder-runtime-element-wrapper-EBaWVZvf.mjs}

@@ -1 +1 @@
-import{n as L,on as g,r as N,t as F}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as q,at as z,ct as P,lt as $}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import*as t from"@angular/core";import{ChangeDetectionStrategy as _,Component as h,HostBinding as x,HostListener as C,ViewEncapsulation as A,computed as v,effect as H,inject as u,input as l,output as R,signal as a,viewChild as W}from"@angular/core";var w=class I{name=l("",...ngDevMode?[{debugName:"name"}]:[]);svg=l(null,...ngDevMode?[{debugName:"svg"}]:[]);ariaLabel=l(null,...ngDevMode?[{debugName:"ariaLabel"}]:[]);contentRef=W("contentRef",...ngDevMode?[{debugName:"contentRef"}]:[]);iconSvgService=u(P);markupSecurityService=u($);safeSvg=v(()=>{this.iconSvgService.iconSetVersion();const e=String(this.svg()??"").trim();return e?this.markupSecurityService.sanitizeSvg(e):this.iconSvgService.getSvg(this.name())},...ngDevMode?[{debugName:"safeSvg"}]:[]);constructor(){H(()=>{const e=this.contentRef()?.nativeElement;if(!e)return;const n=this.safeSvg();if(e.innerHTML!==n)e.innerHTML=n})}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:I,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.2.0",version:"22.2.1",type:I,isStandalone:true,selector:"nvb-icon",inputs:{name:{classPropertyName:"name",publicName:"name",isSignal:true,isRequired:false,transformFunction:null},svg:{classPropertyName:"svg",publicName:"svg",isSignal:true,isRequired:false,transformFunction:null},ariaLabel:{classPropertyName:"ariaLabel",publicName:"ariaLabel",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-icon":"name()","attr.aria-label":"ariaLabel()","attr.role":'ariaLabel() ? "img" : null',"attr.aria-hidden":'ariaLabel() ? null : "true"'},classAttribute:"nvb-icon-svg"},viewQueries:[{propertyName:"contentRef",first:true,predicate:["contentRef"],descendants:true,isSignal:true}],ngImport:t,template:'<span #contentRef class="nvb-icon-svg__content"></span>\n',styles:[".nvb-icon-svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;line-height:1;vertical-align:middle;color:currentColor;flex-shrink:0}.nvb-icon-svg__content{display:inline-flex;width:100%;height:100%}.nvb-icon-svg svg{width:100%;height:100%;display:block;fill:currentColor;max-width:100%;max-height:100%}\n"],changeDetection:t.ChangeDetectionStrategy.Eager,encapsulation:t.ViewEncapsulation.None})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:w,decorators:[{type:h,args:[{selector:"nvb-icon",imports:[],encapsulation:A.None,changeDetection:_.Eager,host:{class:"nvb-icon-svg","[attr.data-icon]":"name()","[attr.aria-label]":"ariaLabel()","[attr.role]":'ariaLabel() ? "img" : null',"[attr.aria-hidden]":'ariaLabel() ? null : "true"'},template:'<span #contentRef class="nvb-icon-svg__content"></span>\n',styles:[".nvb-icon-svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;line-height:1;vertical-align:middle;color:currentColor;flex-shrink:0}.nvb-icon-svg__content{display:inline-flex;width:100%;height:100%}.nvb-icon-svg svg{width:100%;height:100%;display:block;fill:currentColor;max-width:100%;max-height:100%}\n"]}]}],ctorParameters:()=>[],propDecorators:{name:[{type:t.Input,args:[{isSignal:true,alias:"name",required:false}]}],svg:[{type:t.Input,args:[{isSignal:true,alias:"svg",required:false}]}],ariaLabel:[{type:t.Input,args:[{isSignal:true,alias:"ariaLabel",required:false}]}],contentRef:[{type:t.ViewChild,args:["contentRef",{isSignal:true}]}]}});function y(i){if(typeof window==="undefined")return k(0,0,0,0);const e=k(0,0,window.innerWidth??0,window.innerHeight??0);const n=i?j(i):null;if(!n)return e;const o=n.getBoundingClientRect();const r=window.getComputedStyle(n);return k(o.left+m(r.borderLeftWidth),o.top+m(r.borderTopWidth),o.right-m(r.borderRightWidth),o.bottom-m(r.borderBottomWidth))}function k(i,e,n,o){return{left:i,top:e,right:n,bottom:o,width:Math.max(0,n-i),height:Math.max(0,o-e)}}function j(i){let e=M(i);while(e){if(B(e))return e;e=M(e)}return null}function M(i){const e=i.parentElement;if(e)return e;const n=i.getRootNode?.()?.host;return n instanceof HTMLElement?n:null}function B(i){const e=window.getComputedStyle(i);if(s(e.transform)||s(e.perspective)||s(e.filter)||s(e.backdropFilter)||s(e.translate)||s(e.rotate)||s(e.scale))return true;if(/\b(paint|layout|strict|content)\b/.test(e.contain??""))return true;return/\b(transform|translate|rotate|scale|perspective|filter|backdrop-filter|contain)\b/.test(e.willChange??"")}function s(i){const e=String(i??"").trim();return e.length>0&&e!=="none"}function m(i){const e=Number.parseFloat(String(i??""));return Number.isFinite(e)?e:0}function c(i){const e=String(i??"").trim();const n=e.replace(/[^A-Za-z0-9_]+/g,"-").replace(/^-+|-+$/g,"");if(n||!e)return n;return Array.from(e).map(o=>O[o]??`u${o.codePointAt(0)?.toString(16)}`).join("-")}const O={"%":"percent","+":"plus","-":"minus","*":"star","/":"slash","#":"hash","@":"at","&":"and","=":"equals","<":"lt",">":"gt","€":"eur","$":"usd","£":"gbp","?":"question","!":"exclamation",".":"dot",",":"comma"," ":"space"};function Y(i,e,n){const o=v(()=>{const r=i();return c(r?.dataPath)||c(r?.name)||n},...ngDevMode?[{debugName:"instance"}]:[]);return(r,...d)=>{const b=d.map(p=>c(p)).filter(p=>p.length>0);return[`${e}-${r}`,o(),...b].join("-")}}var f=class T{text=l(...ngDevMode?[void 0,{debugName:"text"}]:[]);metaText=l("",...ngDevMode?[{debugName:"metaText"}]:[]);top=l(null,...ngDevMode?[{debugName:"top"}]:[]);left=l(null,...ngDevMode?[{debugName:"left"}]:[]);interactive=l(false,...ngDevMode?[{debugName:"interactive"}]:[]);mouseEntered=R();mouseLeft=R();get hostTop(){return this.top()}get hostLeft(){return this.left()}get hostInteractiveClass(){return this.interactive()}onMouseEnter(){if(this.interactive())this.mouseEntered.emit()}onMouseLeave(){if(this.interactive())this.mouseLeft.emit()}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:T,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:T,isStandalone:true,selector:"app-tooltip",inputs:{text:{classPropertyName:"text",publicName:"text",isSignal:true,isRequired:false,transformFunction:null},metaText:{classPropertyName:"metaText",publicName:"metaText",isSignal:true,isRequired:false,transformFunction:null},top:{classPropertyName:"top",publicName:"top",isSignal:true,isRequired:false,transformFunction:null},left:{classPropertyName:"left",publicName:"left",isSignal:true,isRequired:false,transformFunction:null},interactive:{classPropertyName:"interactive",publicName:"interactive",isSignal:true,isRequired:false,transformFunction:null}},outputs:{mouseEntered:"mouseEntered",mouseLeft:"mouseLeft"},host:{listeners:{"mouseenter":"onMouseEnter()","mouseleave":"onMouseLeave()"},properties:{"style.top.px":"this.hostTop","style.left.px":"this.hostLeft","class.nvb-tooltip--interactive":"this.hostInteractiveClass"}},ngImport:t,template:'<div class="nvb-tooltip__content">\n  <div>{{ text() }}</div>\n  @if (metaText()) {\n    <div class="nvb-tooltip__meta">{{ metaText() }}</div>\n  }\n</div>\n<div class="nvb-tooltip__arrow" aria-hidden="true"></div>\n',styles:[":host{position:fixed;transform:translate(-50%,calc(-100% - 8px));z-index:2147483647;pointer-events:none;width:max-content;min-width:min(240px,100vw - 24px);max-width:min(420px,100vw - 24px)}:host.nvb-tooltip--interactive{pointer-events:auto}.nvb-tooltip__content{padding:8px 10px;border-radius:var(--nvb-radius-md);border:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800);color:var(--nvb-color-neutral-050);font-size:12px;line-height:1.45;text-align:left;white-space:pre-line;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;cursor:text;box-shadow:0 8px 20px #0f172a59}.nvb-tooltip__meta{margin-top:6px;font-size:10px;line-height:1.35;color:var(--nvb-color-neutral-300)}.nvb-tooltip__arrow{position:absolute;width:10px;height:10px;left:50%;bottom:-5px;transform:translate(-50%) rotate(45deg);border-right:1px solid var(--nvb-color-neutral-700);border-bottom:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800)}\n"],changeDetection:t.ChangeDetectionStrategy.Eager})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:f,decorators:[{type:h,args:[{selector:"app-tooltip",imports:[],changeDetection:_.Eager,template:'<div class="nvb-tooltip__content">\n  <div>{{ text() }}</div>\n  @if (metaText()) {\n    <div class="nvb-tooltip__meta">{{ metaText() }}</div>\n  }\n</div>\n<div class="nvb-tooltip__arrow" aria-hidden="true"></div>\n',styles:[":host{position:fixed;transform:translate(-50%,calc(-100% - 8px));z-index:2147483647;pointer-events:none;width:max-content;min-width:min(240px,100vw - 24px);max-width:min(420px,100vw - 24px)}:host.nvb-tooltip--interactive{pointer-events:auto}.nvb-tooltip__content{padding:8px 10px;border-radius:var(--nvb-radius-md);border:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800);color:var(--nvb-color-neutral-050);font-size:12px;line-height:1.45;text-align:left;white-space:pre-line;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;cursor:text;box-shadow:0 8px 20px #0f172a59}.nvb-tooltip__meta{margin-top:6px;font-size:10px;line-height:1.35;color:var(--nvb-color-neutral-300)}.nvb-tooltip__arrow{position:absolute;width:10px;height:10px;left:50%;bottom:-5px;transform:translate(-50%) rotate(45deg);border-right:1px solid var(--nvb-color-neutral-700);border-bottom:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800)}\n"]}]}],propDecorators:{text:[{type:t.Input,args:[{isSignal:true,alias:"text",required:false}]}],metaText:[{type:t.Input,args:[{isSignal:true,alias:"metaText",required:false}]}],top:[{type:t.Input,args:[{isSignal:true,alias:"top",required:false}]}],left:[{type:t.Input,args:[{isSignal:true,alias:"left",required:false}]}],interactive:[{type:t.Input,args:[{isSignal:true,alias:"interactive",required:false}]}],mouseEntered:[{type:t.Output,args:["mouseEntered"]}],mouseLeft:[{type:t.Output,args:["mouseLeft"]}],hostTop:[{type:x,args:["style.top.px"]}],hostLeft:[{type:x,args:["style.left.px"]}],hostInteractiveClass:[{type:x,args:["class.nvb-tooltip--interactive"]}],onMouseEnter:[{type:C,args:["mouseenter"]}],onMouseLeave:[{type:C,args:["mouseleave"]}]}});var D=class S{model=l(null,...ngDevMode?[{debugName:"model"}]:[]);controlIdInput=l(void 0,...ngDevMode?[{debugName:"controlIdInput"}]:[]);labelForInput=l(void 0,...ngDevMode?[{debugName:"labelForInput"}]:[]);groupRole=l(null,...ngDevMode?[{debugName:"groupRole"}]:[]);showTextWrapperInput=l(true,...ngDevMode?[{debugName:"showTextWrapperInput"}]:[]);required=a(false,...ngDevMode?[{debugName:"required"}]:[]);isRowColumn=a(false,...ngDevMode?[{debugName:"isRowColumn"}]:[]);labelHidden=a(false,...ngDevMode?[{debugName:"labelHidden"}]:[]);isReady=a(true,...ngDevMode?[{debugName:"isReady"}]:[]);labelTooltipVisible=a(false,...ngDevMode?[{debugName:"labelTooltipVisible"}]:[]);labelTooltipTop=a(null,...ngDevMode?[{debugName:"labelTooltipTop"}]:[]);labelTooltipLeft=a(null,...ngDevMode?[{debugName:"labelTooltipLeft"}]:[]);columnErrorVisible=a(false,...ngDevMode?[{debugName:"columnErrorVisible"}]:[]);columnErrorTop=a(null,...ngDevMode?[{debugName:"columnErrorTop"}]:[]);columnErrorLeft=a(null,...ngDevMode?[{debugName:"columnErrorLeft"}]:[]);columnErrorPlacement=a("below",...ngDevMode?[{debugName:"columnErrorPlacement"}]:[]);columnErrorFrameId=null;elementActionService=u(q);validatorService=u(z);propertyChangeRefresh=F(()=>this.model());isEditor=a(g.isEditor(),...ngDevMode?[{debugName:"isEditor"}]:[]);elementHoverTitle=v(()=>{if(!this.isEditor())return null;return String(this.model()?.name??"").trim()||null},...ngDevMode?[{debugName:"elementHoverTitle"}]:[]);testId=v(()=>c(this.model()?.dataPath)||c(this.model()?.name)||null,...ngDevMode?[{debugName:"testId"}]:[]);baseId=v(()=>{const e=String(this.controlIdInput()??"").trim();if(e)return e;const n=String(this.model()?.name??"").trim();if(n)return this.slugify(n);const o=String(this.model()?.label??"").trim();if(o)return`nvb-field-${this.slugify(o)}`;return null},...ngDevMode?[{debugName:"baseId"}]:[]);ngOnInit(){this.isEditor.set(g.isEditor());if(this.model()?.parentElement&&this.model()?.parentElement.type==="dynamicTable")this.isRowColumn.set(true);this.labelHidden.set(this.isRowColumn()||Boolean(this.model()?.["__nvbHideLabel"]));this.runLoadLifecycle()}async runLoadLifecycle(){if(g.isEditor())return;const e=this.model();if(!e)return;const n=e.events??[];if(!Array.isArray(n)||n.length===0)return;const o=this.createRuntimeContext(e);if(n.some(r=>r?.trigger==="beforeLoad")){this.isReady.set(false);await this.elementActionService.runActions(e,n,"beforeLoad",o)}this.isReady.set(true);await this.elementActionService.runActions(e,n,"onLoad",o);queueMicrotask(()=>{this.elementActionService.runActions(e,n,"afterLoad",o)})}createRuntimeContext(e){const n=e.value;const o=String(e.name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;return r}hasLabelTooltip(){return String(this.model()?.["labelTooltip"]??"").trim().length>0}setLabelTooltipVisible(e,n){if(!this.hasLabelTooltip()){this.labelTooltipVisible.set(false);return}if(e&&n){const o=n.currentTarget;if(o){const r=o.getBoundingClientRect();const d=y(o);this.labelTooltipTop.set(Math.round(r.top-d.top));this.labelTooltipLeft.set(Math.round(r.left+r.width/2-d.left))}}this.labelTooltipVisible.set(e)}setColumnErrorVisible(e,n){this.cancelColumnErrorFrame();if(!e){this.columnErrorVisible.set(false);return}const o=n?.currentTarget;if(!o){this.columnErrorVisible.set(false);return}this.positionColumnError(o);this.columnErrorVisible.set(true);if(typeof requestAnimationFrame!=="function")return;this.columnErrorFrameId=requestAnimationFrame(()=>{this.columnErrorFrameId=null;if(!this.columnErrorVisible()||!o.isConnected)return;this.positionColumnError(o)})}positionColumnError(e){const n=e.getBoundingClientRect();const o=e.parentElement?.querySelector(".nvb-field__column-error-dialog")??null;const r=y(o??e);const d=o?.offsetHeight??0;const b=5;const p=(typeof window==="undefined"?0:window.innerHeight??0)-n.bottom-b;const V=n.top-b;const E=d>0&&p<d&&V>=d?"above":"below";this.columnErrorPlacement.set(E);this.columnErrorLeft.set(Math.round(n.left+n.width/2-r.left));this.columnErrorTop.set(Math.round((E==="above"?n.top-b:n.bottom+b)-r.top))}cancelColumnErrorFrame(){if(this.columnErrorFrameId!==null&&typeof cancelAnimationFrame==="function")cancelAnimationFrame(this.columnErrorFrameId);this.columnErrorFrameId=null}shouldShowErrors(){this.validatorService.getValidationRenderVersion();if(!Array.isArray(this.model()?.errors)||this.model().errors.length===0)return false;return this.validatorService.isElementValidationVisible(this.model())}hasLabelText(){return String(this.model()?.label??"").trim().length>0}hasDescription(){return String(this.model()?.description??"").trim().length>0}showLabelRow(){if(this.labelHidden())return false;return this.hasLabelText()||this.hasLabelTooltip()}showTextWrapper(){if(this.showTextWrapperInput()===false)return false;if(this.isRowColumn())return false;return this.showLabelRow()||this.hasDescription()}controlId(){return this.baseId()}labelFor(){const e=this.labelForInput();if(e===null)return null;const n=String(e??"").trim();if(n)return n;return this.controlId()}labelId(){return this.partId("label")}descriptionId(){return this.hasDescription()?this.partId("description"):null}errorId(){return this.shouldShowErrors()?this.partId("error"):null}partId(e){const n=this.baseId();const o=String(e??"").trim();if(!n||!o)return null;return`${n}-${o}`}describedByIds(...e){const n=[this.descriptionId(),this.errorId(),...e].map(o=>String(o??"").trim()).filter(Boolean);if(n.length===0)return null;return n.join(" ")}isInvalid(){return this.shouldShowErrors()}slugify(e){return`nvb-field-${String(e??"").trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,64)}`}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:S,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:S,isStandalone:true,selector:"element-wrapper",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null},controlIdInput:{classPropertyName:"controlIdInput",publicName:"controlIdInput",isSignal:true,isRequired:false,transformFunction:null},labelForInput:{classPropertyName:"labelForInput",publicName:"labelForInput",isSignal:true,isRequired:false,transformFunction:null},groupRole:{classPropertyName:"groupRole",publicName:"groupRole",isSignal:true,isRequired:false,transformFunction:null},showTextWrapperInput:{classPropertyName:"showTextWrapperInput",publicName:"showTextWrapperInput",isSignal:true,isRequired:false,transformFunction:null}},exportAs:["elementWrapper"],ngImport:t,template:"<div\n  class=\"nvb-field\"\n  [class.nvb-field--has-errors]=\"shouldShowErrors()\"\n  [class.nvb-field--disabled]=\"model()?.disabled\"\n  [class.nvb-field--fit-content]=\"model()?.fitContent && !isRowColumn()\"\n  [class.nvb-field--row-column]=\"isRowColumn()\"\n  [attr.role]=\"groupRole()\"\n  [attr.aria-labelledby]=\"groupRole() ? labelId() : null\"\n  [attr.aria-describedby]=\"groupRole() ? describedByIds() : null\"\n  [attr.data-nvb-element-name]=\"model()?.name || null\"\n  [attr.data-nvb-data-path]=\"model()?.dataPath || null\"\n  [attr.data-nvb-element-type]=\"model()?.type || null\"\n  [attr.data-testid]=\"testId() ? 'nvb-element-' + testId() : null\"\n  [attr.aria-disabled]=\"model()?.disabled ? 'true' : null\"\n  [attr.aria-readonly]=\"model()?.readOnly ? 'true' : null\"\n  [attr.title]=\"elementHoverTitle()\"\n>\n  @if (showTextWrapper()) {\n    <div class=\"nvb-field__text-warpper\">\n      @if (showLabelRow()) {\n        <label\n          [id]=\"labelId()\"\n          [for]=\"labelFor()\"\n          class=\"nvb-field__label\"\n          [attr.data-testid]=\"testId() ? 'nvb-label-' + testId() : null\"\n        >\n          @if (hasLabelText()) {\n            <span class=\"nvb-field__label-text\">{{\n              $safeNavigationMigration(model()?.label) | dynamicText: model()\n            }}</span>\n          }\n          @if (hasLabelTooltip()) {\n            <button\n              type=\"button\"\n              class=\"nvb-field__label-tooltip-trigger\"\n              [attr.data-testid]=\"\n                testId() ? 'nvb-label-tooltip-trigger-' + testId() : null\n              \"\n              [attr.aria-label]=\"\n                model()?.name\n                  ? ('preview.fieldHelp' | uiT: 'Field help') + ': ' + model()?.name\n                  : ('preview.fieldHelp' | uiT: 'Field help')\n              \"\n              [attr.aria-expanded]=\"labelTooltipVisible()\"\n              (mouseenter)=\"setLabelTooltipVisible(true, $event)\"\n              (mouseleave)=\"setLabelTooltipVisible(false)\"\n              (focus)=\"setLabelTooltipVisible(true, $event)\"\n              (blur)=\"setLabelTooltipVisible(false)\"\n            >\n              <span class=\"nvb-field__label-tooltip-mark\" aria-hidden=\"true\">?</span>\n              @if (labelTooltipVisible() && hasLabelTooltip()) {\n                <app-tooltip\n                  [text]=\"\n                    $safeNavigationMigration(model()?.['labelTooltip']) | dynamicText: model()\n                  \"\n                  [top]=\"labelTooltipTop()\"\n                  [left]=\"labelTooltipLeft()\"\n                />\n              }\n            </button>\n          }\n          @if (model()?.required) {\n            <span class=\"nvb-field__required\">*</span>\n          }\n        </label>\n      }\n      @if (hasDescription()) {\n        <span\n          [id]=\"descriptionId()\"\n          class=\"nvb-field__description\"\n          [attr.data-testid]=\"testId() ? 'nvb-description-' + testId() : null\"\n        >\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"nvb-field__content\"\n      [class.nvb-field__content--disabled]=\"model()?.disabled\"\n      [attr.data-testid]=\"testId() ? 'nvb-content-' + testId() : null\"\n    >\n      <ng-content></ng-content>\n\n      @if (shouldShowErrors()) {\n        @if (isRowColumn()) {\n          <div\n            #errorTrigger\n            [id]=\"errorId()\"\n            class=\"nvb-field__column-error\"\n            tabindex=\"0\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"model()?.name ? 'Errors for ' + model()?.name : 'Errors'\"\n            (mouseenter)=\"setColumnErrorVisible(true, $event)\"\n            (mouseleave)=\"setColumnErrorVisible(false)\"\n            (focus)=\"setColumnErrorVisible(true, $event)\"\n            (blur)=\"setColumnErrorVisible(false)\"\n          >\n            <span class=\"material-symbols-outlined nvb-field__column-error-icon\">error</span>\n          </div>\n\n          <!--\n            A sibling of the icon, not a child of it: the icon is stacked above\n            the input with `z-index` and centred with a transform, and both of\n            those make it a stacking context that would cap the bubble's own\n            z-index and pin its fixed position to the icon's 20px box.\n          -->\n          <div\n            class=\"nvb-field__column-error-dialog\"\n            [class.nvb-field__column-error-dialog--visible]=\"columnErrorVisible()\"\n            [class.nvb-field__column-error-dialog--above]=\"columnErrorPlacement() === 'above'\"\n            [style.top.px]=\"columnErrorTop()\"\n            [style.left.px]=\"columnErrorLeft()\"\n          >\n            <ul>\n              @for (error of model()?.errors; track $index) {\n                <li>&bull; {{ error }}</li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <div\n            [id]=\"errorId()\"\n            class=\"nvb-field__errors\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n          >\n            @for (error of model()?.errors; track $index) {\n              <small class=\"nvb-field__error-item\">{{ error }}</small>\n            }\n          </div>\n        }\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-field__content nvb-field__content--loading\"></div>\n  }\n</div>\n",styles:['.nvb-field{--nvb-disabled-surface: color-mix( in oklab, var(--nvb-color-neutral-100) 88%, var(--nvb-color-neutral-000) );--nvb-disabled-border: color-mix(in oklab, var(--nvb-color-neutral-300) 86%, var(--nvb-color-neutral-000));--nvb-disabled-text: var(--nvb-color-neutral-500);display:flex;flex-direction:column;gap:var(--nvb-space-1)}.nvb-field__label{font-size:14px;line-height:18px;color:var(--nvb-color-neutral-800);position:relative;display:inline-flex;align-items:center;gap:var(--nvb-space-2);width:fit-content;font-weight:600}.nvb-field__label-text{display:inline}.nvb-field__label-tooltip-trigger{position:relative;border:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-500);padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:help;width:14px;height:14px;border-radius:var(--nvb-radius-sm);transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-field__label-tooltip-trigger:hover,.nvb-field__label-tooltip-trigger:focus-visible{color:var(--nvb-color-neutral-700);outline:none;border-color:var(--nvb-color-neutral-300);background-color:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100))}.nvb-field__label-tooltip-mark{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;line-height:1}.nvb-field__text-warpper{display:flex;flex-direction:column;gap:2px}.nvb-field__description{font-size:12px;color:var(--nvb-color-neutral-500);line-height:16px;max-width:72ch}.nvb-field__required{color:var(--nvb-color-risk-600)}.nvb-field__error{color:var(--nvb-color-risk-600);font-size:12px;line-height:16px}.nvb-field--has-errors .nvb-field__label-text{color:var(--nvb-color-risk-700)}.nvb-field--has-errors ::ng-deep .nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-control__attribute-input,.nvb-field--has-errors ::ng-deep .nvb-phone__number,.nvb-field--has-errors ::ng-deep textarea.nvb-control__text-input,.nvb-field--has-errors ::ng-deep textarea.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-datepicker__trigger{border-color:var(--nvb-color-risk-500);box-shadow:0 0 0 1px var(--nvb-color-neutral-000),0 0 0 3px color-mix(in oklch,var(--nvb-color-risk-500) 28%,transparent)}.nvb-field--disabled .nvb-field__label,.nvb-field--disabled .nvb-field__description{color:var(--nvb-color-neutral-500)}.nvb-field--disabled .nvb-field__label-tooltip-trigger{background:color-mix(in oklab,var(--nvb-color-neutral-100) 82%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-200);color:var(--nvb-color-neutral-500)}.nvb-field__content{position:relative;min-width:0}.nvb-field--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-field--fit-content .nvb-field__content{width:fit-content;max-width:100%}.nvb-field--fit-content .nvb-field__content>*{max-width:100%}.nvb-field--row-column{gap:0;min-height:100%;height:100%}.nvb-field--row-column .nvb-field__text-warpper{display:none}.nvb-field--row-column .nvb-field__content{min-height:inherit;height:100%;display:flex;align-items:stretch;justify-content:stretch}.nvb-field--row-column .nvb-field__content>*{flex:1 1 auto;min-width:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;border-radius:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{border-color:transparent;box-shadow:none}.nvb-field__content--disabled{pointer-events:none}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field,.nvb-field__content--disabled ::ng-deep .nvb-table-frame,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root],.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] thead td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] tfoot td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important;box-shadow:none!important}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-phone__number::placeholder{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__page{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-table th,.nvb-field__content--disabled ::ng-deep .nvb-table td,.nvb-field__content--disabled ::ng-deep .nvb-nested-table th,.nvb-field__content--disabled ::ng-deep .nvb-nested-table td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select-value,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button span,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action span,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav span,.nvb-field__content--disabled ::ng-deep .nvb-phone__country{color:inherit!important}.nvb-field__content--disabled ::ng-deep input[type=checkbox],.nvb-field__content--disabled ::ng-deep input[type=radio]{accent-color:color-mix(in oklab,var(--nvb-color-neutral-400) 88%,white)}.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;background:var(--nvb-disabled-surface)!important;border-color:transparent!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--loading{min-height:36px}.nvb-field__column-error{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;justify-content:center;align-items:center;background-color:var(--nvb-color-risk-050);border-radius:var(--nvb-radius-md);z-index:5;cursor:pointer}.nvb-field__column-error:hover,.nvb-field__column-error:focus-visible{background-color:var(--nvb-color-risk-100)}.nvb-field__column-error:hover .nvb-field__column-error-icon,.nvb-field__column-error:focus-visible .nvb-field__column-error-icon{color:var(--nvb-color-risk-700)}.nvb-field__column-error-dialog{position:fixed;transform:translate(-50%);padding:5px;min-width:180px;max-width:300px;background-color:var(--nvb-color-risk-050);border:1px solid var(--nvb-color-risk-200);border-radius:var(--nvb-radius-md);font-size:12px;color:var(--nvb-color-risk-700);white-space:normal;z-index:2147483646;box-shadow:0 8px 24px #0f172a1f;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.nvb-field__column-error-dialog--visible{opacity:1;visibility:visible;pointer-events:auto}.nvb-field__column-error-dialog--above{transform:translate(-50%,-100%)}.nvb-field__column-error-dialog--above:before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-200)}.nvb-field__column-error-dialog--above:after{top:auto;bottom:-5px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-050)}.nvb-field__column-error-dialog:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-200);z-index:1}.nvb-field__column-error-dialog:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-050);z-index:2}.nvb-field__column-error-dialog table,.nvb-field__column-error-dialog li{margin:0}.nvb-field__column-error-icon{color:var(--nvb-color-risk-600);font-size:16px}.nvb-field__errors{margin-top:6px;display:flex;flex-direction:column;gap:4px}.nvb-field__error-item{margin:0;color:var(--nvb-color-risk-700);font-size:12px;line-height:1.45}\n'],dependencies:[{kind:"component",type:f,selector:"app-tooltip",inputs:["text","metaText","top","left","interactive"],outputs:["mouseEntered","mouseLeft"]},{kind:"pipe",type:L,name:"dynamicText"},{kind:"pipe",type:N,name:"uiT"}],changeDetection:t.ChangeDetectionStrategy.Eager})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:D,decorators:[{type:h,args:[{selector:"element-wrapper",exportAs:"elementWrapper",imports:[L,f,N,w],changeDetection:_.Eager,template:"<div\n  class=\"nvb-field\"\n  [class.nvb-field--has-errors]=\"shouldShowErrors()\"\n  [class.nvb-field--disabled]=\"model()?.disabled\"\n  [class.nvb-field--fit-content]=\"model()?.fitContent && !isRowColumn()\"\n  [class.nvb-field--row-column]=\"isRowColumn()\"\n  [attr.role]=\"groupRole()\"\n  [attr.aria-labelledby]=\"groupRole() ? labelId() : null\"\n  [attr.aria-describedby]=\"groupRole() ? describedByIds() : null\"\n  [attr.data-nvb-element-name]=\"model()?.name || null\"\n  [attr.data-nvb-data-path]=\"model()?.dataPath || null\"\n  [attr.data-nvb-element-type]=\"model()?.type || null\"\n  [attr.data-testid]=\"testId() ? 'nvb-element-' + testId() : null\"\n  [attr.aria-disabled]=\"model()?.disabled ? 'true' : null\"\n  [attr.aria-readonly]=\"model()?.readOnly ? 'true' : null\"\n  [attr.title]=\"elementHoverTitle()\"\n>\n  @if (showTextWrapper()) {\n    <div class=\"nvb-field__text-warpper\">\n      @if (showLabelRow()) {\n        <label\n          [id]=\"labelId()\"\n          [for]=\"labelFor()\"\n          class=\"nvb-field__label\"\n          [attr.data-testid]=\"testId() ? 'nvb-label-' + testId() : null\"\n        >\n          @if (hasLabelText()) {\n            <span class=\"nvb-field__label-text\">{{\n              $safeNavigationMigration(model()?.label) | dynamicText: model()\n            }}</span>\n          }\n          @if (hasLabelTooltip()) {\n            <button\n              type=\"button\"\n              class=\"nvb-field__label-tooltip-trigger\"\n              [attr.data-testid]=\"\n                testId() ? 'nvb-label-tooltip-trigger-' + testId() : null\n              \"\n              [attr.aria-label]=\"\n                model()?.name\n                  ? ('preview.fieldHelp' | uiT: 'Field help') + ': ' + model()?.name\n                  : ('preview.fieldHelp' | uiT: 'Field help')\n              \"\n              [attr.aria-expanded]=\"labelTooltipVisible()\"\n              (mouseenter)=\"setLabelTooltipVisible(true, $event)\"\n              (mouseleave)=\"setLabelTooltipVisible(false)\"\n              (focus)=\"setLabelTooltipVisible(true, $event)\"\n              (blur)=\"setLabelTooltipVisible(false)\"\n            >\n              <span class=\"nvb-field__label-tooltip-mark\" aria-hidden=\"true\">?</span>\n              @if (labelTooltipVisible() && hasLabelTooltip()) {\n                <app-tooltip\n                  [text]=\"\n                    $safeNavigationMigration(model()?.['labelTooltip']) | dynamicText: model()\n                  \"\n                  [top]=\"labelTooltipTop()\"\n                  [left]=\"labelTooltipLeft()\"\n                />\n              }\n            </button>\n          }\n          @if (model()?.required) {\n            <span class=\"nvb-field__required\">*</span>\n          }\n        </label>\n      }\n      @if (hasDescription()) {\n        <span\n          [id]=\"descriptionId()\"\n          class=\"nvb-field__description\"\n          [attr.data-testid]=\"testId() ? 'nvb-description-' + testId() : null\"\n        >\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"nvb-field__content\"\n      [class.nvb-field__content--disabled]=\"model()?.disabled\"\n      [attr.data-testid]=\"testId() ? 'nvb-content-' + testId() : null\"\n    >\n      <ng-content></ng-content>\n\n      @if (shouldShowErrors()) {\n        @if (isRowColumn()) {\n          <div\n            #errorTrigger\n            [id]=\"errorId()\"\n            class=\"nvb-field__column-error\"\n            tabindex=\"0\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"model()?.name ? 'Errors for ' + model()?.name : 'Errors'\"\n            (mouseenter)=\"setColumnErrorVisible(true, $event)\"\n            (mouseleave)=\"setColumnErrorVisible(false)\"\n            (focus)=\"setColumnErrorVisible(true, $event)\"\n            (blur)=\"setColumnErrorVisible(false)\"\n          >\n            <span class=\"material-symbols-outlined nvb-field__column-error-icon\">error</span>\n          </div>\n\n          <!--\n            A sibling of the icon, not a child of it: the icon is stacked above\n            the input with `z-index` and centred with a transform, and both of\n            those make it a stacking context that would cap the bubble's own\n            z-index and pin its fixed position to the icon's 20px box.\n          -->\n          <div\n            class=\"nvb-field__column-error-dialog\"\n            [class.nvb-field__column-error-dialog--visible]=\"columnErrorVisible()\"\n            [class.nvb-field__column-error-dialog--above]=\"columnErrorPlacement() === 'above'\"\n            [style.top.px]=\"columnErrorTop()\"\n            [style.left.px]=\"columnErrorLeft()\"\n          >\n            <ul>\n              @for (error of model()?.errors; track $index) {\n                <li>&bull; {{ error }}</li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <div\n            [id]=\"errorId()\"\n            class=\"nvb-field__errors\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n          >\n            @for (error of model()?.errors; track $index) {\n              <small class=\"nvb-field__error-item\">{{ error }}</small>\n            }\n          </div>\n        }\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-field__content nvb-field__content--loading\"></div>\n  }\n</div>\n",styles:['.nvb-field{--nvb-disabled-surface: color-mix( in oklab, var(--nvb-color-neutral-100) 88%, var(--nvb-color-neutral-000) );--nvb-disabled-border: color-mix(in oklab, var(--nvb-color-neutral-300) 86%, var(--nvb-color-neutral-000));--nvb-disabled-text: var(--nvb-color-neutral-500);display:flex;flex-direction:column;gap:var(--nvb-space-1)}.nvb-field__label{font-size:14px;line-height:18px;color:var(--nvb-color-neutral-800);position:relative;display:inline-flex;align-items:center;gap:var(--nvb-space-2);width:fit-content;font-weight:600}.nvb-field__label-text{display:inline}.nvb-field__label-tooltip-trigger{position:relative;border:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-500);padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:help;width:14px;height:14px;border-radius:var(--nvb-radius-sm);transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-field__label-tooltip-trigger:hover,.nvb-field__label-tooltip-trigger:focus-visible{color:var(--nvb-color-neutral-700);outline:none;border-color:var(--nvb-color-neutral-300);background-color:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100))}.nvb-field__label-tooltip-mark{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;line-height:1}.nvb-field__text-warpper{display:flex;flex-direction:column;gap:2px}.nvb-field__description{font-size:12px;color:var(--nvb-color-neutral-500);line-height:16px;max-width:72ch}.nvb-field__required{color:var(--nvb-color-risk-600)}.nvb-field__error{color:var(--nvb-color-risk-600);font-size:12px;line-height:16px}.nvb-field--has-errors .nvb-field__label-text{color:var(--nvb-color-risk-700)}.nvb-field--has-errors ::ng-deep .nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-control__attribute-input,.nvb-field--has-errors ::ng-deep .nvb-phone__number,.nvb-field--has-errors ::ng-deep textarea.nvb-control__text-input,.nvb-field--has-errors ::ng-deep textarea.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-datepicker__trigger{border-color:var(--nvb-color-risk-500);box-shadow:0 0 0 1px var(--nvb-color-neutral-000),0 0 0 3px color-mix(in oklch,var(--nvb-color-risk-500) 28%,transparent)}.nvb-field--disabled .nvb-field__label,.nvb-field--disabled .nvb-field__description{color:var(--nvb-color-neutral-500)}.nvb-field--disabled .nvb-field__label-tooltip-trigger{background:color-mix(in oklab,var(--nvb-color-neutral-100) 82%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-200);color:var(--nvb-color-neutral-500)}.nvb-field__content{position:relative;min-width:0}.nvb-field--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-field--fit-content .nvb-field__content{width:fit-content;max-width:100%}.nvb-field--fit-content .nvb-field__content>*{max-width:100%}.nvb-field--row-column{gap:0;min-height:100%;height:100%}.nvb-field--row-column .nvb-field__text-warpper{display:none}.nvb-field--row-column .nvb-field__content{min-height:inherit;height:100%;display:flex;align-items:stretch;justify-content:stretch}.nvb-field--row-column .nvb-field__content>*{flex:1 1 auto;min-width:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;border-radius:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{border-color:transparent;box-shadow:none}.nvb-field__content--disabled{pointer-events:none}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field,.nvb-field__content--disabled ::ng-deep .nvb-table-frame,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root],.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] thead td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] tfoot td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important;box-shadow:none!important}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-phone__number::placeholder{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__page{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-table th,.nvb-field__content--disabled ::ng-deep .nvb-table td,.nvb-field__content--disabled ::ng-deep .nvb-nested-table th,.nvb-field__content--disabled ::ng-deep .nvb-nested-table td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select-value,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button span,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action span,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav span,.nvb-field__content--disabled ::ng-deep .nvb-phone__country{color:inherit!important}.nvb-field__content--disabled ::ng-deep input[type=checkbox],.nvb-field__content--disabled ::ng-deep input[type=radio]{accent-color:color-mix(in oklab,var(--nvb-color-neutral-400) 88%,white)}.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;background:var(--nvb-disabled-surface)!important;border-color:transparent!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--loading{min-height:36px}.nvb-field__column-error{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;justify-content:center;align-items:center;background-color:var(--nvb-color-risk-050);border-radius:var(--nvb-radius-md);z-index:5;cursor:pointer}.nvb-field__column-error:hover,.nvb-field__column-error:focus-visible{background-color:var(--nvb-color-risk-100)}.nvb-field__column-error:hover .nvb-field__column-error-icon,.nvb-field__column-error:focus-visible .nvb-field__column-error-icon{color:var(--nvb-color-risk-700)}.nvb-field__column-error-dialog{position:fixed;transform:translate(-50%);padding:5px;min-width:180px;max-width:300px;background-color:var(--nvb-color-risk-050);border:1px solid var(--nvb-color-risk-200);border-radius:var(--nvb-radius-md);font-size:12px;color:var(--nvb-color-risk-700);white-space:normal;z-index:2147483646;box-shadow:0 8px 24px #0f172a1f;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.nvb-field__column-error-dialog--visible{opacity:1;visibility:visible;pointer-events:auto}.nvb-field__column-error-dialog--above{transform:translate(-50%,-100%)}.nvb-field__column-error-dialog--above:before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-200)}.nvb-field__column-error-dialog--above:after{top:auto;bottom:-5px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-050)}.nvb-field__column-error-dialog:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-200);z-index:1}.nvb-field__column-error-dialog:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-050);z-index:2}.nvb-field__column-error-dialog table,.nvb-field__column-error-dialog li{margin:0}.nvb-field__column-error-icon{color:var(--nvb-color-risk-600);font-size:16px}.nvb-field__errors{margin-top:6px;display:flex;flex-direction:column;gap:4px}.nvb-field__error-item{margin:0;color:var(--nvb-color-risk-700);font-size:12px;line-height:1.45}\n']}]}],propDecorators:{model:[{type:t.Input,args:[{isSignal:true,alias:"model",required:false}]}],controlIdInput:[{type:t.Input,args:[{isSignal:true,alias:"controlIdInput",required:false}]}],labelForInput:[{type:t.Input,args:[{isSignal:true,alias:"labelForInput",required:false}]}],groupRole:[{type:t.Input,args:[{isSignal:true,alias:"groupRole",required:false}]}],showTextWrapperInput:[{type:t.Input,args:[{isSignal:true,alias:"showTextWrapperInput",required:false}]}]}});export{y as a,c as i,f as n,w as o,Y as r,D as t};
+import{cn as g,n as L,r as N,t as F}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-WxfEoWah.mjs";import{Z as q,at as z,ct as P,lt as $}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-BYA8UfCA.mjs";import*as t from"@angular/core";import{ChangeDetectionStrategy as _,Component as h,HostBinding as x,HostListener as C,ViewEncapsulation as A,computed as v,effect as H,inject as u,input as l,output as R,signal as a,viewChild as W}from"@angular/core";var w=class I{name=l("",...ngDevMode?[{debugName:"name"}]:[]);svg=l(null,...ngDevMode?[{debugName:"svg"}]:[]);ariaLabel=l(null,...ngDevMode?[{debugName:"ariaLabel"}]:[]);contentRef=W("contentRef",...ngDevMode?[{debugName:"contentRef"}]:[]);iconSvgService=u(P);markupSecurityService=u($);safeSvg=v(()=>{this.iconSvgService.iconSetVersion();const e=String(this.svg()??"").trim();return e?this.markupSecurityService.sanitizeSvg(e):this.iconSvgService.getSvg(this.name())},...ngDevMode?[{debugName:"safeSvg"}]:[]);constructor(){H(()=>{const e=this.contentRef()?.nativeElement;if(!e)return;const n=this.safeSvg();if(e.innerHTML!==n)e.innerHTML=n})}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:I,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.2.0",version:"22.2.1",type:I,isStandalone:true,selector:"nvb-icon",inputs:{name:{classPropertyName:"name",publicName:"name",isSignal:true,isRequired:false,transformFunction:null},svg:{classPropertyName:"svg",publicName:"svg",isSignal:true,isRequired:false,transformFunction:null},ariaLabel:{classPropertyName:"ariaLabel",publicName:"ariaLabel",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-icon":"name()","attr.aria-label":"ariaLabel()","attr.role":'ariaLabel() ? "img" : null',"attr.aria-hidden":'ariaLabel() ? null : "true"'},classAttribute:"nvb-icon-svg"},viewQueries:[{propertyName:"contentRef",first:true,predicate:["contentRef"],descendants:true,isSignal:true}],ngImport:t,template:'<span #contentRef class="nvb-icon-svg__content"></span>\n',styles:[".nvb-icon-svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;line-height:1;vertical-align:middle;color:currentColor;flex-shrink:0}.nvb-icon-svg__content{display:inline-flex;width:100%;height:100%}.nvb-icon-svg svg{width:100%;height:100%;display:block;fill:currentColor;max-width:100%;max-height:100%}\n"],changeDetection:t.ChangeDetectionStrategy.Eager,encapsulation:t.ViewEncapsulation.None})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:w,decorators:[{type:h,args:[{selector:"nvb-icon",imports:[],encapsulation:A.None,changeDetection:_.Eager,host:{class:"nvb-icon-svg","[attr.data-icon]":"name()","[attr.aria-label]":"ariaLabel()","[attr.role]":'ariaLabel() ? "img" : null',"[attr.aria-hidden]":'ariaLabel() ? null : "true"'},template:'<span #contentRef class="nvb-icon-svg__content"></span>\n',styles:[".nvb-icon-svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;line-height:1;vertical-align:middle;color:currentColor;flex-shrink:0}.nvb-icon-svg__content{display:inline-flex;width:100%;height:100%}.nvb-icon-svg svg{width:100%;height:100%;display:block;fill:currentColor;max-width:100%;max-height:100%}\n"]}]}],ctorParameters:()=>[],propDecorators:{name:[{type:t.Input,args:[{isSignal:true,alias:"name",required:false}]}],svg:[{type:t.Input,args:[{isSignal:true,alias:"svg",required:false}]}],ariaLabel:[{type:t.Input,args:[{isSignal:true,alias:"ariaLabel",required:false}]}],contentRef:[{type:t.ViewChild,args:["contentRef",{isSignal:true}]}]}});function y(i){if(typeof window==="undefined")return k(0,0,0,0);const e=k(0,0,window.innerWidth??0,window.innerHeight??0);const n=i?j(i):null;if(!n)return e;const o=n.getBoundingClientRect();const r=window.getComputedStyle(n);return k(o.left+m(r.borderLeftWidth),o.top+m(r.borderTopWidth),o.right-m(r.borderRightWidth),o.bottom-m(r.borderBottomWidth))}function k(i,e,n,o){return{left:i,top:e,right:n,bottom:o,width:Math.max(0,n-i),height:Math.max(0,o-e)}}function j(i){let e=M(i);while(e){if(B(e))return e;e=M(e)}return null}function M(i){const e=i.parentElement;if(e)return e;const n=i.getRootNode?.()?.host;return n instanceof HTMLElement?n:null}function B(i){const e=window.getComputedStyle(i);if(s(e.transform)||s(e.perspective)||s(e.filter)||s(e.backdropFilter)||s(e.translate)||s(e.rotate)||s(e.scale))return true;if(/\b(paint|layout|strict|content)\b/.test(e.contain??""))return true;return/\b(transform|translate|rotate|scale|perspective|filter|backdrop-filter|contain)\b/.test(e.willChange??"")}function s(i){const e=String(i??"").trim();return e.length>0&&e!=="none"}function m(i){const e=Number.parseFloat(String(i??""));return Number.isFinite(e)?e:0}function c(i){const e=String(i??"").trim();const n=e.replace(/[^A-Za-z0-9_]+/g,"-").replace(/^-+|-+$/g,"");if(n||!e)return n;return Array.from(e).map(o=>O[o]??`u${o.codePointAt(0)?.toString(16)}`).join("-")}const O={"%":"percent","+":"plus","-":"minus","*":"star","/":"slash","#":"hash","@":"at","&":"and","=":"equals","<":"lt",">":"gt","€":"eur","$":"usd","£":"gbp","?":"question","!":"exclamation",".":"dot",",":"comma"," ":"space"};function Y(i,e,n){const o=v(()=>{const r=i();return c(r?.dataPath)||c(r?.name)||n},...ngDevMode?[{debugName:"instance"}]:[]);return(r,...d)=>{const b=d.map(p=>c(p)).filter(p=>p.length>0);return[`${e}-${r}`,o(),...b].join("-")}}var f=class T{text=l(...ngDevMode?[void 0,{debugName:"text"}]:[]);metaText=l("",...ngDevMode?[{debugName:"metaText"}]:[]);top=l(null,...ngDevMode?[{debugName:"top"}]:[]);left=l(null,...ngDevMode?[{debugName:"left"}]:[]);interactive=l(false,...ngDevMode?[{debugName:"interactive"}]:[]);mouseEntered=R();mouseLeft=R();get hostTop(){return this.top()}get hostLeft(){return this.left()}get hostInteractiveClass(){return this.interactive()}onMouseEnter(){if(this.interactive())this.mouseEntered.emit()}onMouseLeave(){if(this.interactive())this.mouseLeft.emit()}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:T,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:T,isStandalone:true,selector:"app-tooltip",inputs:{text:{classPropertyName:"text",publicName:"text",isSignal:true,isRequired:false,transformFunction:null},metaText:{classPropertyName:"metaText",publicName:"metaText",isSignal:true,isRequired:false,transformFunction:null},top:{classPropertyName:"top",publicName:"top",isSignal:true,isRequired:false,transformFunction:null},left:{classPropertyName:"left",publicName:"left",isSignal:true,isRequired:false,transformFunction:null},interactive:{classPropertyName:"interactive",publicName:"interactive",isSignal:true,isRequired:false,transformFunction:null}},outputs:{mouseEntered:"mouseEntered",mouseLeft:"mouseLeft"},host:{listeners:{"mouseenter":"onMouseEnter()","mouseleave":"onMouseLeave()"},properties:{"style.top.px":"this.hostTop","style.left.px":"this.hostLeft","class.nvb-tooltip--interactive":"this.hostInteractiveClass"}},ngImport:t,template:'<div class="nvb-tooltip__content">\n  <div>{{ text() }}</div>\n  @if (metaText()) {\n    <div class="nvb-tooltip__meta">{{ metaText() }}</div>\n  }\n</div>\n<div class="nvb-tooltip__arrow" aria-hidden="true"></div>\n',styles:[":host{position:fixed;transform:translate(-50%,calc(-100% - 8px));z-index:2147483647;pointer-events:none;width:max-content;min-width:min(240px,100vw - 24px);max-width:min(420px,100vw - 24px)}:host.nvb-tooltip--interactive{pointer-events:auto}.nvb-tooltip__content{padding:8px 10px;border-radius:var(--nvb-radius-md);border:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800);color:var(--nvb-color-neutral-050);font-size:12px;line-height:1.45;text-align:left;white-space:pre-line;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;cursor:text;box-shadow:0 8px 20px #0f172a59}.nvb-tooltip__meta{margin-top:6px;font-size:10px;line-height:1.35;color:var(--nvb-color-neutral-300)}.nvb-tooltip__arrow{position:absolute;width:10px;height:10px;left:50%;bottom:-5px;transform:translate(-50%) rotate(45deg);border-right:1px solid var(--nvb-color-neutral-700);border-bottom:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800)}\n"],changeDetection:t.ChangeDetectionStrategy.Eager})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:f,decorators:[{type:h,args:[{selector:"app-tooltip",imports:[],changeDetection:_.Eager,template:'<div class="nvb-tooltip__content">\n  <div>{{ text() }}</div>\n  @if (metaText()) {\n    <div class="nvb-tooltip__meta">{{ metaText() }}</div>\n  }\n</div>\n<div class="nvb-tooltip__arrow" aria-hidden="true"></div>\n',styles:[":host{position:fixed;transform:translate(-50%,calc(-100% - 8px));z-index:2147483647;pointer-events:none;width:max-content;min-width:min(240px,100vw - 24px);max-width:min(420px,100vw - 24px)}:host.nvb-tooltip--interactive{pointer-events:auto}.nvb-tooltip__content{padding:8px 10px;border-radius:var(--nvb-radius-md);border:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800);color:var(--nvb-color-neutral-050);font-size:12px;line-height:1.45;text-align:left;white-space:pre-line;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;cursor:text;box-shadow:0 8px 20px #0f172a59}.nvb-tooltip__meta{margin-top:6px;font-size:10px;line-height:1.35;color:var(--nvb-color-neutral-300)}.nvb-tooltip__arrow{position:absolute;width:10px;height:10px;left:50%;bottom:-5px;transform:translate(-50%) rotate(45deg);border-right:1px solid var(--nvb-color-neutral-700);border-bottom:1px solid var(--nvb-color-neutral-700);background:var(--nvb-color-neutral-800)}\n"]}]}],propDecorators:{text:[{type:t.Input,args:[{isSignal:true,alias:"text",required:false}]}],metaText:[{type:t.Input,args:[{isSignal:true,alias:"metaText",required:false}]}],top:[{type:t.Input,args:[{isSignal:true,alias:"top",required:false}]}],left:[{type:t.Input,args:[{isSignal:true,alias:"left",required:false}]}],interactive:[{type:t.Input,args:[{isSignal:true,alias:"interactive",required:false}]}],mouseEntered:[{type:t.Output,args:["mouseEntered"]}],mouseLeft:[{type:t.Output,args:["mouseLeft"]}],hostTop:[{type:x,args:["style.top.px"]}],hostLeft:[{type:x,args:["style.left.px"]}],hostInteractiveClass:[{type:x,args:["class.nvb-tooltip--interactive"]}],onMouseEnter:[{type:C,args:["mouseenter"]}],onMouseLeave:[{type:C,args:["mouseleave"]}]}});var D=class S{model=l(null,...ngDevMode?[{debugName:"model"}]:[]);controlIdInput=l(void 0,...ngDevMode?[{debugName:"controlIdInput"}]:[]);labelForInput=l(void 0,...ngDevMode?[{debugName:"labelForInput"}]:[]);groupRole=l(null,...ngDevMode?[{debugName:"groupRole"}]:[]);showTextWrapperInput=l(true,...ngDevMode?[{debugName:"showTextWrapperInput"}]:[]);required=a(false,...ngDevMode?[{debugName:"required"}]:[]);isRowColumn=a(false,...ngDevMode?[{debugName:"isRowColumn"}]:[]);labelHidden=a(false,...ngDevMode?[{debugName:"labelHidden"}]:[]);isReady=a(true,...ngDevMode?[{debugName:"isReady"}]:[]);labelTooltipVisible=a(false,...ngDevMode?[{debugName:"labelTooltipVisible"}]:[]);labelTooltipTop=a(null,...ngDevMode?[{debugName:"labelTooltipTop"}]:[]);labelTooltipLeft=a(null,...ngDevMode?[{debugName:"labelTooltipLeft"}]:[]);columnErrorVisible=a(false,...ngDevMode?[{debugName:"columnErrorVisible"}]:[]);columnErrorTop=a(null,...ngDevMode?[{debugName:"columnErrorTop"}]:[]);columnErrorLeft=a(null,...ngDevMode?[{debugName:"columnErrorLeft"}]:[]);columnErrorPlacement=a("below",...ngDevMode?[{debugName:"columnErrorPlacement"}]:[]);columnErrorFrameId=null;elementActionService=u(q);validatorService=u(z);propertyChangeRefresh=F(()=>this.model());isEditor=a(g.isEditor(),...ngDevMode?[{debugName:"isEditor"}]:[]);elementHoverTitle=v(()=>{if(!this.isEditor())return null;return String(this.model()?.name??"").trim()||null},...ngDevMode?[{debugName:"elementHoverTitle"}]:[]);testId=v(()=>c(this.model()?.dataPath)||c(this.model()?.name)||null,...ngDevMode?[{debugName:"testId"}]:[]);baseId=v(()=>{const e=String(this.controlIdInput()??"").trim();if(e)return e;const n=String(this.model()?.name??"").trim();if(n)return this.slugify(n);const o=String(this.model()?.label??"").trim();if(o)return`nvb-field-${this.slugify(o)}`;return null},...ngDevMode?[{debugName:"baseId"}]:[]);ngOnInit(){this.isEditor.set(g.isEditor());if(this.model()?.parentElement&&this.model()?.parentElement.type==="dynamicTable")this.isRowColumn.set(true);this.labelHidden.set(this.isRowColumn()||Boolean(this.model()?.["__nvbHideLabel"]));this.runLoadLifecycle()}async runLoadLifecycle(){if(g.isEditor())return;const e=this.model();if(!e)return;const n=e.events??[];if(!Array.isArray(n)||n.length===0)return;const o=this.createRuntimeContext(e);if(n.some(r=>r?.trigger==="beforeLoad")){this.isReady.set(false);await this.elementActionService.runActions(e,n,"beforeLoad",o)}this.isReady.set(true);await this.elementActionService.runActions(e,n,"onLoad",o);queueMicrotask(()=>{this.elementActionService.runActions(e,n,"afterLoad",o)})}createRuntimeContext(e){const n=e.value;const o=String(e.name??"").trim();const r={value:n,item:null,row:null};if(o)r[o]=n;return r}hasLabelTooltip(){return String(this.model()?.["labelTooltip"]??"").trim().length>0}setLabelTooltipVisible(e,n){if(!this.hasLabelTooltip()){this.labelTooltipVisible.set(false);return}if(e&&n){const o=n.currentTarget;if(o){const r=o.getBoundingClientRect();const d=y(o);this.labelTooltipTop.set(Math.round(r.top-d.top));this.labelTooltipLeft.set(Math.round(r.left+r.width/2-d.left))}}this.labelTooltipVisible.set(e)}setColumnErrorVisible(e,n){this.cancelColumnErrorFrame();if(!e){this.columnErrorVisible.set(false);return}const o=n?.currentTarget;if(!o){this.columnErrorVisible.set(false);return}this.positionColumnError(o);this.columnErrorVisible.set(true);if(typeof requestAnimationFrame!=="function")return;this.columnErrorFrameId=requestAnimationFrame(()=>{this.columnErrorFrameId=null;if(!this.columnErrorVisible()||!o.isConnected)return;this.positionColumnError(o)})}positionColumnError(e){const n=e.getBoundingClientRect();const o=e.parentElement?.querySelector(".nvb-field__column-error-dialog")??null;const r=y(o??e);const d=o?.offsetHeight??0;const b=5;const p=(typeof window==="undefined"?0:window.innerHeight??0)-n.bottom-b;const V=n.top-b;const E=d>0&&p<d&&V>=d?"above":"below";this.columnErrorPlacement.set(E);this.columnErrorLeft.set(Math.round(n.left+n.width/2-r.left));this.columnErrorTop.set(Math.round((E==="above"?n.top-b:n.bottom+b)-r.top))}cancelColumnErrorFrame(){if(this.columnErrorFrameId!==null&&typeof cancelAnimationFrame==="function")cancelAnimationFrame(this.columnErrorFrameId);this.columnErrorFrameId=null}shouldShowErrors(){this.validatorService.getValidationRenderVersion();if(!Array.isArray(this.model()?.errors)||this.model().errors.length===0)return false;return this.validatorService.isElementValidationVisible(this.model())}hasLabelText(){return String(this.model()?.label??"").trim().length>0}hasDescription(){return String(this.model()?.description??"").trim().length>0}showLabelRow(){if(this.labelHidden())return false;return this.hasLabelText()||this.hasLabelTooltip()}showTextWrapper(){if(this.showTextWrapperInput()===false)return false;if(this.isRowColumn())return false;return this.showLabelRow()||this.hasDescription()}controlId(){return this.baseId()}labelFor(){const e=this.labelForInput();if(e===null)return null;const n=String(e??"").trim();if(n)return n;return this.controlId()}labelId(){return this.partId("label")}descriptionId(){return this.hasDescription()?this.partId("description"):null}errorId(){return this.shouldShowErrors()?this.partId("error"):null}partId(e){const n=this.baseId();const o=String(e??"").trim();if(!n||!o)return null;return`${n}-${o}`}describedByIds(...e){const n=[this.descriptionId(),this.errorId(),...e].map(o=>String(o??"").trim()).filter(Boolean);if(n.length===0)return null;return n.join(" ")}isInvalid(){return this.shouldShowErrors()}slugify(e){return`nvb-field-${String(e??"").trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,64)}`}static ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:S,deps:[],target:t.ɵɵFactoryTarget.Component});static ɵcmp=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:S,isStandalone:true,selector:"element-wrapper",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null},controlIdInput:{classPropertyName:"controlIdInput",publicName:"controlIdInput",isSignal:true,isRequired:false,transformFunction:null},labelForInput:{classPropertyName:"labelForInput",publicName:"labelForInput",isSignal:true,isRequired:false,transformFunction:null},groupRole:{classPropertyName:"groupRole",publicName:"groupRole",isSignal:true,isRequired:false,transformFunction:null},showTextWrapperInput:{classPropertyName:"showTextWrapperInput",publicName:"showTextWrapperInput",isSignal:true,isRequired:false,transformFunction:null}},exportAs:["elementWrapper"],ngImport:t,template:"<div\n  class=\"nvb-field\"\n  [class.nvb-field--has-errors]=\"shouldShowErrors()\"\n  [class.nvb-field--disabled]=\"model()?.disabled\"\n  [class.nvb-field--fit-content]=\"model()?.fitContent && !isRowColumn()\"\n  [class.nvb-field--row-column]=\"isRowColumn()\"\n  [attr.role]=\"groupRole()\"\n  [attr.aria-labelledby]=\"groupRole() ? labelId() : null\"\n  [attr.aria-describedby]=\"groupRole() ? describedByIds() : null\"\n  [attr.data-nvb-element-name]=\"model()?.name || null\"\n  [attr.data-nvb-data-path]=\"model()?.dataPath || null\"\n  [attr.data-nvb-element-type]=\"model()?.type || null\"\n  [attr.data-testid]=\"testId() ? 'nvb-element-' + testId() : null\"\n  [attr.aria-disabled]=\"model()?.disabled ? 'true' : null\"\n  [attr.aria-readonly]=\"model()?.readOnly ? 'true' : null\"\n  [attr.title]=\"elementHoverTitle()\"\n>\n  @if (showTextWrapper()) {\n    <div class=\"nvb-field__text-warpper\">\n      @if (showLabelRow()) {\n        <label\n          [id]=\"labelId()\"\n          [for]=\"labelFor()\"\n          class=\"nvb-field__label\"\n          [attr.data-testid]=\"testId() ? 'nvb-label-' + testId() : null\"\n        >\n          @if (hasLabelText()) {\n            <span class=\"nvb-field__label-text\">{{\n              $safeNavigationMigration(model()?.label) | dynamicText: model()\n            }}</span>\n          }\n          @if (hasLabelTooltip()) {\n            <button\n              type=\"button\"\n              class=\"nvb-field__label-tooltip-trigger\"\n              [attr.data-testid]=\"\n                testId() ? 'nvb-label-tooltip-trigger-' + testId() : null\n              \"\n              [attr.aria-label]=\"\n                model()?.name\n                  ? ('preview.fieldHelp' | uiT: 'Field help') + ': ' + model()?.name\n                  : ('preview.fieldHelp' | uiT: 'Field help')\n              \"\n              [attr.aria-expanded]=\"labelTooltipVisible()\"\n              (mouseenter)=\"setLabelTooltipVisible(true, $event)\"\n              (mouseleave)=\"setLabelTooltipVisible(false)\"\n              (focus)=\"setLabelTooltipVisible(true, $event)\"\n              (blur)=\"setLabelTooltipVisible(false)\"\n            >\n              <span class=\"nvb-field__label-tooltip-mark\" aria-hidden=\"true\">?</span>\n              @if (labelTooltipVisible() && hasLabelTooltip()) {\n                <app-tooltip\n                  [text]=\"\n                    $safeNavigationMigration(model()?.['labelTooltip']) | dynamicText: model()\n                  \"\n                  [top]=\"labelTooltipTop()\"\n                  [left]=\"labelTooltipLeft()\"\n                />\n              }\n            </button>\n          }\n          @if (model()?.required) {\n            <span class=\"nvb-field__required\">*</span>\n          }\n        </label>\n      }\n      @if (hasDescription()) {\n        <span\n          [id]=\"descriptionId()\"\n          class=\"nvb-field__description\"\n          [attr.data-testid]=\"testId() ? 'nvb-description-' + testId() : null\"\n        >\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"nvb-field__content\"\n      [class.nvb-field__content--disabled]=\"model()?.disabled\"\n      [attr.data-testid]=\"testId() ? 'nvb-content-' + testId() : null\"\n    >\n      <ng-content></ng-content>\n\n      @if (shouldShowErrors()) {\n        @if (isRowColumn()) {\n          <div\n            #errorTrigger\n            [id]=\"errorId()\"\n            class=\"nvb-field__column-error\"\n            tabindex=\"0\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"model()?.name ? 'Errors for ' + model()?.name : 'Errors'\"\n            (mouseenter)=\"setColumnErrorVisible(true, $event)\"\n            (mouseleave)=\"setColumnErrorVisible(false)\"\n            (focus)=\"setColumnErrorVisible(true, $event)\"\n            (blur)=\"setColumnErrorVisible(false)\"\n          >\n            <span class=\"material-symbols-outlined nvb-field__column-error-icon\">error</span>\n          </div>\n\n          <!--\n            A sibling of the icon, not a child of it: the icon is stacked above\n            the input with `z-index` and centred with a transform, and both of\n            those make it a stacking context that would cap the bubble's own\n            z-index and pin its fixed position to the icon's 20px box.\n          -->\n          <div\n            class=\"nvb-field__column-error-dialog\"\n            [class.nvb-field__column-error-dialog--visible]=\"columnErrorVisible()\"\n            [class.nvb-field__column-error-dialog--above]=\"columnErrorPlacement() === 'above'\"\n            [style.top.px]=\"columnErrorTop()\"\n            [style.left.px]=\"columnErrorLeft()\"\n          >\n            <ul>\n              @for (error of model()?.errors; track $index) {\n                <li>&bull; {{ error }}</li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <div\n            [id]=\"errorId()\"\n            class=\"nvb-field__errors\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n          >\n            @for (error of model()?.errors; track $index) {\n              <small class=\"nvb-field__error-item\">{{ error }}</small>\n            }\n          </div>\n        }\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-field__content nvb-field__content--loading\"></div>\n  }\n</div>\n",styles:['.nvb-field{--nvb-disabled-surface: color-mix( in oklab, var(--nvb-color-neutral-100) 88%, var(--nvb-color-neutral-000) );--nvb-disabled-border: color-mix(in oklab, var(--nvb-color-neutral-300) 86%, var(--nvb-color-neutral-000));--nvb-disabled-text: var(--nvb-color-neutral-500);display:flex;flex-direction:column;gap:var(--nvb-space-1)}.nvb-field__label{font-size:14px;line-height:18px;color:var(--nvb-color-neutral-800);position:relative;display:inline-flex;align-items:center;gap:var(--nvb-space-2);width:fit-content;font-weight:600}.nvb-field__label-text{display:inline}.nvb-field__label-tooltip-trigger{position:relative;border:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-500);padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:help;width:14px;height:14px;border-radius:var(--nvb-radius-sm);transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-field__label-tooltip-trigger:hover,.nvb-field__label-tooltip-trigger:focus-visible{color:var(--nvb-color-neutral-700);outline:none;border-color:var(--nvb-color-neutral-300);background-color:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100))}.nvb-field__label-tooltip-mark{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;line-height:1}.nvb-field__text-warpper{display:flex;flex-direction:column;gap:2px}.nvb-field__description{font-size:12px;color:var(--nvb-color-neutral-500);line-height:16px;max-width:72ch}.nvb-field__required{color:var(--nvb-color-risk-600)}.nvb-field__error{color:var(--nvb-color-risk-600);font-size:12px;line-height:16px}.nvb-field--has-errors .nvb-field__label-text{color:var(--nvb-color-risk-700)}.nvb-field--has-errors ::ng-deep .nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-control__attribute-input,.nvb-field--has-errors ::ng-deep .nvb-phone__number,.nvb-field--has-errors ::ng-deep textarea.nvb-control__text-input,.nvb-field--has-errors ::ng-deep textarea.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-datepicker__trigger{border-color:var(--nvb-color-risk-500);box-shadow:0 0 0 1px var(--nvb-color-neutral-000),0 0 0 3px color-mix(in oklch,var(--nvb-color-risk-500) 28%,transparent)}.nvb-field--disabled .nvb-field__label,.nvb-field--disabled .nvb-field__description{color:var(--nvb-color-neutral-500)}.nvb-field--disabled .nvb-field__label-tooltip-trigger{background:color-mix(in oklab,var(--nvb-color-neutral-100) 82%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-200);color:var(--nvb-color-neutral-500)}.nvb-field__content{position:relative;min-width:0}.nvb-field--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-field--fit-content .nvb-field__content{width:fit-content;max-width:100%}.nvb-field--fit-content .nvb-field__content>*{max-width:100%}.nvb-field--row-column{gap:0;min-height:100%;height:100%}.nvb-field--row-column .nvb-field__text-warpper{display:none}.nvb-field--row-column .nvb-field__content{min-height:inherit;height:100%;display:flex;align-items:stretch;justify-content:stretch}.nvb-field--row-column .nvb-field__content>*{flex:1 1 auto;min-width:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;border-radius:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{border-color:transparent;box-shadow:none}.nvb-field__content--disabled{pointer-events:none}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field,.nvb-field__content--disabled ::ng-deep .nvb-table-frame,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root],.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] thead td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] tfoot td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important;box-shadow:none!important}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-phone__number::placeholder{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__page{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-table th,.nvb-field__content--disabled ::ng-deep .nvb-table td,.nvb-field__content--disabled ::ng-deep .nvb-nested-table th,.nvb-field__content--disabled ::ng-deep .nvb-nested-table td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select-value,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button span,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action span,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav span,.nvb-field__content--disabled ::ng-deep .nvb-phone__country{color:inherit!important}.nvb-field__content--disabled ::ng-deep input[type=checkbox],.nvb-field__content--disabled ::ng-deep input[type=radio]{accent-color:color-mix(in oklab,var(--nvb-color-neutral-400) 88%,white)}.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;background:var(--nvb-disabled-surface)!important;border-color:transparent!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--loading{min-height:36px}.nvb-field__column-error{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;justify-content:center;align-items:center;background-color:var(--nvb-color-risk-050);border-radius:var(--nvb-radius-md);z-index:5;cursor:pointer}.nvb-field__column-error:hover,.nvb-field__column-error:focus-visible{background-color:var(--nvb-color-risk-100)}.nvb-field__column-error:hover .nvb-field__column-error-icon,.nvb-field__column-error:focus-visible .nvb-field__column-error-icon{color:var(--nvb-color-risk-700)}.nvb-field__column-error-dialog{position:fixed;transform:translate(-50%);padding:5px;min-width:180px;max-width:300px;background-color:var(--nvb-color-risk-050);border:1px solid var(--nvb-color-risk-200);border-radius:var(--nvb-radius-md);font-size:12px;color:var(--nvb-color-risk-700);white-space:normal;z-index:2147483646;box-shadow:0 8px 24px #0f172a1f;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.nvb-field__column-error-dialog--visible{opacity:1;visibility:visible;pointer-events:auto}.nvb-field__column-error-dialog--above{transform:translate(-50%,-100%)}.nvb-field__column-error-dialog--above:before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-200)}.nvb-field__column-error-dialog--above:after{top:auto;bottom:-5px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-050)}.nvb-field__column-error-dialog:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-200);z-index:1}.nvb-field__column-error-dialog:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-050);z-index:2}.nvb-field__column-error-dialog table,.nvb-field__column-error-dialog li{margin:0}.nvb-field__column-error-icon{color:var(--nvb-color-risk-600);font-size:16px}.nvb-field__errors{margin-top:6px;display:flex;flex-direction:column;gap:4px}.nvb-field__error-item{margin:0;color:var(--nvb-color-risk-700);font-size:12px;line-height:1.45}\n'],dependencies:[{kind:"component",type:f,selector:"app-tooltip",inputs:["text","metaText","top","left","interactive"],outputs:["mouseEntered","mouseLeft"]},{kind:"pipe",type:L,name:"dynamicText"},{kind:"pipe",type:N,name:"uiT"}],changeDetection:t.ChangeDetectionStrategy.Eager})};t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:t,type:D,decorators:[{type:h,args:[{selector:"element-wrapper",exportAs:"elementWrapper",imports:[L,f,N,w],changeDetection:_.Eager,template:"<div\n  class=\"nvb-field\"\n  [class.nvb-field--has-errors]=\"shouldShowErrors()\"\n  [class.nvb-field--disabled]=\"model()?.disabled\"\n  [class.nvb-field--fit-content]=\"model()?.fitContent && !isRowColumn()\"\n  [class.nvb-field--row-column]=\"isRowColumn()\"\n  [attr.role]=\"groupRole()\"\n  [attr.aria-labelledby]=\"groupRole() ? labelId() : null\"\n  [attr.aria-describedby]=\"groupRole() ? describedByIds() : null\"\n  [attr.data-nvb-element-name]=\"model()?.name || null\"\n  [attr.data-nvb-data-path]=\"model()?.dataPath || null\"\n  [attr.data-nvb-element-type]=\"model()?.type || null\"\n  [attr.data-testid]=\"testId() ? 'nvb-element-' + testId() : null\"\n  [attr.aria-disabled]=\"model()?.disabled ? 'true' : null\"\n  [attr.aria-readonly]=\"model()?.readOnly ? 'true' : null\"\n  [attr.title]=\"elementHoverTitle()\"\n>\n  @if (showTextWrapper()) {\n    <div class=\"nvb-field__text-warpper\">\n      @if (showLabelRow()) {\n        <label\n          [id]=\"labelId()\"\n          [for]=\"labelFor()\"\n          class=\"nvb-field__label\"\n          [attr.data-testid]=\"testId() ? 'nvb-label-' + testId() : null\"\n        >\n          @if (hasLabelText()) {\n            <span class=\"nvb-field__label-text\">{{\n              $safeNavigationMigration(model()?.label) | dynamicText: model()\n            }}</span>\n          }\n          @if (hasLabelTooltip()) {\n            <button\n              type=\"button\"\n              class=\"nvb-field__label-tooltip-trigger\"\n              [attr.data-testid]=\"\n                testId() ? 'nvb-label-tooltip-trigger-' + testId() : null\n              \"\n              [attr.aria-label]=\"\n                model()?.name\n                  ? ('preview.fieldHelp' | uiT: 'Field help') + ': ' + model()?.name\n                  : ('preview.fieldHelp' | uiT: 'Field help')\n              \"\n              [attr.aria-expanded]=\"labelTooltipVisible()\"\n              (mouseenter)=\"setLabelTooltipVisible(true, $event)\"\n              (mouseleave)=\"setLabelTooltipVisible(false)\"\n              (focus)=\"setLabelTooltipVisible(true, $event)\"\n              (blur)=\"setLabelTooltipVisible(false)\"\n            >\n              <span class=\"nvb-field__label-tooltip-mark\" aria-hidden=\"true\">?</span>\n              @if (labelTooltipVisible() && hasLabelTooltip()) {\n                <app-tooltip\n                  [text]=\"\n                    $safeNavigationMigration(model()?.['labelTooltip']) | dynamicText: model()\n                  \"\n                  [top]=\"labelTooltipTop()\"\n                  [left]=\"labelTooltipLeft()\"\n                />\n              }\n            </button>\n          }\n          @if (model()?.required) {\n            <span class=\"nvb-field__required\">*</span>\n          }\n        </label>\n      }\n      @if (hasDescription()) {\n        <span\n          [id]=\"descriptionId()\"\n          class=\"nvb-field__description\"\n          [attr.data-testid]=\"testId() ? 'nvb-description-' + testId() : null\"\n        >\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </span>\n      }\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"nvb-field__content\"\n      [class.nvb-field__content--disabled]=\"model()?.disabled\"\n      [attr.data-testid]=\"testId() ? 'nvb-content-' + testId() : null\"\n    >\n      <ng-content></ng-content>\n\n      @if (shouldShowErrors()) {\n        @if (isRowColumn()) {\n          <div\n            #errorTrigger\n            [id]=\"errorId()\"\n            class=\"nvb-field__column-error\"\n            tabindex=\"0\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"model()?.name ? 'Errors for ' + model()?.name : 'Errors'\"\n            (mouseenter)=\"setColumnErrorVisible(true, $event)\"\n            (mouseleave)=\"setColumnErrorVisible(false)\"\n            (focus)=\"setColumnErrorVisible(true, $event)\"\n            (blur)=\"setColumnErrorVisible(false)\"\n          >\n            <span class=\"material-symbols-outlined nvb-field__column-error-icon\">error</span>\n          </div>\n\n          <!--\n            A sibling of the icon, not a child of it: the icon is stacked above\n            the input with `z-index` and centred with a transform, and both of\n            those make it a stacking context that would cap the bubble's own\n            z-index and pin its fixed position to the icon's 20px box.\n          -->\n          <div\n            class=\"nvb-field__column-error-dialog\"\n            [class.nvb-field__column-error-dialog--visible]=\"columnErrorVisible()\"\n            [class.nvb-field__column-error-dialog--above]=\"columnErrorPlacement() === 'above'\"\n            [style.top.px]=\"columnErrorTop()\"\n            [style.left.px]=\"columnErrorLeft()\"\n          >\n            <ul>\n              @for (error of model()?.errors; track $index) {\n                <li>&bull; {{ error }}</li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <div\n            [id]=\"errorId()\"\n            class=\"nvb-field__errors\"\n            [attr.data-testid]=\"testId() ? 'nvb-errors-' + testId() : null\"\n            aria-live=\"polite\"\n          >\n            @for (error of model()?.errors; track $index) {\n              <small class=\"nvb-field__error-item\">{{ error }}</small>\n            }\n          </div>\n        }\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-field__content nvb-field__content--loading\"></div>\n  }\n</div>\n",styles:['.nvb-field{--nvb-disabled-surface: color-mix( in oklab, var(--nvb-color-neutral-100) 88%, var(--nvb-color-neutral-000) );--nvb-disabled-border: color-mix(in oklab, var(--nvb-color-neutral-300) 86%, var(--nvb-color-neutral-000));--nvb-disabled-text: var(--nvb-color-neutral-500);display:flex;flex-direction:column;gap:var(--nvb-space-1)}.nvb-field__label{font-size:14px;line-height:18px;color:var(--nvb-color-neutral-800);position:relative;display:inline-flex;align-items:center;gap:var(--nvb-space-2);width:fit-content;font-weight:600}.nvb-field__label-text{display:inline}.nvb-field__label-tooltip-trigger{position:relative;border:1px solid var(--nvb-color-neutral-200);background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-500);padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:help;width:14px;height:14px;border-radius:var(--nvb-radius-sm);transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-field__label-tooltip-trigger:hover,.nvb-field__label-tooltip-trigger:focus-visible{color:var(--nvb-color-neutral-700);outline:none;border-color:var(--nvb-color-neutral-300);background-color:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100))}.nvb-field__label-tooltip-mark{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;line-height:1}.nvb-field__text-warpper{display:flex;flex-direction:column;gap:2px}.nvb-field__description{font-size:12px;color:var(--nvb-color-neutral-500);line-height:16px;max-width:72ch}.nvb-field__required{color:var(--nvb-color-risk-600)}.nvb-field__error{color:var(--nvb-color-risk-600);font-size:12px;line-height:16px}.nvb-field--has-errors .nvb-field__label-text{color:var(--nvb-color-risk-700)}.nvb-field--has-errors ::ng-deep .nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-control__attribute-input,.nvb-field--has-errors ::ng-deep .nvb-phone__number,.nvb-field--has-errors ::ng-deep textarea.nvb-control__text-input,.nvb-field--has-errors ::ng-deep textarea.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__text-input,.nvb-field--has-errors ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--has-errors ::ng-deep .nvb-datepicker__trigger{border-color:var(--nvb-color-risk-500);box-shadow:0 0 0 1px var(--nvb-color-neutral-000),0 0 0 3px color-mix(in oklch,var(--nvb-color-risk-500) 28%,transparent)}.nvb-field--disabled .nvb-field__label,.nvb-field--disabled .nvb-field__description{color:var(--nvb-color-neutral-500)}.nvb-field--disabled .nvb-field__label-tooltip-trigger{background:color-mix(in oklab,var(--nvb-color-neutral-100) 82%,var(--nvb-color-neutral-000));border-color:var(--nvb-color-neutral-200);color:var(--nvb-color-neutral-500)}.nvb-field__content{position:relative;min-width:0}.nvb-field--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-field--fit-content .nvb-field__content{width:fit-content;max-width:100%}.nvb-field--fit-content .nvb-field__content>*{max-width:100%}.nvb-field--row-column{gap:0;min-height:100%;height:100%}.nvb-field--row-column .nvb-field__text-warpper{display:none}.nvb-field--row-column .nvb-field__content{min-height:inherit;height:100%;display:flex;align-items:stretch;justify-content:stretch}.nvb-field--row-column .nvb-field__content>*{flex:1 1 auto;min-width:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;border-radius:0}.nvb-field--row-column ::ng-deep .nvb-control__text-input,.nvb-field--row-column ::ng-deep .nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column ::ng-deep .nvb-phone__number,.nvb-field--row-column ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column ::ng-deep .nvb-select__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column ::ng-deep .nvb-datepicker-range__field{border-color:transparent;box-shadow:none}.nvb-field__content--disabled{pointer-events:none}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field,.nvb-field__content--disabled ::ng-deep .nvb-table-frame,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root],.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] thead td,.nvb-field__content--disabled ::ng-deep table[data-testid=dynamic-table-root] tfoot td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important;box-shadow:none!important}.nvb-field__content--disabled ::ng-deep .nvb-control__text-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-control__column-input::placeholder,.nvb-field__content--disabled ::ng-deep .nvb-phone__number::placeholder{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__page{color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-table th,.nvb-field__content--disabled ::ng-deep .nvb-table td,.nvb-field__content--disabled ::ng-deep .nvb-nested-table th,.nvb-field__content--disabled ::ng-deep .nvb-nested-table td{background:var(--nvb-disabled-surface)!important;border-color:var(--nvb-disabled-border)!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--disabled ::ng-deep .nvb-select-value,.nvb-field__content--disabled ::ng-deep .nvb-table-toolbar__button span,.nvb-field__content--disabled ::ng-deep .nvb-table-export__action span,.nvb-field__content--disabled ::ng-deep .nvb-table-paginator__nav span,.nvb-field__content--disabled ::ng-deep .nvb-phone__country{color:inherit!important}.nvb-field__content--disabled ::ng-deep input[type=checkbox],.nvb-field__content--disabled ::ng-deep input[type=radio]{accent-color:color-mix(in oklab,var(--nvb-color-neutral-400) 88%,white)}.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-control__attribute-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-phone__number,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__text-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep textarea.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-input-wrapper.nvb-control__column-input,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-select__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__trigger,.nvb-field--row-column .nvb-field__content--disabled ::ng-deep .nvb-datepicker-range__field{width:100%;min-height:100%;height:100%;background:var(--nvb-disabled-surface)!important;border-color:transparent!important;color:var(--nvb-disabled-text)!important}.nvb-field__content--loading{min-height:36px}.nvb-field__column-error{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;justify-content:center;align-items:center;background-color:var(--nvb-color-risk-050);border-radius:var(--nvb-radius-md);z-index:5;cursor:pointer}.nvb-field__column-error:hover,.nvb-field__column-error:focus-visible{background-color:var(--nvb-color-risk-100)}.nvb-field__column-error:hover .nvb-field__column-error-icon,.nvb-field__column-error:focus-visible .nvb-field__column-error-icon{color:var(--nvb-color-risk-700)}.nvb-field__column-error-dialog{position:fixed;transform:translate(-50%);padding:5px;min-width:180px;max-width:300px;background-color:var(--nvb-color-risk-050);border:1px solid var(--nvb-color-risk-200);border-radius:var(--nvb-radius-md);font-size:12px;color:var(--nvb-color-risk-700);white-space:normal;z-index:2147483646;box-shadow:0 8px 24px #0f172a1f;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.nvb-field__column-error-dialog--visible{opacity:1;visibility:visible;pointer-events:auto}.nvb-field__column-error-dialog--above{transform:translate(-50%,-100%)}.nvb-field__column-error-dialog--above:before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-200)}.nvb-field__column-error-dialog--above:after{top:auto;bottom:-5px;border-bottom:0;border-top:6px solid var(--nvb-color-risk-050)}.nvb-field__column-error-dialog:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-200);z-index:1}.nvb-field__column-error-dialog:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--nvb-color-risk-050);z-index:2}.nvb-field__column-error-dialog table,.nvb-field__column-error-dialog li{margin:0}.nvb-field__column-error-icon{color:var(--nvb-color-risk-600);font-size:16px}.nvb-field__errors{margin-top:6px;display:flex;flex-direction:column;gap:4px}.nvb-field__error-item{margin:0;color:var(--nvb-color-risk-700);font-size:12px;line-height:1.45}\n']}]}],propDecorators:{model:[{type:t.Input,args:[{isSignal:true,alias:"model",required:false}]}],controlIdInput:[{type:t.Input,args:[{isSignal:true,alias:"controlIdInput",required:false}]}],labelForInput:[{type:t.Input,args:[{isSignal:true,alias:"labelForInput",required:false}]}],groupRole:[{type:t.Input,args:[{isSignal:true,alias:"groupRole",required:false}]}],showTextWrapperInput:[{type:t.Input,args:[{isSignal:true,alias:"showTextWrapperInput",required:false}]}]}});export{y as a,c as i,f as n,w as o,Y as r,D as t};

package/fesm2022/{ngxviewbuilder-runtime-file-upload-element-D9RXvqKq.mjs → ngxviewbuilder-runtime-file-upload-element-BYU3tLZw.mjs}

@@ -1 +1 @@
-import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as k,l as I,n as y,r as w,sn as P}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-CJyXJ0dU.mjs";import{Z as D,lt as M,t as z}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{r as N,t as _}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as R,ChangeDetectorRef as T,Component as U,ViewChild as C,inject as c,input as E,signal as u}from"@angular/core";import{NgClass as x}from"@angular/common";import{get as B}from"lodash-es";import{firstValueFrom as b}from"rxjs";import{DomSanitizer as A}from"@angular/platform-browser";var O=S({FileUploadElement:()=>h});var h=class g{model=E.required(...ngDevMode?[{debugName:"model"}]:[]);tid=N(this.model,"nvb-file-upload","file-upload");fileInput;isDragOver=u(false,...ngDevMode?[{debugName:"isDragOver"}]:[]);requestInFlight=u(false,...ngDevMode?[{debugName:"requestInFlight"}]:[]);previewItems=u([],...ngDevMode?[{debugName:"previewItems"}]:[]);previewOpen=u(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewUrl=u("",...ngDevMode?[{debugName:"previewUrl"}]:[]);previewKind=u(null,...ngDevMode?[{debugName:"previewKind"}]:[]);previewName=u("",...ngDevMode?[{debugName:"previewName"}]:[]);previewFrameUrl=u(null,...ngDevMode?[{debugName:"previewFrameUrl"}]:[]);elementActionService=c(D);dataSourceService=c(I);dataService=c(P);eventService=c(k);ngxViewBuilderApiService=c(z);cdr=c(T);sanitizer=c(A);markupSecurityService=c(M);previewObjectUrl=null;activePreviewResource=null;onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){this.syncPreviewFromModelValue();this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.closePreview();this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}openPicker(){if(this.isInteractionLocked())return;this.fileInput?.nativeElement.click()}onFileInputChange(e){if(this.isInteractionLocked())return;const t=e.target;const i=t?.files?Array.from(t.files):[];this.applyFiles(i);if(t)t.value=""}onDragOver(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(true)}onDragLeave(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(false)}onDrop(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(false);const t=e.dataTransfer?.files?Array.from(e.dataTransfer.files):[];this.applyFiles(t)}onEntryActivate(e,t){t.preventDefault();t.stopPropagation();if(this.canPreviewEntry(e)){this.previewFileAsync(e);return}if(this.canDownload(e))this.downloadFileAsync(e)}removeFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.removeFileAsync(e)}downloadFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.downloadFileAsync(e)}previewFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.previewFileAsync(e)}clearFiles(e){e?.preventDefault();e?.stopPropagation();if(this.isInteractionLocked())return;this.closePreview();this.previewItems.set([]);this.model().setFiles([]);this.emitChangeActions()}closePreview(e){e?.preventDefault();e?.stopPropagation();this.previewOpen.set(false);this.previewUrl.set("");this.previewKind.set(null);this.previewName.set("");this.previewFrameUrl.set(null);this.activePreviewResource=null;if(this.previewObjectUrl){URL.revokeObjectURL(this.previewObjectUrl);this.previewObjectUrl=null}}formatSize(e){const t=Number(e);if(!Number.isFinite(t)||t<0)return"0 B";if(t<1024)return`${t} B`;if(t<1048576)return`${(t/1024).toFixed(1)} KB`;return`${(t/1048576).toFixed(1)} MB`}resolveDisplayMode(){const e=String(this.model().displayMode??"modern").trim().toLowerCase();if(e==="compact"||e==="grid")return e;return"modern"}resolveStatusText(e){if(e.status==="pending")return this.isBase64Mode()?"Reading file...":"Uploading...";if(e.status==="error")return e.errorMessage||"Upload failed";return""}canOpenEntry(e){return this.canPreviewEntry(e)||this.canDownload(e)}canDownload(e){if(e.localFile||e.meta.base64)return true;if(!String(this.model().downloadDataSourceName??"").trim())return false;return Boolean(this.resolveMetaKey(e.meta))}canPreviewEntry(e){if(!this.model().showPreview)return false;return this.resolvePreviewKind(e.meta)!==null&&this.canDownload(e)}async applyFiles(e){if(this.isInteractionLocked())return;const t=Boolean(this.model().multiple);const i=t?[...this.previewItems()]:[];const n=this.normalizeFiles(e,i.length);if(n.length===0)return;const r=t?[...i]:[];const o=this.isBase64Mode();const a=!o&&String(this.model().uploadDataSourceName??"").trim().length>0;const l=n.map((s,v)=>this.createPreviewEntry(this.createLocalMeta(s),s,a||o?"pending":"ready","",`${Date.now()}-${v}-${s.name}`));r.push(...l);this.commitPreviewEntries(r);this.emitChangeActions();this.ngxViewBuilderApiService.notifyFileUploadFilesAdded({elementName:this.model().name,elementDataPath:this.model().dataPath,element:this.model(),files:r.map(s=>s.meta),addedFiles:l.map(s=>s.meta)});if(o){await this.encodeEntries(l);return}if(!a)return;this.requestInFlight.set(true);let d=false;try{for(const s of l){const v=s.localFile;if(!v)continue;try{const m=await this.uploadFileIfNeeded(v);const f=this.updatePreviewEntry(s.id,F=>({...F,meta:m,iconName:this.resolveFileTypeIcon(m),status:"ready",errorMessage:""}));d=d||f}catch{const m=this.updatePreviewEntry(s.id,f=>({...f,status:"error",errorMessage:"Upload failed"}));d=d||m}}}finally{this.requestInFlight.set(false)}if(d)this.emitChangeActions()}async encodeEntries(e){let t=false;for(const i of e){const n=i.localFile;if(!n)continue;try{const r=await this.readFileAsBase64(n);t=this.updatePreviewEntry(i.id,o=>({...o,meta:{...o.meta,base64:r},status:"ready",errorMessage:""}))||t}catch{t=this.updatePreviewEntry(i.id,r=>({...r,status:"error",errorMessage:"Could not read the file"}))||t}}if(t)this.emitChangeActions()}readFileAsBase64(e){return new Promise((t,i)=>{const n=new FileReader;n.onload=()=>{const r=String(n.result??"");const o=r.indexOf(",");t(o>=0?r.slice(o+1):r)};n.onerror=()=>i(n.error??new Error("Could not read the file."));n.readAsDataURL(e)})}isBase64Mode(){return this.model().storageMode!=="server"}async removeFileAsync(e){const t=[...this.previewItems()];if(e<0||e>=t.length)return;const i=t[e];const n=this.resolveMetaKey(i.meta);const r=String(this.model().deleteDataSourceName??"").trim();if(r&&n){if(!await this.deleteFileFromServer(i.meta,r,n))return}t.splice(e,1);this.previewItems.set(t);this.model().setFiles(t.map(o=>o.meta));if(this.previewOpen()&&this.previewName()===this.resolveMetaName(i.meta))this.closePreview();this.emitChangeActions();this.ngxViewBuilderApiService.notifyFileUploadFileRemoved({elementName:this.model().name,elementDataPath:this.model().dataPath,element:this.model(),files:t.map(o=>o.meta),removedFile:i.meta,removedIndex:e})}async downloadFileAsync(e){const t=await this.resolveEntryResource(e);if(!t)return;this.downloadResource(t)}async previewFileAsync(e){const t=this.resolvePreviewKind(e.meta);if(!this.model().showPreview||!t){await this.downloadFileAsync(e);return}const i=await this.resolveEntryResource(e);if(!i)return;this.openPreview(t,i)}async resolveEntryResource(e){const t=this.resolveMetaKey(e.meta);if(t){const i=await this.fetchRemoteEntryResource(e,t);if(i)return i}if(e.localFile)return this.createResourceFromBlob(e.localFile,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta)||e.localFile.type);if(e.meta.base64){const i=this.decodeBase64(e.meta.base64,this.resolveMetaType(e.meta));if(i)return this.createResourceFromBlob(i,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta))}if(e.meta.raw){const i=await this.resolveResourceFromUnknown(e.meta.raw,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta));if(i)return i}return null}async fetchRemoteEntryResource(e,t){const i=String(this.model().downloadDataSourceName??"").trim();if(!i)return null;const n=this.dataSourceService.getSource(i);if(!n)return null;const r=this.buildRuntimeContext(e.meta,t,e.localFile??void 0);const o=this.resolveSourceMethod(n,"GET");const a=this.resolveSourceUrl(n,r);if(!a)return null;this.requestInFlight.set(true);try{const l=o==="GET"?void 0:this.resolveSourcePayload(n,r,{[this.model().fileKeyField]:t});const d=await b(this.dataSourceService.request(o,a,l,{responseType:"blob",observeResponse:true}));return await this.resolveHttpDownloadResponse(d,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta))}catch{return null}finally{this.requestInFlight.set(false)}}async uploadFileIfNeeded(e){const t=String(this.model().uploadDataSourceName??"").trim();if(!t)return this.createLocalMeta(e);const i=this.dataSourceService.getSource(t);if(!i)return this.createLocalMeta(e);const n=this.buildRuntimeContext(this.createLocalMeta(e),void 0,e);const r=this.resolveSourceMethod(i,"POST");const o=this.resolveSourceUrl(i,n);if(!o)return this.createLocalMeta(e);const a=new FormData;const l=String(this.model().uploadFormFieldName??"file").trim()||"file";a.append(l,e,e.name);const d=await b(this.dataSourceService.request(r,o,a));const s=this.extractFirstRecord(d);if(s)return this.createMetaFromRecord(s,e);return this.createLocalMeta(e)}async deleteFileFromServer(e,t,i){const n=this.dataSourceService.getSource(t);if(!n)return false;const r=this.buildRuntimeContext(e,i);const o=this.resolveSourceMethod(n,"DELETE");const a=this.resolveSourceUrl(n,r);if(!a)return false;const l=o==="GET"?void 0:this.resolveSourcePayload(n,r,{[this.model().fileKeyField]:i,fileKey:i,filKey:i,key:i,fil_key:i,id:i,fileId:i,uuid:i});this.requestInFlight.set(true);try{await b(this.dataSourceService.request(o,a,l));return true}catch{return false}finally{this.requestInFlight.set(false)}}normalizeFiles(e,t=0){if(!Array.isArray(e)||e.length===0)return[];const i=Number(this.model()?.maxFiles??1);const n=Number.isFinite(i)&&i>0?Math.floor(i):1;if(!this.model().multiple)return this.filterByMaxFileSize([e[0]]);const r=Math.max(0,Math.floor(Number(t)||0));const o=Math.max(0,n-r);if(o<=0)return[];return this.filterByMaxFileSize(e).slice(0,o)}filterByMaxFileSize(e){const t=Number(this.model()["maxFileSizeMb"]);if(!Number.isFinite(t)||t<=0)return e;const i=t*1024*1024;return e.filter(n=>Number(n?.size??0)<=i)}commitPreviewEntries(e){const t=[...e];this.previewItems.set(t);this.model().setFiles(t.map(i=>i.meta))}updatePreviewEntry(e,t){let i=false;const n=this.previewItems().map(r=>{if(r.id!==e)return r;i=true;return t(r)});if(!i)return false;this.commitPreviewEntries(n);return true}syncPreviewFromModelValue(){const e=this.extractRecords(this.model().value);if(e.length===0){this.previewItems.set([]);return}this.previewItems.set(e.map((t,i)=>this.createPreviewEntry(this.createMetaFromRecord(t),null,"ready","",`saved-${i}`)))}createPreviewEntry(e,t,i,n,r){return{id:r,meta:e,iconName:this.resolveFileTypeIcon(e),status:i,localFile:t,errorMessage:n}}createLocalMeta(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}createMetaFromRecord(e,t){const i=this.readRecordString(e,[this.model().fileNameField,"name","fileName","fil_name"])||t?.name||"file";const n=this.readRecordString(e,[this.model().fileTypeField,"type","contentType","mimeType","fil_content_type"])||t?.type||"";const r=this.readRecordNumber(e,[this.model().fileSizeField,"size","fil_size"])??Number(t?.size??0);const o=this.readRecordString(e,[this.model().fileKeyField,"fileKey","filKey","key","fil_key","id","fileId","uuid"])||void 0;const a=this.readRecordNumber(e,["lastModified"])??Number(t?.lastModified??0);const l=typeof e["base64"]==="string"?e["base64"].trim():"";return{name:i,type:n,size:Number.isFinite(r)&&r>=0?r:0,lastModified:Number.isFinite(a)&&a>=0?a:0,fileKey:o,...l?{base64:l}:{},raw:{...e}}}resolveFileTypeIcon(e){const t=String(e?.type??"").trim().toLowerCase();const i=this.resolveFileExtension(e?.name);if(t.startsWith("image/")||["jpg","jpeg","png","gif","webp","bmp","svg"].includes(i))return"image";if(t.includes("pdf")||i==="pdf")return"picture_as_pdf";if(t.includes("spreadsheet")||t.includes("excel")||t.includes("csv")||["csv","xls","xlsx","ods"].includes(i))return"table_view";if(t.includes("word")||t.includes("opendocument.text")||["doc","docx","rtf","odt"].includes(i))return"draft";if(t.startsWith("video/")||["mp4","mov","avi","mkv","webm"].includes(i))return"smart_display";if(t.includes("html")||t.includes("xml")||t.includes("json")||t.includes("javascript")||t.includes("typescript")||t.includes("css")||t.includes("text/")||["txt","json","xml","html","htm","js","ts","css","md","yml","yaml"].includes(i))return"html";if(t.includes("zip")||t.includes("compressed")||["zip","rar","7z","tar","gz"].includes(i))return"extension";return"description"}resolvePreviewKind(e){const t=String(e?.type??"").trim().toLowerCase();const i=this.resolveFileExtension(e?.name);if(t.startsWith("image/")||["jpg","jpeg","png","gif","webp","bmp","svg"].includes(i))return"image";if(t.includes("pdf")||i==="pdf")return"pdf";return null}resolveFileExtension(e){const t=String(e??"").trim().toLowerCase();if(!t)return"";const i=t.lastIndexOf(".");if(i<0||i===t.length-1)return"";return t.slice(i+1)}resolveMetaKey(e){const t=String(e?.fileKey??"").trim();if(t)return t;if(!e?.raw||typeof e.raw!=="object")return"";return this.readRecordString(e.raw,[this.model().fileKeyField,"fileKey","filKey","key","fil_key","id","fileId","uuid"])}resolveMetaName(e){return String(e?.name??"").trim()||"file"}resolveMetaType(e){return String(e?.type??"").trim()||"application/octet-stream"}buildRuntimeContext(e,t,i){const n={value:this.model().value,files:this.model().value,file:i,fileMeta:e?.raw??e,fileRow:e?.raw??e,fileName:this.resolveMetaName(e),fileType:this.resolveMetaType(e),fileSize:Number(e?.size??0),item:e?.raw??e,row:e?.raw??e};if(t){n[this.model().fileKeyField]=t;n["fileKey"]=t;n["filKey"]=t;n["fil_key"]=t;n["key"]=t;n["id"]=t;n["fileId"]=t;n["uuid"]=t}const r=String(this.model().name??"").trim();if(r)n[r]=this.model().value;return n}resolveSourceMethod(e,t){return String(e?.params?.["method"]??t).trim().toUpperCase()||t}resolveSourceUrl(e,t){const i=String(e?.params?.["url"]??"").trim();if(!i)return"";return i.replace(/\{([^}]+)\}/g,(n,r)=>{const o=this.resolveContextValue(String(r??"").trim(),t);return encodeURIComponent(this.serializeForUrl(o))})}resolveSourcePayload(e,t,i){const n=e?.params?.["body"]??e?.params?.["payload"];if(n===null||n===void 0)return i;const r=this.normalizePayloadTemplate(n);if(r===void 0)return i;return this.replacePayloadPlaceholders(r,t)}normalizePayloadTemplate(e){if(typeof e!=="string")return e;const t=e.trim();if(!t)return;if(/^\{[^{}]+\}$/.test(t))return t;if(!t.startsWith("{")&&!t.startsWith("["))return e;try{return JSON.parse(t)}catch{return e}}replacePayloadPlaceholders(e,t){if(typeof e==="string"){const i=e.match(/^\{([^}]+)\}$/);if(i){const n=String(i[1]??"").trim();return this.resolveContextValue(n,t)}return e.replace(/\{([^}]+)\}/g,(n,r)=>{const o=this.resolveContextValue(String(r??"").trim(),t);return this.serializeForUrl(o)})}if(Array.isArray(e))return e.map(i=>this.replacePayloadPlaceholders(i,t));if(e&&typeof e==="object"){const i=e;const n={};Object.keys(i).forEach(r=>{n[r]=this.replacePayloadPlaceholders(i[r],t)});return n}return e}resolveContextValue(e,t){const i=String(e??"").trim().replace(/^\{/,"").replace(/\}$/,"");if(!i)return;const n=B(t,i);if(n!==void 0)return n;return this.dataService.getValue(i)}serializeForUrl(e){if(Array.isArray(e))return e.length>0?String(e[0]??""):"";if(e===null||e===void 0)return"";return String(e)}extractFirstRecord(e){const t=this.extractRecords(e);return t.length>0?t[0]:null}extractRecords(e,t=0){if(t>4||e===null||e===void 0)return[];if(Array.isArray(e))return e.filter(r=>r&&typeof r==="object"&&!Array.isArray(r)).map(r=>r);if(!e||typeof e!=="object")return[];const i=e;const n=Object.keys(i).filter(r=>/^\d+$/.test(r));if(n.length>0)return n.sort((r,o)=>Number(r)-Number(o)).map(r=>i[r]).filter(r=>r&&typeof r==="object"&&!Array.isArray(r)).map(r=>r);for(const r of["data","items","rows","result","value"]){if(i[r]===void 0)continue;const o=this.extractRecords(i[r],t+1);if(o.length>0)return o}return[i]}readRecordString(e,t){for(const i of t){const n=String(i??"").trim();if(!n)continue;const r=e[n];if(r===null||r===void 0)continue;const o=String(r).trim();if(o)return o}return""}readRecordNumber(e,t){for(const i of t){const n=String(i??"").trim();if(!n)continue;const r=e[n];if(r===null||r===void 0||r==="")continue;const o=Number(r);if(Number.isFinite(o))return o}return null}async resolveHttpDownloadResponse(e,t,i){const n=e.body;if(!(n instanceof Blob))return null;const r=e.headers.get("content-type");const o=e.headers.get("content-disposition");const a=String(r||n.type||i||"application/octet-stream");const l=this.parseContentDispositionFileName(o)||t||"file";if(this.shouldUseBlobAsFile(a,o))return this.createResourceFromBlob(n,l,a);const d=await n.text();const s=this.parseStructuredDownloadPayload(d);const v=await this.resolveResourceFromUnknown(s,l,a);if(v)return v;return this.createResourceFromBlob(n,l,a)}shouldUseBlobAsFile(e,t){const i=String(e??"").trim().toLowerCase();if(String(t??"").trim().toLowerCase().includes("attachment"))return true;if(!i)return true;if(i.startsWith("image/")||i.includes("pdf")||i.includes("octet-stream")||i.includes("zip")||i.includes("excel")||i.includes("spreadsheet")||i.includes("msword")||i.includes("officedocument"))return true;return!(i.includes("json")||i.startsWith("text/")||i.includes("javascript")||i.includes("xml"))}parseStructuredDownloadPayload(e){const t=String(e??"").trim();if(!t)return null;if(t.startsWith("{")&&t.endsWith("}")||t.startsWith("[")&&t.endsWith("]"))try{return JSON.parse(t)}catch{return t}return t}async resolveResourceFromUnknown(e,t,i){if(e===null||e===void 0)return null;if(e instanceof Blob)return this.createResourceFromBlob(e,t,e.type||i);if(e instanceof ArrayBuffer)return this.createResourceFromBlob(new Blob([e],{type:i}),t,i);if(e instanceof Uint8Array)return this.createResourceFromBlob(new Blob([e.slice()],{type:i}),t,i);if(typeof e==="string")return await this.resolveResourceFromString(e,t,i);if(typeof e==="object"){const n=e;const r=this.readRecordString(n,["fileName","name",this.model().fileNameField])||t;const o=this.readRecordString(n,["contentType","type",this.model().fileTypeField])||i;const a=this.markupSecurityService.sanitizeFileUrl(this.readRecordString(n,["url","downloadUrl","href","src","previewUrl"])||"");if(a)return{fileName:r||t||"file",contentType:o||i||"application/octet-stream",sourceUrl:a,revokeOnDispose:false};const l=n["content"]??n["data"]??n["base64"]??n["blob"]??n["file"]??n["result"]??null;if(l!==null&&l!==void 0&&l!==e)return this.resolveResourceFromUnknown(l,r,o)}return null}async resolveResourceFromString(e,t,i){const n=String(e??"").trim();if(!n)return null;if(/^(https?:|blob:|data:)/i.test(n)){const a=this.markupSecurityService.sanitizeFileUrl(n);if(!a)return null;return{fileName:t||"file",contentType:i||this.resolveContentTypeFromUrl(a),sourceUrl:a,revokeOnDispose:false}}const r=this.parseStructuredDownloadPayload(n);if(r!==n)return this.resolveResourceFromUnknown(r,t,i);const o=this.createBlobFromBase64(n,i);if(o)return this.createResourceFromBlob(o,t,i||o.type);return this.createResourceFromBlob(new Blob([n],{type:i||"text/plain;charset=utf-8"}),t,i||"text/plain;charset=utf-8")}decodeBase64(e,t){try{const i=String(e??"");const n=atob(i.slice(i.indexOf(",")+1).replace(/\s+/g,""));const r=new Uint8Array(n.length);for(let o=0;o<n.length;o+=1)r[o]=n.charCodeAt(o);return new Blob([r],{type:t||"application/octet-stream"})}catch{return null}}createBlobFromBase64(e,t){const i=String(e??"").replace(/\s+/g,"");if(!this.isProbableBase64(i))return null;try{const n=atob(i);const r=new Uint8Array(n.length);for(let o=0;o<n.length;o+=1)r[o]=n.charCodeAt(o);return new Blob([r],{type:t||"application/octet-stream"})}catch{return null}}isProbableBase64(e){if(!e||e.length<16||e.length%4!==0)return false;return/^[A-Za-z0-9+/]+={0,2}$/.test(e)}resolveContentTypeFromUrl(e){const t=String(e??"").trim();if(t.startsWith("data:")){const i=t.match(/^data:([^;,]+)[;,]/i);if(i?.[1])return i[1]}return"application/octet-stream"}createResourceFromBlob(e,t,i){const n=String(i||e.type||"").trim();const r=/html|xml|svg|javascript|ecmascript/i.test(n)?"application/octet-stream":n||"application/octet-stream";const o=e.type===r?e:new Blob([e],{type:r});const a=URL.createObjectURL(o);return{fileName:t||"file",contentType:r,sourceUrl:a,revokeOnDispose:true}}openPreview(e,t){const i=this.markupSecurityService.sanitizeFileUrl(t.sourceUrl);if(!i)return;t={...t,sourceUrl:i};this.closePreview();this.previewKind.set(e);this.previewName.set(t.fileName);this.previewUrl.set(t.sourceUrl);this.previewFrameUrl.set(e==="pdf"?this.sanitizer.bypassSecurityTrustResourceUrl(t.sourceUrl):null);this.previewOpen.set(true);this.activePreviewResource=t;if(t.revokeOnDispose)this.previewObjectUrl=t.sourceUrl}downloadPreview(e){e.preventDefault();e.stopPropagation();if(!this.activePreviewResource)return;this.downloadResource(this.activePreviewResource)}downloadResource(e){this.triggerLinkDownload(e.sourceUrl,e.fileName);if(e.revokeOnDispose)setTimeout(()=>{URL.revokeObjectURL(e.sourceUrl)},1e3)}parseContentDispositionFileName(e){const t=String(e??"").trim();if(!t)return"";const i=t.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);if(i?.[1])try{return decodeURIComponent(i[1].trim().replace(/^"|"$/g,""))}catch{return i[1].trim().replace(/^"|"$/g,"")}const n=t.match(/filename\s*=\s*("?)([^";]+)\1/i);return String(n?.[2]??"").trim()}triggerLinkDownload(e,t){const i=this.markupSecurityService.sanitizeFileUrl(e);if(!i)return;const n=document.createElement("a");n.href=i;n.download=t||"file";n.target="_blank";n.rel="noopener";document.body.appendChild(n);n.click();document.body.removeChild(n)}emitChangeActions(){const e={value:this.model().value,files:this.model().value,item:null,row:null};const t=String(this.model().name??"").trim();if(t)e[t]=this.model().value;this.elementActionService.runActions(this.model(),this.model().events??[],"change",e)}isInteractionLocked(){const e=this.model();if(!e)return false;if(this.requestInFlight())return true;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:g,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:g,isStandalone:true,selector:"file-upload-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},viewQueries:[{propertyName:"fileInput",first:true,predicate:["fileInput"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <section class=\"nvb-file-upload-wrap\" [attr.data-testid]=\"tid('root')\">\n    <input\n      #fileInput\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"file\"\n      [accept]=\"model().accept\"\n      [multiple]=\"model().multiple\"\n      hidden\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\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      (click)=\"$event.stopPropagation()\"\n      (change)=\"onFileInputChange($event)\"\n    />\n\n    <div\n      class=\"nvb-file-upload\"\n      [ngClass]=\"{\n        'nvb-file-upload--drag-over': isDragOver(),\n        'nvb-file-upload--compact': resolveDisplayMode() === 'compact',\n        'nvb-file-upload--modern': resolveDisplayMode() === 'modern',\n        'nvb-file-upload--grid': resolveDisplayMode() === 'grid',\n      }\"\n      (click)=\"openPicker()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : (model().dropzoneText | dynamicText: model())\n      \"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\n      [attr.data-testid]=\"tid('dropzone')\"\n      (keydown.enter)=\"openPicker()\"\n      (keydown.space)=\"openPicker(); $event.preventDefault()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <span class=\"material-symbols-outlined nvb-file-upload__icon\">upload_file</span>\n      <p class=\"nvb-file-upload__label\">{{ model().dropzoneText | dynamicText: model() }}</p>\n\n      @if (model().accept) {\n        <p class=\"nvb-file-upload__accept\">{{ model().accept }}</p>\n      }\n      <span [id]=\"fieldWrapper.partId('dropzone-hint')\" class=\"nvb-sr-only\">\n        {{ 'files.dropzoneHint' | uiT: 'Drag files here or press Enter to choose files.' }}\n      </span>\n    </div>\n\n    @if (previewItems().length > 0) {\n      <ul\n        class=\"nvb-file-upload__list\"\n        [ngClass]=\"{\n          'nvb-file-upload__list--compact': resolveDisplayMode() === 'compact',\n          'nvb-file-upload__list--modern': resolveDisplayMode() === 'modern',\n          'nvb-file-upload__list--grid': resolveDisplayMode() === 'grid',\n        }\"\n      >\n        @for (entry of previewItems(); track entry.id; let itemIndex = $index) {\n          <li\n            [ngClass]=\"{\n              'nvb-file-upload__list-item--pending': entry.status === 'pending',\n              'nvb-file-upload__list-item--error': entry.status === 'error',\n            }\"\n          >\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__entry-main\"\n              [class.nvb-file-upload__entry-main--interactive]=\"canOpenEntry(entry)\"\n              [disabled]=\"!canOpenEntry(entry)\"\n              [attr.aria-label]=\"entry.meta.name\"\n              [attr.data-testid]=\"tid('entry', itemIndex)\"\n              (click)=\"onEntryActivate(entry, $event)\"\n            >\n              <div class=\"nvb-file-upload__thumb\" [attr.data-file-icon]=\"entry.iconName\">\n                <span class=\"material-symbols-outlined\">{{ entry.iconName }}</span>\n              </div>\n\n              <div class=\"nvb-file-upload__entry-content\">\n                <p class=\"nvb-file-upload__entry-name\">{{ entry.meta.name }}</p>\n                <p class=\"nvb-file-upload__entry-meta\">\n                  {{ entry.meta.type || ('files.unknownType' | uiT: 'unknown') }}\n                  <span>&bull;</span>\n                  {{ formatSize(entry.meta.size) }}\n                </p>\n\n                @if (resolveStatusText(entry); as statusText) {\n                  @if (statusText) {\n                    <p class=\"nvb-file-upload__entry-status\">{{ statusText | uiT: statusText }}</p>\n                  }\n                }\n              </div>\n            </button>\n\n            <div class=\"nvb-file-upload__entry-actions\">\n              @if (canPreviewEntry(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"previewFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.preview' | uiT: 'Preview'\"\n                  [attr.data-testid]=\"tid('preview', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">visibility</span>\n                </button>\n              }\n\n              @if (canDownload(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"downloadFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n                  [attr.data-testid]=\"tid('download', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">download</span>\n                </button>\n              }\n\n              <button\n                type=\"button\"\n                class=\"nvb-file-upload__remove\"\n                [disabled]=\"requestInFlight()\"\n                (click)=\"removeFile(itemIndex, $event)\"\n                [attr.aria-label]=\"'files.remove' | uiT: 'Remove'\"\n                [attr.data-testid]=\"tid('remove', itemIndex)\"\n              >\n                <span class=\"material-symbols-outlined\">close</span>\n              </button>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </section>\n\n  @if (previewOpen()) {\n    <div\n      class=\"nvb-file-upload__preview-backdrop\"\n      [attr.data-testid]=\"tid('preview-backdrop')\"\n      (click)=\"closePreview()\"\n    >\n      <div\n        class=\"nvb-file-upload__preview-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"file-upload-preview-title\"\n        [attr.data-testid]=\"tid('preview-dialog')\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-file-upload__preview-header\">\n          <p class=\"nvb-file-upload__preview-title\" id=\"file-upload-preview-title\">\n            {{ previewName() }}\n          </p>\n          <div class=\"nvb-file-upload__preview-header-actions\">\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-action\"\n              (click)=\"downloadPreview($event)\"\n              [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n              [attr.data-testid]=\"tid('preview-download')\"\n            >\n              <span class=\"material-symbols-outlined\">download</span>\n              <span>{{ 'files.download' | uiT: 'Download' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-close\"\n              (click)=\"closePreview($event)\"\n              [attr.aria-label]=\"'files.closePreview' | uiT: 'Close preview'\"\n              [attr.data-testid]=\"tid('preview-close')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"nvb-file-upload__preview-body\">\n          @if (previewKind() === 'image') {\n            <img [src]=\"previewUrl()\" [alt]=\"previewName()\" />\n          } @else if (previewKind() === 'pdf') {\n            <iframe [src]=\"previewFrameUrl()\" [attr.title]=\"previewName()\"></iframe>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-file-upload-wrap{width:100%;display:grid;gap:10px}.nvb-file-upload{border:1px dashed var(--nvb-color-neutral-400);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-050);min-height:110px;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;cursor:pointer;padding:14px;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.nvb-file-upload:hover,.nvb-file-upload--drag-over{border-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white))}.nvb-file-upload--compact{min-height:88px;padding:10px}.nvb-file-upload--modern{box-shadow:var(--nvb-card-shadow)}.nvb-file-upload--grid{min-height:124px}.nvb-file-upload__icon{font-size:26px;color:var(--nvb-color-primary-600)}.nvb-file-upload__label{margin:0;font-size:13px;color:var(--nvb-color-neutral-700);line-height:1.4;white-space:pre-wrap}.nvb-file-upload__accept{margin:0;font-size:11px;color:var(--nvb-color-neutral-500);line-height:1.35;word-break:break-word}.nvb-file-upload__list{list-style:none;margin:0;padding:0}.nvb-file-upload__list--compact,.nvb-file-upload__list--modern{display:grid;gap:8px}.nvb-file-upload__list--grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.nvb-file-upload__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);padding:8px 10px}.nvb-file-upload__list--grid li{min-height:148px;align-items:stretch;flex-direction:column;justify-content:space-between}.nvb-file-upload__list-item--pending{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-neutral-300))}.nvb-file-upload__list-item--error{border-color:color-mix(in oklab,var(--nvb-color-danger-500, #dc2626) 35%,var(--nvb-color-neutral-300))}.nvb-file-upload__entry-main{border:none;background:transparent;padding:0;display:flex;align-items:center;gap:10px;min-width:0;text-align:left;width:100%}.nvb-file-upload__entry-main:disabled{cursor:default}.nvb-file-upload__entry-main--interactive{cursor:pointer}.nvb-file-upload__list--grid .nvb-file-upload__entry-main{flex-direction:column;align-items:flex-start}.nvb-file-upload__thumb{width:40px;height:40px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__thumb{width:48px;height:48px}.nvb-file-upload__thumb span.material-symbols-outlined{font-size:22px;color:var(--nvb-color-neutral-600)}.nvb-file-upload__entry-content{min-width:0;display:grid;gap:3px}.nvb-file-upload__entry-name,.nvb-file-upload__entry-meta,.nvb-file-upload__entry-status,.nvb-file-upload__preview-title{margin:0;line-height:1.35}.nvb-file-upload__entry-name{font-size:12px;color:var(--nvb-color-neutral-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}.nvb-file-upload__list--grid .nvb-file-upload__entry-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}.nvb-file-upload__entry-meta{font-size:11px;color:var(--nvb-color-neutral-500);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.nvb-file-upload__entry-status{font-size:11px;color:var(--nvb-color-primary-600)}.nvb-file-upload__list-item--error .nvb-file-upload__entry-status{color:var(--nvb-color-danger-600, #b91c1c)}.nvb-file-upload__entry-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__entry-actions{width:100%;justify-content:flex-end}.nvb-file-upload__icon-action,.nvb-file-upload__remove,.nvb-file-upload__preview-close{border:1px solid transparent;background:transparent;color:var(--nvb-color-neutral-500);width:32px;height:32px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.nvb-file-upload__icon-action:hover,.nvb-file-upload__remove:hover,.nvb-file-upload__preview-close:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-file-upload__icon-action:focus-visible,.nvb-file-upload__remove:focus-visible,.nvb-file-upload__preview-close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-file-upload__icon-action:disabled,.nvb-file-upload__remove:disabled{cursor:not-allowed;opacity:.55}.nvb-file-upload__icon-action span,.nvb-file-upload__remove span,.nvb-file-upload__preview-close span{font-size:18px}.nvb-file-upload__preview-backdrop{position:fixed;inset:0;z-index:1000;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:20px}.nvb-file-upload__preview-dialog{width:min(1440px,100%);max-width:100%;max-height:calc(100vh - 32px);min-height:min(88vh,960px);background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:var(--nvb-shadow-16);outline:0}.nvb-file-upload__preview-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-file-upload__preview-title{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-file-upload__preview-header-actions{display:inline-flex;align-items:center;gap:8px}.nvb-file-upload__preview-action{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);min-height:32px;border-radius:var(--nvb-button-radius);padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-file-upload__preview-action:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-file-upload__preview-action span.material-symbols-outlined{font-size:18px}.nvb-file-upload__preview-body{min-height:0;overflow:auto;background:#0f172a;padding:12px;display:flex;align-items:center;justify-content:center}.nvb-file-upload__preview-body img{display:block;max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;height:auto;margin:0 auto}.nvb-file-upload__preview-body iframe{display:block;width:100%;min-height:calc(100vh - 140px);border:none;background:var(--nvb-color-neutral-000)}\n"],dependencies:[{kind:"component",type:_,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:x,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:y,name:"dynamicText"},{kind:"pipe",type:w,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:h,decorators:[{type:U,args:[{selector:"file-upload-element",changeDetection:R.OnPush,imports:[_,x,y,w],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <section class=\"nvb-file-upload-wrap\" [attr.data-testid]=\"tid('root')\">\n    <input\n      #fileInput\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"file\"\n      [accept]=\"model().accept\"\n      [multiple]=\"model().multiple\"\n      hidden\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\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      (click)=\"$event.stopPropagation()\"\n      (change)=\"onFileInputChange($event)\"\n    />\n\n    <div\n      class=\"nvb-file-upload\"\n      [ngClass]=\"{\n        'nvb-file-upload--drag-over': isDragOver(),\n        'nvb-file-upload--compact': resolveDisplayMode() === 'compact',\n        'nvb-file-upload--modern': resolveDisplayMode() === 'modern',\n        'nvb-file-upload--grid': resolveDisplayMode() === 'grid',\n      }\"\n      (click)=\"openPicker()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : (model().dropzoneText | dynamicText: model())\n      \"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\n      [attr.data-testid]=\"tid('dropzone')\"\n      (keydown.enter)=\"openPicker()\"\n      (keydown.space)=\"openPicker(); $event.preventDefault()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <span class=\"material-symbols-outlined nvb-file-upload__icon\">upload_file</span>\n      <p class=\"nvb-file-upload__label\">{{ model().dropzoneText | dynamicText: model() }}</p>\n\n      @if (model().accept) {\n        <p class=\"nvb-file-upload__accept\">{{ model().accept }}</p>\n      }\n      <span [id]=\"fieldWrapper.partId('dropzone-hint')\" class=\"nvb-sr-only\">\n        {{ 'files.dropzoneHint' | uiT: 'Drag files here or press Enter to choose files.' }}\n      </span>\n    </div>\n\n    @if (previewItems().length > 0) {\n      <ul\n        class=\"nvb-file-upload__list\"\n        [ngClass]=\"{\n          'nvb-file-upload__list--compact': resolveDisplayMode() === 'compact',\n          'nvb-file-upload__list--modern': resolveDisplayMode() === 'modern',\n          'nvb-file-upload__list--grid': resolveDisplayMode() === 'grid',\n        }\"\n      >\n        @for (entry of previewItems(); track entry.id; let itemIndex = $index) {\n          <li\n            [ngClass]=\"{\n              'nvb-file-upload__list-item--pending': entry.status === 'pending',\n              'nvb-file-upload__list-item--error': entry.status === 'error',\n            }\"\n          >\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__entry-main\"\n              [class.nvb-file-upload__entry-main--interactive]=\"canOpenEntry(entry)\"\n              [disabled]=\"!canOpenEntry(entry)\"\n              [attr.aria-label]=\"entry.meta.name\"\n              [attr.data-testid]=\"tid('entry', itemIndex)\"\n              (click)=\"onEntryActivate(entry, $event)\"\n            >\n              <div class=\"nvb-file-upload__thumb\" [attr.data-file-icon]=\"entry.iconName\">\n                <span class=\"material-symbols-outlined\">{{ entry.iconName }}</span>\n              </div>\n\n              <div class=\"nvb-file-upload__entry-content\">\n                <p class=\"nvb-file-upload__entry-name\">{{ entry.meta.name }}</p>\n                <p class=\"nvb-file-upload__entry-meta\">\n                  {{ entry.meta.type || ('files.unknownType' | uiT: 'unknown') }}\n                  <span>&bull;</span>\n                  {{ formatSize(entry.meta.size) }}\n                </p>\n\n                @if (resolveStatusText(entry); as statusText) {\n                  @if (statusText) {\n                    <p class=\"nvb-file-upload__entry-status\">{{ statusText | uiT: statusText }}</p>\n                  }\n                }\n              </div>\n            </button>\n\n            <div class=\"nvb-file-upload__entry-actions\">\n              @if (canPreviewEntry(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"previewFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.preview' | uiT: 'Preview'\"\n                  [attr.data-testid]=\"tid('preview', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">visibility</span>\n                </button>\n              }\n\n              @if (canDownload(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"downloadFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n                  [attr.data-testid]=\"tid('download', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">download</span>\n                </button>\n              }\n\n              <button\n                type=\"button\"\n                class=\"nvb-file-upload__remove\"\n                [disabled]=\"requestInFlight()\"\n                (click)=\"removeFile(itemIndex, $event)\"\n                [attr.aria-label]=\"'files.remove' | uiT: 'Remove'\"\n                [attr.data-testid]=\"tid('remove', itemIndex)\"\n              >\n                <span class=\"material-symbols-outlined\">close</span>\n              </button>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </section>\n\n  @if (previewOpen()) {\n    <div\n      class=\"nvb-file-upload__preview-backdrop\"\n      [attr.data-testid]=\"tid('preview-backdrop')\"\n      (click)=\"closePreview()\"\n    >\n      <div\n        class=\"nvb-file-upload__preview-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"file-upload-preview-title\"\n        [attr.data-testid]=\"tid('preview-dialog')\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-file-upload__preview-header\">\n          <p class=\"nvb-file-upload__preview-title\" id=\"file-upload-preview-title\">\n            {{ previewName() }}\n          </p>\n          <div class=\"nvb-file-upload__preview-header-actions\">\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-action\"\n              (click)=\"downloadPreview($event)\"\n              [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n              [attr.data-testid]=\"tid('preview-download')\"\n            >\n              <span class=\"material-symbols-outlined\">download</span>\n              <span>{{ 'files.download' | uiT: 'Download' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-close\"\n              (click)=\"closePreview($event)\"\n              [attr.aria-label]=\"'files.closePreview' | uiT: 'Close preview'\"\n              [attr.data-testid]=\"tid('preview-close')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"nvb-file-upload__preview-body\">\n          @if (previewKind() === 'image') {\n            <img [src]=\"previewUrl()\" [alt]=\"previewName()\" />\n          } @else if (previewKind() === 'pdf') {\n            <iframe [src]=\"previewFrameUrl()\" [attr.title]=\"previewName()\"></iframe>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-file-upload-wrap{width:100%;display:grid;gap:10px}.nvb-file-upload{border:1px dashed var(--nvb-color-neutral-400);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-050);min-height:110px;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;cursor:pointer;padding:14px;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.nvb-file-upload:hover,.nvb-file-upload--drag-over{border-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white))}.nvb-file-upload--compact{min-height:88px;padding:10px}.nvb-file-upload--modern{box-shadow:var(--nvb-card-shadow)}.nvb-file-upload--grid{min-height:124px}.nvb-file-upload__icon{font-size:26px;color:var(--nvb-color-primary-600)}.nvb-file-upload__label{margin:0;font-size:13px;color:var(--nvb-color-neutral-700);line-height:1.4;white-space:pre-wrap}.nvb-file-upload__accept{margin:0;font-size:11px;color:var(--nvb-color-neutral-500);line-height:1.35;word-break:break-word}.nvb-file-upload__list{list-style:none;margin:0;padding:0}.nvb-file-upload__list--compact,.nvb-file-upload__list--modern{display:grid;gap:8px}.nvb-file-upload__list--grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.nvb-file-upload__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);padding:8px 10px}.nvb-file-upload__list--grid li{min-height:148px;align-items:stretch;flex-direction:column;justify-content:space-between}.nvb-file-upload__list-item--pending{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-neutral-300))}.nvb-file-upload__list-item--error{border-color:color-mix(in oklab,var(--nvb-color-danger-500, #dc2626) 35%,var(--nvb-color-neutral-300))}.nvb-file-upload__entry-main{border:none;background:transparent;padding:0;display:flex;align-items:center;gap:10px;min-width:0;text-align:left;width:100%}.nvb-file-upload__entry-main:disabled{cursor:default}.nvb-file-upload__entry-main--interactive{cursor:pointer}.nvb-file-upload__list--grid .nvb-file-upload__entry-main{flex-direction:column;align-items:flex-start}.nvb-file-upload__thumb{width:40px;height:40px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__thumb{width:48px;height:48px}.nvb-file-upload__thumb span.material-symbols-outlined{font-size:22px;color:var(--nvb-color-neutral-600)}.nvb-file-upload__entry-content{min-width:0;display:grid;gap:3px}.nvb-file-upload__entry-name,.nvb-file-upload__entry-meta,.nvb-file-upload__entry-status,.nvb-file-upload__preview-title{margin:0;line-height:1.35}.nvb-file-upload__entry-name{font-size:12px;color:var(--nvb-color-neutral-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}.nvb-file-upload__list--grid .nvb-file-upload__entry-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}.nvb-file-upload__entry-meta{font-size:11px;color:var(--nvb-color-neutral-500);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.nvb-file-upload__entry-status{font-size:11px;color:var(--nvb-color-primary-600)}.nvb-file-upload__list-item--error .nvb-file-upload__entry-status{color:var(--nvb-color-danger-600, #b91c1c)}.nvb-file-upload__entry-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__entry-actions{width:100%;justify-content:flex-end}.nvb-file-upload__icon-action,.nvb-file-upload__remove,.nvb-file-upload__preview-close{border:1px solid transparent;background:transparent;color:var(--nvb-color-neutral-500);width:32px;height:32px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.nvb-file-upload__icon-action:hover,.nvb-file-upload__remove:hover,.nvb-file-upload__preview-close:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-file-upload__icon-action:focus-visible,.nvb-file-upload__remove:focus-visible,.nvb-file-upload__preview-close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-file-upload__icon-action:disabled,.nvb-file-upload__remove:disabled{cursor:not-allowed;opacity:.55}.nvb-file-upload__icon-action span,.nvb-file-upload__remove span,.nvb-file-upload__preview-close span{font-size:18px}.nvb-file-upload__preview-backdrop{position:fixed;inset:0;z-index:1000;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:20px}.nvb-file-upload__preview-dialog{width:min(1440px,100%);max-width:100%;max-height:calc(100vh - 32px);min-height:min(88vh,960px);background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:var(--nvb-shadow-16);outline:0}.nvb-file-upload__preview-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-file-upload__preview-title{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-file-upload__preview-header-actions{display:inline-flex;align-items:center;gap:8px}.nvb-file-upload__preview-action{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);min-height:32px;border-radius:var(--nvb-button-radius);padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-file-upload__preview-action:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-file-upload__preview-action span.material-symbols-outlined{font-size:18px}.nvb-file-upload__preview-body{min-height:0;overflow:auto;background:#0f172a;padding:12px;display:flex;align-items:center;justify-content:center}.nvb-file-upload__preview-body img{display:block;max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;height:auto;margin:0 auto}.nvb-file-upload__preview-body iframe{display:block;width:100%;min-height:calc(100vh - 140px);border:none;background:var(--nvb-color-neutral-000)}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],fileInput:[{type:C,args:["fileInput"]}]}});export{O as n,h as t};
+import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as k,l as I,ln as P,n as y,r as w}from"./ngxviewbuilder-runtime-mark-for-check-on-property-change-WxfEoWah.mjs";import{Z as D,lt as M,t as z}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-BYA8UfCA.mjs";import{r as N,t as _}from"./ngxviewbuilder-runtime-element-wrapper-EBaWVZvf.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as R,ChangeDetectorRef as T,Component as U,ViewChild as C,inject as c,input as E,signal as u}from"@angular/core";import{NgClass as x}from"@angular/common";import{get as B}from"lodash-es";import{firstValueFrom as b}from"rxjs";import{DomSanitizer as A}from"@angular/platform-browser";var O=S({FileUploadElement:()=>h});var h=class g{model=E.required(...ngDevMode?[{debugName:"model"}]:[]);tid=N(this.model,"nvb-file-upload","file-upload");fileInput;isDragOver=u(false,...ngDevMode?[{debugName:"isDragOver"}]:[]);requestInFlight=u(false,...ngDevMode?[{debugName:"requestInFlight"}]:[]);previewItems=u([],...ngDevMode?[{debugName:"previewItems"}]:[]);previewOpen=u(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewUrl=u("",...ngDevMode?[{debugName:"previewUrl"}]:[]);previewKind=u(null,...ngDevMode?[{debugName:"previewKind"}]:[]);previewName=u("",...ngDevMode?[{debugName:"previewName"}]:[]);previewFrameUrl=u(null,...ngDevMode?[{debugName:"previewFrameUrl"}]:[]);elementActionService=c(D);dataSourceService=c(I);dataService=c(P);eventService=c(k);ngxViewBuilderApiService=c(z);cdr=c(T);sanitizer=c(A);markupSecurityService=c(M);previewObjectUrl=null;activePreviewResource=null;onPropertyChangedHandler=e=>{const t=String(this.model()?.dataPath??"").trim();if(!t)return;if(String(e?.payload?.elementNameOrPath??"").trim()!==t)return;this.cdr.markForCheck()};ngOnInit(){this.syncPreviewFromModelValue();this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnDestroy(){this.closePreview();this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}openPicker(){if(this.isInteractionLocked())return;this.fileInput?.nativeElement.click()}onFileInputChange(e){if(this.isInteractionLocked())return;const t=e.target;const i=t?.files?Array.from(t.files):[];this.applyFiles(i);if(t)t.value=""}onDragOver(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(true)}onDragLeave(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(false)}onDrop(e){if(this.isInteractionLocked())return;e.preventDefault();this.isDragOver.set(false);const t=e.dataTransfer?.files?Array.from(e.dataTransfer.files):[];this.applyFiles(t)}onEntryActivate(e,t){t.preventDefault();t.stopPropagation();if(this.canPreviewEntry(e)){this.previewFileAsync(e);return}if(this.canDownload(e))this.downloadFileAsync(e)}removeFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.removeFileAsync(e)}downloadFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.downloadFileAsync(e)}previewFile(e,t){t.preventDefault();t.stopPropagation();if(this.isInteractionLocked())return;this.previewFileAsync(e)}clearFiles(e){e?.preventDefault();e?.stopPropagation();if(this.isInteractionLocked())return;this.closePreview();this.previewItems.set([]);this.model().setFiles([]);this.emitChangeActions()}closePreview(e){e?.preventDefault();e?.stopPropagation();this.previewOpen.set(false);this.previewUrl.set("");this.previewKind.set(null);this.previewName.set("");this.previewFrameUrl.set(null);this.activePreviewResource=null;if(this.previewObjectUrl){URL.revokeObjectURL(this.previewObjectUrl);this.previewObjectUrl=null}}formatSize(e){const t=Number(e);if(!Number.isFinite(t)||t<0)return"0 B";if(t<1024)return`${t} B`;if(t<1048576)return`${(t/1024).toFixed(1)} KB`;return`${(t/1048576).toFixed(1)} MB`}resolveDisplayMode(){const e=String(this.model().displayMode??"modern").trim().toLowerCase();if(e==="compact"||e==="grid")return e;return"modern"}resolveStatusText(e){if(e.status==="pending")return this.isBase64Mode()?"Reading file...":"Uploading...";if(e.status==="error")return e.errorMessage||"Upload failed";return""}canOpenEntry(e){return this.canPreviewEntry(e)||this.canDownload(e)}canDownload(e){if(e.localFile||e.meta.base64)return true;if(!String(this.model().downloadDataSourceName??"").trim())return false;return Boolean(this.resolveMetaKey(e.meta))}canPreviewEntry(e){if(!this.model().showPreview)return false;return this.resolvePreviewKind(e.meta)!==null&&this.canDownload(e)}async applyFiles(e){if(this.isInteractionLocked())return;const t=Boolean(this.model().multiple);const i=t?[...this.previewItems()]:[];const n=this.normalizeFiles(e,i.length);if(n.length===0)return;const r=t?[...i]:[];const o=this.isBase64Mode();const a=!o&&String(this.model().uploadDataSourceName??"").trim().length>0;const l=n.map((s,v)=>this.createPreviewEntry(this.createLocalMeta(s),s,a||o?"pending":"ready","",`${Date.now()}-${v}-${s.name}`));r.push(...l);this.commitPreviewEntries(r);this.emitChangeActions();this.ngxViewBuilderApiService.notifyFileUploadFilesAdded({elementName:this.model().name,elementDataPath:this.model().dataPath,element:this.model(),files:r.map(s=>s.meta),addedFiles:l.map(s=>s.meta)});if(o){await this.encodeEntries(l);return}if(!a)return;this.requestInFlight.set(true);let d=false;try{for(const s of l){const v=s.localFile;if(!v)continue;try{const m=await this.uploadFileIfNeeded(v);const f=this.updatePreviewEntry(s.id,F=>({...F,meta:m,iconName:this.resolveFileTypeIcon(m),status:"ready",errorMessage:""}));d=d||f}catch{const m=this.updatePreviewEntry(s.id,f=>({...f,status:"error",errorMessage:"Upload failed"}));d=d||m}}}finally{this.requestInFlight.set(false)}if(d)this.emitChangeActions()}async encodeEntries(e){let t=false;for(const i of e){const n=i.localFile;if(!n)continue;try{const r=await this.readFileAsBase64(n);t=this.updatePreviewEntry(i.id,o=>({...o,meta:{...o.meta,base64:r},status:"ready",errorMessage:""}))||t}catch{t=this.updatePreviewEntry(i.id,r=>({...r,status:"error",errorMessage:"Could not read the file"}))||t}}if(t)this.emitChangeActions()}readFileAsBase64(e){return new Promise((t,i)=>{const n=new FileReader;n.onload=()=>{const r=String(n.result??"");const o=r.indexOf(",");t(o>=0?r.slice(o+1):r)};n.onerror=()=>i(n.error??new Error("Could not read the file."));n.readAsDataURL(e)})}isBase64Mode(){return this.model().storageMode!=="server"}async removeFileAsync(e){const t=[...this.previewItems()];if(e<0||e>=t.length)return;const i=t[e];const n=this.resolveMetaKey(i.meta);const r=String(this.model().deleteDataSourceName??"").trim();if(r&&n){if(!await this.deleteFileFromServer(i.meta,r,n))return}t.splice(e,1);this.previewItems.set(t);this.model().setFiles(t.map(o=>o.meta));if(this.previewOpen()&&this.previewName()===this.resolveMetaName(i.meta))this.closePreview();this.emitChangeActions();this.ngxViewBuilderApiService.notifyFileUploadFileRemoved({elementName:this.model().name,elementDataPath:this.model().dataPath,element:this.model(),files:t.map(o=>o.meta),removedFile:i.meta,removedIndex:e})}async downloadFileAsync(e){const t=await this.resolveEntryResource(e);if(!t)return;this.downloadResource(t)}async previewFileAsync(e){const t=this.resolvePreviewKind(e.meta);if(!this.model().showPreview||!t){await this.downloadFileAsync(e);return}const i=await this.resolveEntryResource(e);if(!i)return;this.openPreview(t,i)}async resolveEntryResource(e){const t=this.resolveMetaKey(e.meta);if(t){const i=await this.fetchRemoteEntryResource(e,t);if(i)return i}if(e.localFile)return this.createResourceFromBlob(e.localFile,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta)||e.localFile.type);if(e.meta.base64){const i=this.decodeBase64(e.meta.base64,this.resolveMetaType(e.meta));if(i)return this.createResourceFromBlob(i,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta))}if(e.meta.raw){const i=await this.resolveResourceFromUnknown(e.meta.raw,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta));if(i)return i}return null}async fetchRemoteEntryResource(e,t){const i=String(this.model().downloadDataSourceName??"").trim();if(!i)return null;const n=this.dataSourceService.getSource(i);if(!n)return null;const r=this.buildRuntimeContext(e.meta,t,e.localFile??void 0);const o=this.resolveSourceMethod(n,"GET");const a=this.resolveSourceUrl(n,r);if(!a)return null;this.requestInFlight.set(true);try{const l=o==="GET"?void 0:this.resolveSourcePayload(n,r,{[this.model().fileKeyField]:t});const d=await b(this.dataSourceService.request(o,a,l,{responseType:"blob",observeResponse:true}));return await this.resolveHttpDownloadResponse(d,this.resolveMetaName(e.meta),this.resolveMetaType(e.meta))}catch{return null}finally{this.requestInFlight.set(false)}}async uploadFileIfNeeded(e){const t=String(this.model().uploadDataSourceName??"").trim();if(!t)return this.createLocalMeta(e);const i=this.dataSourceService.getSource(t);if(!i)return this.createLocalMeta(e);const n=this.buildRuntimeContext(this.createLocalMeta(e),void 0,e);const r=this.resolveSourceMethod(i,"POST");const o=this.resolveSourceUrl(i,n);if(!o)return this.createLocalMeta(e);const a=new FormData;const l=String(this.model().uploadFormFieldName??"file").trim()||"file";a.append(l,e,e.name);const d=await b(this.dataSourceService.request(r,o,a));const s=this.extractFirstRecord(d);if(s)return this.createMetaFromRecord(s,e);return this.createLocalMeta(e)}async deleteFileFromServer(e,t,i){const n=this.dataSourceService.getSource(t);if(!n)return false;const r=this.buildRuntimeContext(e,i);const o=this.resolveSourceMethod(n,"DELETE");const a=this.resolveSourceUrl(n,r);if(!a)return false;const l=o==="GET"?void 0:this.resolveSourcePayload(n,r,{[this.model().fileKeyField]:i,fileKey:i,filKey:i,key:i,fil_key:i,id:i,fileId:i,uuid:i});this.requestInFlight.set(true);try{await b(this.dataSourceService.request(o,a,l));return true}catch{return false}finally{this.requestInFlight.set(false)}}normalizeFiles(e,t=0){if(!Array.isArray(e)||e.length===0)return[];const i=Number(this.model()?.maxFiles??1);const n=Number.isFinite(i)&&i>0?Math.floor(i):1;if(!this.model().multiple)return this.filterByMaxFileSize([e[0]]);const r=Math.max(0,Math.floor(Number(t)||0));const o=Math.max(0,n-r);if(o<=0)return[];return this.filterByMaxFileSize(e).slice(0,o)}filterByMaxFileSize(e){const t=Number(this.model()["maxFileSizeMb"]);if(!Number.isFinite(t)||t<=0)return e;const i=t*1024*1024;return e.filter(n=>Number(n?.size??0)<=i)}commitPreviewEntries(e){const t=[...e];this.previewItems.set(t);this.model().setFiles(t.map(i=>i.meta))}updatePreviewEntry(e,t){let i=false;const n=this.previewItems().map(r=>{if(r.id!==e)return r;i=true;return t(r)});if(!i)return false;this.commitPreviewEntries(n);return true}syncPreviewFromModelValue(){const e=this.extractRecords(this.model().value);if(e.length===0){this.previewItems.set([]);return}this.previewItems.set(e.map((t,i)=>this.createPreviewEntry(this.createMetaFromRecord(t),null,"ready","",`saved-${i}`)))}createPreviewEntry(e,t,i,n,r){return{id:r,meta:e,iconName:this.resolveFileTypeIcon(e),status:i,localFile:t,errorMessage:n}}createLocalMeta(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}createMetaFromRecord(e,t){const i=this.readRecordString(e,[this.model().fileNameField,"name","fileName","fil_name"])||t?.name||"file";const n=this.readRecordString(e,[this.model().fileTypeField,"type","contentType","mimeType","fil_content_type"])||t?.type||"";const r=this.readRecordNumber(e,[this.model().fileSizeField,"size","fil_size"])??Number(t?.size??0);const o=this.readRecordString(e,[this.model().fileKeyField,"fileKey","filKey","key","fil_key","id","fileId","uuid"])||void 0;const a=this.readRecordNumber(e,["lastModified"])??Number(t?.lastModified??0);const l=typeof e["base64"]==="string"?e["base64"].trim():"";return{name:i,type:n,size:Number.isFinite(r)&&r>=0?r:0,lastModified:Number.isFinite(a)&&a>=0?a:0,fileKey:o,...l?{base64:l}:{},raw:{...e}}}resolveFileTypeIcon(e){const t=String(e?.type??"").trim().toLowerCase();const i=this.resolveFileExtension(e?.name);if(t.startsWith("image/")||["jpg","jpeg","png","gif","webp","bmp","svg"].includes(i))return"image";if(t.includes("pdf")||i==="pdf")return"picture_as_pdf";if(t.includes("spreadsheet")||t.includes("excel")||t.includes("csv")||["csv","xls","xlsx","ods"].includes(i))return"table_view";if(t.includes("word")||t.includes("opendocument.text")||["doc","docx","rtf","odt"].includes(i))return"draft";if(t.startsWith("video/")||["mp4","mov","avi","mkv","webm"].includes(i))return"smart_display";if(t.includes("html")||t.includes("xml")||t.includes("json")||t.includes("javascript")||t.includes("typescript")||t.includes("css")||t.includes("text/")||["txt","json","xml","html","htm","js","ts","css","md","yml","yaml"].includes(i))return"html";if(t.includes("zip")||t.includes("compressed")||["zip","rar","7z","tar","gz"].includes(i))return"extension";return"description"}resolvePreviewKind(e){const t=String(e?.type??"").trim().toLowerCase();const i=this.resolveFileExtension(e?.name);if(t.startsWith("image/")||["jpg","jpeg","png","gif","webp","bmp","svg"].includes(i))return"image";if(t.includes("pdf")||i==="pdf")return"pdf";return null}resolveFileExtension(e){const t=String(e??"").trim().toLowerCase();if(!t)return"";const i=t.lastIndexOf(".");if(i<0||i===t.length-1)return"";return t.slice(i+1)}resolveMetaKey(e){const t=String(e?.fileKey??"").trim();if(t)return t;if(!e?.raw||typeof e.raw!=="object")return"";return this.readRecordString(e.raw,[this.model().fileKeyField,"fileKey","filKey","key","fil_key","id","fileId","uuid"])}resolveMetaName(e){return String(e?.name??"").trim()||"file"}resolveMetaType(e){return String(e?.type??"").trim()||"application/octet-stream"}buildRuntimeContext(e,t,i){const n={value:this.model().value,files:this.model().value,file:i,fileMeta:e?.raw??e,fileRow:e?.raw??e,fileName:this.resolveMetaName(e),fileType:this.resolveMetaType(e),fileSize:Number(e?.size??0),item:e?.raw??e,row:e?.raw??e};if(t){n[this.model().fileKeyField]=t;n["fileKey"]=t;n["filKey"]=t;n["fil_key"]=t;n["key"]=t;n["id"]=t;n["fileId"]=t;n["uuid"]=t}const r=String(this.model().name??"").trim();if(r)n[r]=this.model().value;return n}resolveSourceMethod(e,t){return String(e?.params?.["method"]??t).trim().toUpperCase()||t}resolveSourceUrl(e,t){const i=String(e?.params?.["url"]??"").trim();if(!i)return"";return i.replace(/\{([^}]+)\}/g,(n,r)=>{const o=this.resolveContextValue(String(r??"").trim(),t);return encodeURIComponent(this.serializeForUrl(o))})}resolveSourcePayload(e,t,i){const n=e?.params?.["body"]??e?.params?.["payload"];if(n===null||n===void 0)return i;const r=this.normalizePayloadTemplate(n);if(r===void 0)return i;return this.replacePayloadPlaceholders(r,t)}normalizePayloadTemplate(e){if(typeof e!=="string")return e;const t=e.trim();if(!t)return;if(/^\{[^{}]+\}$/.test(t))return t;if(!t.startsWith("{")&&!t.startsWith("["))return e;try{return JSON.parse(t)}catch{return e}}replacePayloadPlaceholders(e,t){if(typeof e==="string"){const i=e.match(/^\{([^}]+)\}$/);if(i){const n=String(i[1]??"").trim();return this.resolveContextValue(n,t)}return e.replace(/\{([^}]+)\}/g,(n,r)=>{const o=this.resolveContextValue(String(r??"").trim(),t);return this.serializeForUrl(o)})}if(Array.isArray(e))return e.map(i=>this.replacePayloadPlaceholders(i,t));if(e&&typeof e==="object"){const i=e;const n={};Object.keys(i).forEach(r=>{n[r]=this.replacePayloadPlaceholders(i[r],t)});return n}return e}resolveContextValue(e,t){const i=String(e??"").trim().replace(/^\{/,"").replace(/\}$/,"");if(!i)return;const n=B(t,i);if(n!==void 0)return n;return this.dataService.getValue(i)}serializeForUrl(e){if(Array.isArray(e))return e.length>0?String(e[0]??""):"";if(e===null||e===void 0)return"";return String(e)}extractFirstRecord(e){const t=this.extractRecords(e);return t.length>0?t[0]:null}extractRecords(e,t=0){if(t>4||e===null||e===void 0)return[];if(Array.isArray(e))return e.filter(r=>r&&typeof r==="object"&&!Array.isArray(r)).map(r=>r);if(!e||typeof e!=="object")return[];const i=e;const n=Object.keys(i).filter(r=>/^\d+$/.test(r));if(n.length>0)return n.sort((r,o)=>Number(r)-Number(o)).map(r=>i[r]).filter(r=>r&&typeof r==="object"&&!Array.isArray(r)).map(r=>r);for(const r of["data","items","rows","result","value"]){if(i[r]===void 0)continue;const o=this.extractRecords(i[r],t+1);if(o.length>0)return o}return[i]}readRecordString(e,t){for(const i of t){const n=String(i??"").trim();if(!n)continue;const r=e[n];if(r===null||r===void 0)continue;const o=String(r).trim();if(o)return o}return""}readRecordNumber(e,t){for(const i of t){const n=String(i??"").trim();if(!n)continue;const r=e[n];if(r===null||r===void 0||r==="")continue;const o=Number(r);if(Number.isFinite(o))return o}return null}async resolveHttpDownloadResponse(e,t,i){const n=e.body;if(!(n instanceof Blob))return null;const r=e.headers.get("content-type");const o=e.headers.get("content-disposition");const a=String(r||n.type||i||"application/octet-stream");const l=this.parseContentDispositionFileName(o)||t||"file";if(this.shouldUseBlobAsFile(a,o))return this.createResourceFromBlob(n,l,a);const d=await n.text();const s=this.parseStructuredDownloadPayload(d);const v=await this.resolveResourceFromUnknown(s,l,a);if(v)return v;return this.createResourceFromBlob(n,l,a)}shouldUseBlobAsFile(e,t){const i=String(e??"").trim().toLowerCase();if(String(t??"").trim().toLowerCase().includes("attachment"))return true;if(!i)return true;if(i.startsWith("image/")||i.includes("pdf")||i.includes("octet-stream")||i.includes("zip")||i.includes("excel")||i.includes("spreadsheet")||i.includes("msword")||i.includes("officedocument"))return true;return!(i.includes("json")||i.startsWith("text/")||i.includes("javascript")||i.includes("xml"))}parseStructuredDownloadPayload(e){const t=String(e??"").trim();if(!t)return null;if(t.startsWith("{")&&t.endsWith("}")||t.startsWith("[")&&t.endsWith("]"))try{return JSON.parse(t)}catch{return t}return t}async resolveResourceFromUnknown(e,t,i){if(e===null||e===void 0)return null;if(e instanceof Blob)return this.createResourceFromBlob(e,t,e.type||i);if(e instanceof ArrayBuffer)return this.createResourceFromBlob(new Blob([e],{type:i}),t,i);if(e instanceof Uint8Array)return this.createResourceFromBlob(new Blob([e.slice()],{type:i}),t,i);if(typeof e==="string")return await this.resolveResourceFromString(e,t,i);if(typeof e==="object"){const n=e;const r=this.readRecordString(n,["fileName","name",this.model().fileNameField])||t;const o=this.readRecordString(n,["contentType","type",this.model().fileTypeField])||i;const a=this.markupSecurityService.sanitizeFileUrl(this.readRecordString(n,["url","downloadUrl","href","src","previewUrl"])||"");if(a)return{fileName:r||t||"file",contentType:o||i||"application/octet-stream",sourceUrl:a,revokeOnDispose:false};const l=n["content"]??n["data"]??n["base64"]??n["blob"]??n["file"]??n["result"]??null;if(l!==null&&l!==void 0&&l!==e)return this.resolveResourceFromUnknown(l,r,o)}return null}async resolveResourceFromString(e,t,i){const n=String(e??"").trim();if(!n)return null;if(/^(https?:|blob:|data:)/i.test(n)){const a=this.markupSecurityService.sanitizeFileUrl(n);if(!a)return null;return{fileName:t||"file",contentType:i||this.resolveContentTypeFromUrl(a),sourceUrl:a,revokeOnDispose:false}}const r=this.parseStructuredDownloadPayload(n);if(r!==n)return this.resolveResourceFromUnknown(r,t,i);const o=this.createBlobFromBase64(n,i);if(o)return this.createResourceFromBlob(o,t,i||o.type);return this.createResourceFromBlob(new Blob([n],{type:i||"text/plain;charset=utf-8"}),t,i||"text/plain;charset=utf-8")}decodeBase64(e,t){try{const i=String(e??"");const n=atob(i.slice(i.indexOf(",")+1).replace(/\s+/g,""));const r=new Uint8Array(n.length);for(let o=0;o<n.length;o+=1)r[o]=n.charCodeAt(o);return new Blob([r],{type:t||"application/octet-stream"})}catch{return null}}createBlobFromBase64(e,t){const i=String(e??"").replace(/\s+/g,"");if(!this.isProbableBase64(i))return null;try{const n=atob(i);const r=new Uint8Array(n.length);for(let o=0;o<n.length;o+=1)r[o]=n.charCodeAt(o);return new Blob([r],{type:t||"application/octet-stream"})}catch{return null}}isProbableBase64(e){if(!e||e.length<16||e.length%4!==0)return false;return/^[A-Za-z0-9+/]+={0,2}$/.test(e)}resolveContentTypeFromUrl(e){const t=String(e??"").trim();if(t.startsWith("data:")){const i=t.match(/^data:([^;,]+)[;,]/i);if(i?.[1])return i[1]}return"application/octet-stream"}createResourceFromBlob(e,t,i){const n=String(i||e.type||"").trim();const r=/html|xml|svg|javascript|ecmascript/i.test(n)?"application/octet-stream":n||"application/octet-stream";const o=e.type===r?e:new Blob([e],{type:r});const a=URL.createObjectURL(o);return{fileName:t||"file",contentType:r,sourceUrl:a,revokeOnDispose:true}}openPreview(e,t){const i=this.markupSecurityService.sanitizeFileUrl(t.sourceUrl);if(!i)return;t={...t,sourceUrl:i};this.closePreview();this.previewKind.set(e);this.previewName.set(t.fileName);this.previewUrl.set(t.sourceUrl);this.previewFrameUrl.set(e==="pdf"?this.sanitizer.bypassSecurityTrustResourceUrl(t.sourceUrl):null);this.previewOpen.set(true);this.activePreviewResource=t;if(t.revokeOnDispose)this.previewObjectUrl=t.sourceUrl}downloadPreview(e){e.preventDefault();e.stopPropagation();if(!this.activePreviewResource)return;this.downloadResource(this.activePreviewResource)}downloadResource(e){this.triggerLinkDownload(e.sourceUrl,e.fileName);if(e.revokeOnDispose)setTimeout(()=>{URL.revokeObjectURL(e.sourceUrl)},1e3)}parseContentDispositionFileName(e){const t=String(e??"").trim();if(!t)return"";const i=t.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);if(i?.[1])try{return decodeURIComponent(i[1].trim().replace(/^"|"$/g,""))}catch{return i[1].trim().replace(/^"|"$/g,"")}const n=t.match(/filename\s*=\s*("?)([^";]+)\1/i);return String(n?.[2]??"").trim()}triggerLinkDownload(e,t){const i=this.markupSecurityService.sanitizeFileUrl(e);if(!i)return;const n=document.createElement("a");n.href=i;n.download=t||"file";n.target="_blank";n.rel="noopener";document.body.appendChild(n);n.click();document.body.removeChild(n)}emitChangeActions(){const e={value:this.model().value,files:this.model().value,item:null,row:null};const t=String(this.model().name??"").trim();if(t)e[t]=this.model().value;this.elementActionService.runActions(this.model(),this.model().events??[],"change",e)}isInteractionLocked(){const e=this.model();if(!e)return false;if(this.requestInFlight())return true;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:g,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:g,isStandalone:true,selector:"file-upload-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},viewQueries:[{propertyName:"fileInput",first:true,predicate:["fileInput"],descendants:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <section class=\"nvb-file-upload-wrap\" [attr.data-testid]=\"tid('root')\">\n    <input\n      #fileInput\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"file\"\n      [accept]=\"model().accept\"\n      [multiple]=\"model().multiple\"\n      hidden\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\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      (click)=\"$event.stopPropagation()\"\n      (change)=\"onFileInputChange($event)\"\n    />\n\n    <div\n      class=\"nvb-file-upload\"\n      [ngClass]=\"{\n        'nvb-file-upload--drag-over': isDragOver(),\n        'nvb-file-upload--compact': resolveDisplayMode() === 'compact',\n        'nvb-file-upload--modern': resolveDisplayMode() === 'modern',\n        'nvb-file-upload--grid': resolveDisplayMode() === 'grid',\n      }\"\n      (click)=\"openPicker()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : (model().dropzoneText | dynamicText: model())\n      \"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\n      [attr.data-testid]=\"tid('dropzone')\"\n      (keydown.enter)=\"openPicker()\"\n      (keydown.space)=\"openPicker(); $event.preventDefault()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <span class=\"material-symbols-outlined nvb-file-upload__icon\">upload_file</span>\n      <p class=\"nvb-file-upload__label\">{{ model().dropzoneText | dynamicText: model() }}</p>\n\n      @if (model().accept) {\n        <p class=\"nvb-file-upload__accept\">{{ model().accept }}</p>\n      }\n      <span [id]=\"fieldWrapper.partId('dropzone-hint')\" class=\"nvb-sr-only\">\n        {{ 'files.dropzoneHint' | uiT: 'Drag files here or press Enter to choose files.' }}\n      </span>\n    </div>\n\n    @if (previewItems().length > 0) {\n      <ul\n        class=\"nvb-file-upload__list\"\n        [ngClass]=\"{\n          'nvb-file-upload__list--compact': resolveDisplayMode() === 'compact',\n          'nvb-file-upload__list--modern': resolveDisplayMode() === 'modern',\n          'nvb-file-upload__list--grid': resolveDisplayMode() === 'grid',\n        }\"\n      >\n        @for (entry of previewItems(); track entry.id; let itemIndex = $index) {\n          <li\n            [ngClass]=\"{\n              'nvb-file-upload__list-item--pending': entry.status === 'pending',\n              'nvb-file-upload__list-item--error': entry.status === 'error',\n            }\"\n          >\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__entry-main\"\n              [class.nvb-file-upload__entry-main--interactive]=\"canOpenEntry(entry)\"\n              [disabled]=\"!canOpenEntry(entry)\"\n              [attr.aria-label]=\"entry.meta.name\"\n              [attr.data-testid]=\"tid('entry', itemIndex)\"\n              (click)=\"onEntryActivate(entry, $event)\"\n            >\n              <div class=\"nvb-file-upload__thumb\" [attr.data-file-icon]=\"entry.iconName\">\n                <span class=\"material-symbols-outlined\">{{ entry.iconName }}</span>\n              </div>\n\n              <div class=\"nvb-file-upload__entry-content\">\n                <p class=\"nvb-file-upload__entry-name\">{{ entry.meta.name }}</p>\n                <p class=\"nvb-file-upload__entry-meta\">\n                  {{ entry.meta.type || ('files.unknownType' | uiT: 'unknown') }}\n                  <span>&bull;</span>\n                  {{ formatSize(entry.meta.size) }}\n                </p>\n\n                @if (resolveStatusText(entry); as statusText) {\n                  @if (statusText) {\n                    <p class=\"nvb-file-upload__entry-status\">{{ statusText | uiT: statusText }}</p>\n                  }\n                }\n              </div>\n            </button>\n\n            <div class=\"nvb-file-upload__entry-actions\">\n              @if (canPreviewEntry(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"previewFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.preview' | uiT: 'Preview'\"\n                  [attr.data-testid]=\"tid('preview', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">visibility</span>\n                </button>\n              }\n\n              @if (canDownload(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"downloadFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n                  [attr.data-testid]=\"tid('download', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">download</span>\n                </button>\n              }\n\n              <button\n                type=\"button\"\n                class=\"nvb-file-upload__remove\"\n                [disabled]=\"requestInFlight()\"\n                (click)=\"removeFile(itemIndex, $event)\"\n                [attr.aria-label]=\"'files.remove' | uiT: 'Remove'\"\n                [attr.data-testid]=\"tid('remove', itemIndex)\"\n              >\n                <span class=\"material-symbols-outlined\">close</span>\n              </button>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </section>\n\n  @if (previewOpen()) {\n    <div\n      class=\"nvb-file-upload__preview-backdrop\"\n      [attr.data-testid]=\"tid('preview-backdrop')\"\n      (click)=\"closePreview()\"\n    >\n      <div\n        class=\"nvb-file-upload__preview-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"file-upload-preview-title\"\n        [attr.data-testid]=\"tid('preview-dialog')\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-file-upload__preview-header\">\n          <p class=\"nvb-file-upload__preview-title\" id=\"file-upload-preview-title\">\n            {{ previewName() }}\n          </p>\n          <div class=\"nvb-file-upload__preview-header-actions\">\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-action\"\n              (click)=\"downloadPreview($event)\"\n              [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n              [attr.data-testid]=\"tid('preview-download')\"\n            >\n              <span class=\"material-symbols-outlined\">download</span>\n              <span>{{ 'files.download' | uiT: 'Download' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-close\"\n              (click)=\"closePreview($event)\"\n              [attr.aria-label]=\"'files.closePreview' | uiT: 'Close preview'\"\n              [attr.data-testid]=\"tid('preview-close')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"nvb-file-upload__preview-body\">\n          @if (previewKind() === 'image') {\n            <img [src]=\"previewUrl()\" [alt]=\"previewName()\" />\n          } @else if (previewKind() === 'pdf') {\n            <iframe [src]=\"previewFrameUrl()\" [attr.title]=\"previewName()\"></iframe>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-file-upload-wrap{width:100%;display:grid;gap:10px}.nvb-file-upload{border:1px dashed var(--nvb-color-neutral-400);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-050);min-height:110px;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;cursor:pointer;padding:14px;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.nvb-file-upload:hover,.nvb-file-upload--drag-over{border-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white))}.nvb-file-upload--compact{min-height:88px;padding:10px}.nvb-file-upload--modern{box-shadow:var(--nvb-card-shadow)}.nvb-file-upload--grid{min-height:124px}.nvb-file-upload__icon{font-size:26px;color:var(--nvb-color-primary-600)}.nvb-file-upload__label{margin:0;font-size:13px;color:var(--nvb-color-neutral-700);line-height:1.4;white-space:pre-wrap}.nvb-file-upload__accept{margin:0;font-size:11px;color:var(--nvb-color-neutral-500);line-height:1.35;word-break:break-word}.nvb-file-upload__list{list-style:none;margin:0;padding:0}.nvb-file-upload__list--compact,.nvb-file-upload__list--modern{display:grid;gap:8px}.nvb-file-upload__list--grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.nvb-file-upload__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);padding:8px 10px}.nvb-file-upload__list--grid li{min-height:148px;align-items:stretch;flex-direction:column;justify-content:space-between}.nvb-file-upload__list-item--pending{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-neutral-300))}.nvb-file-upload__list-item--error{border-color:color-mix(in oklab,var(--nvb-color-danger-500, #dc2626) 35%,var(--nvb-color-neutral-300))}.nvb-file-upload__entry-main{border:none;background:transparent;padding:0;display:flex;align-items:center;gap:10px;min-width:0;text-align:left;width:100%}.nvb-file-upload__entry-main:disabled{cursor:default}.nvb-file-upload__entry-main--interactive{cursor:pointer}.nvb-file-upload__list--grid .nvb-file-upload__entry-main{flex-direction:column;align-items:flex-start}.nvb-file-upload__thumb{width:40px;height:40px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__thumb{width:48px;height:48px}.nvb-file-upload__thumb span.material-symbols-outlined{font-size:22px;color:var(--nvb-color-neutral-600)}.nvb-file-upload__entry-content{min-width:0;display:grid;gap:3px}.nvb-file-upload__entry-name,.nvb-file-upload__entry-meta,.nvb-file-upload__entry-status,.nvb-file-upload__preview-title{margin:0;line-height:1.35}.nvb-file-upload__entry-name{font-size:12px;color:var(--nvb-color-neutral-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}.nvb-file-upload__list--grid .nvb-file-upload__entry-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}.nvb-file-upload__entry-meta{font-size:11px;color:var(--nvb-color-neutral-500);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.nvb-file-upload__entry-status{font-size:11px;color:var(--nvb-color-primary-600)}.nvb-file-upload__list-item--error .nvb-file-upload__entry-status{color:var(--nvb-color-danger-600, #b91c1c)}.nvb-file-upload__entry-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__entry-actions{width:100%;justify-content:flex-end}.nvb-file-upload__icon-action,.nvb-file-upload__remove,.nvb-file-upload__preview-close{border:1px solid transparent;background:transparent;color:var(--nvb-color-neutral-500);width:32px;height:32px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.nvb-file-upload__icon-action:hover,.nvb-file-upload__remove:hover,.nvb-file-upload__preview-close:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-file-upload__icon-action:focus-visible,.nvb-file-upload__remove:focus-visible,.nvb-file-upload__preview-close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-file-upload__icon-action:disabled,.nvb-file-upload__remove:disabled{cursor:not-allowed;opacity:.55}.nvb-file-upload__icon-action span,.nvb-file-upload__remove span,.nvb-file-upload__preview-close span{font-size:18px}.nvb-file-upload__preview-backdrop{position:fixed;inset:0;z-index:1000;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:20px}.nvb-file-upload__preview-dialog{width:min(1440px,100%);max-width:100%;max-height:calc(100vh - 32px);min-height:min(88vh,960px);background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:var(--nvb-shadow-16);outline:0}.nvb-file-upload__preview-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-file-upload__preview-title{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-file-upload__preview-header-actions{display:inline-flex;align-items:center;gap:8px}.nvb-file-upload__preview-action{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);min-height:32px;border-radius:var(--nvb-button-radius);padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-file-upload__preview-action:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-file-upload__preview-action span.material-symbols-outlined{font-size:18px}.nvb-file-upload__preview-body{min-height:0;overflow:auto;background:#0f172a;padding:12px;display:flex;align-items:center;justify-content:center}.nvb-file-upload__preview-body img{display:block;max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;height:auto;margin:0 auto}.nvb-file-upload__preview-body iframe{display:block;width:100%;min-height:calc(100vh - 140px);border:none;background:var(--nvb-color-neutral-000)}\n"],dependencies:[{kind:"component",type:_,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:x,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:y,name:"dynamicText"},{kind:"pipe",type:w,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:h,decorators:[{type:U,args:[{selector:"file-upload-element",changeDetection:R.OnPush,imports:[_,x,y,w],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <section class=\"nvb-file-upload-wrap\" [attr.data-testid]=\"tid('root')\">\n    <input\n      #fileInput\n      [id]=\"fieldWrapper.controlId()\"\n      type=\"file\"\n      [accept]=\"model().accept\"\n      [multiple]=\"model().multiple\"\n      hidden\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\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      (click)=\"$event.stopPropagation()\"\n      (change)=\"onFileInputChange($event)\"\n    />\n\n    <div\n      class=\"nvb-file-upload\"\n      [ngClass]=\"{\n        'nvb-file-upload--drag-over': isDragOver(),\n        'nvb-file-upload--compact': resolveDisplayMode() === 'compact',\n        'nvb-file-upload--modern': resolveDisplayMode() === 'modern',\n        'nvb-file-upload--grid': resolveDisplayMode() === 'grid',\n      }\"\n      (click)=\"openPicker()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"\n        fieldWrapper.hasLabelText() ? null : (model().dropzoneText | dynamicText: model())\n      \"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds(fieldWrapper.partId('dropzone-hint'))\"\n      [attr.data-testid]=\"tid('dropzone')\"\n      (keydown.enter)=\"openPicker()\"\n      (keydown.space)=\"openPicker(); $event.preventDefault()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <span class=\"material-symbols-outlined nvb-file-upload__icon\">upload_file</span>\n      <p class=\"nvb-file-upload__label\">{{ model().dropzoneText | dynamicText: model() }}</p>\n\n      @if (model().accept) {\n        <p class=\"nvb-file-upload__accept\">{{ model().accept }}</p>\n      }\n      <span [id]=\"fieldWrapper.partId('dropzone-hint')\" class=\"nvb-sr-only\">\n        {{ 'files.dropzoneHint' | uiT: 'Drag files here or press Enter to choose files.' }}\n      </span>\n    </div>\n\n    @if (previewItems().length > 0) {\n      <ul\n        class=\"nvb-file-upload__list\"\n        [ngClass]=\"{\n          'nvb-file-upload__list--compact': resolveDisplayMode() === 'compact',\n          'nvb-file-upload__list--modern': resolveDisplayMode() === 'modern',\n          'nvb-file-upload__list--grid': resolveDisplayMode() === 'grid',\n        }\"\n      >\n        @for (entry of previewItems(); track entry.id; let itemIndex = $index) {\n          <li\n            [ngClass]=\"{\n              'nvb-file-upload__list-item--pending': entry.status === 'pending',\n              'nvb-file-upload__list-item--error': entry.status === 'error',\n            }\"\n          >\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__entry-main\"\n              [class.nvb-file-upload__entry-main--interactive]=\"canOpenEntry(entry)\"\n              [disabled]=\"!canOpenEntry(entry)\"\n              [attr.aria-label]=\"entry.meta.name\"\n              [attr.data-testid]=\"tid('entry', itemIndex)\"\n              (click)=\"onEntryActivate(entry, $event)\"\n            >\n              <div class=\"nvb-file-upload__thumb\" [attr.data-file-icon]=\"entry.iconName\">\n                <span class=\"material-symbols-outlined\">{{ entry.iconName }}</span>\n              </div>\n\n              <div class=\"nvb-file-upload__entry-content\">\n                <p class=\"nvb-file-upload__entry-name\">{{ entry.meta.name }}</p>\n                <p class=\"nvb-file-upload__entry-meta\">\n                  {{ entry.meta.type || ('files.unknownType' | uiT: 'unknown') }}\n                  <span>&bull;</span>\n                  {{ formatSize(entry.meta.size) }}\n                </p>\n\n                @if (resolveStatusText(entry); as statusText) {\n                  @if (statusText) {\n                    <p class=\"nvb-file-upload__entry-status\">{{ statusText | uiT: statusText }}</p>\n                  }\n                }\n              </div>\n            </button>\n\n            <div class=\"nvb-file-upload__entry-actions\">\n              @if (canPreviewEntry(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"previewFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.preview' | uiT: 'Preview'\"\n                  [attr.data-testid]=\"tid('preview', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">visibility</span>\n                </button>\n              }\n\n              @if (canDownload(entry)) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-file-upload__icon-action\"\n                  [disabled]=\"requestInFlight()\"\n                  (click)=\"downloadFile(entry, $event)\"\n                  [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n                  [attr.data-testid]=\"tid('download', itemIndex)\"\n                >\n                  <span class=\"material-symbols-outlined\">download</span>\n                </button>\n              }\n\n              <button\n                type=\"button\"\n                class=\"nvb-file-upload__remove\"\n                [disabled]=\"requestInFlight()\"\n                (click)=\"removeFile(itemIndex, $event)\"\n                [attr.aria-label]=\"'files.remove' | uiT: 'Remove'\"\n                [attr.data-testid]=\"tid('remove', itemIndex)\"\n              >\n                <span class=\"material-symbols-outlined\">close</span>\n              </button>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </section>\n\n  @if (previewOpen()) {\n    <div\n      class=\"nvb-file-upload__preview-backdrop\"\n      [attr.data-testid]=\"tid('preview-backdrop')\"\n      (click)=\"closePreview()\"\n    >\n      <div\n        class=\"nvb-file-upload__preview-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"file-upload-preview-title\"\n        [attr.data-testid]=\"tid('preview-dialog')\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-file-upload__preview-header\">\n          <p class=\"nvb-file-upload__preview-title\" id=\"file-upload-preview-title\">\n            {{ previewName() }}\n          </p>\n          <div class=\"nvb-file-upload__preview-header-actions\">\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-action\"\n              (click)=\"downloadPreview($event)\"\n              [attr.aria-label]=\"'files.download' | uiT: 'Download'\"\n              [attr.data-testid]=\"tid('preview-download')\"\n            >\n              <span class=\"material-symbols-outlined\">download</span>\n              <span>{{ 'files.download' | uiT: 'Download' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"nvb-file-upload__preview-close\"\n              (click)=\"closePreview($event)\"\n              [attr.aria-label]=\"'files.closePreview' | uiT: 'Close preview'\"\n              [attr.data-testid]=\"tid('preview-close')\"\n            >\n              <span class=\"material-symbols-outlined\">close</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"nvb-file-upload__preview-body\">\n          @if (previewKind() === 'image') {\n            <img [src]=\"previewUrl()\" [alt]=\"previewName()\" />\n          } @else if (previewKind() === 'pdf') {\n            <iframe [src]=\"previewFrameUrl()\" [attr.title]=\"previewName()\"></iframe>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-file-upload-wrap{width:100%;display:grid;gap:10px}.nvb-file-upload{border:1px dashed var(--nvb-color-neutral-400);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-050);min-height:110px;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;cursor:pointer;padding:14px;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.nvb-file-upload:hover,.nvb-file-upload--drag-over{border-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-primary-500) 12%,var(--nvb-color-surface-mix-target, white))}.nvb-file-upload--compact{min-height:88px;padding:10px}.nvb-file-upload--modern{box-shadow:var(--nvb-card-shadow)}.nvb-file-upload--grid{min-height:124px}.nvb-file-upload__icon{font-size:26px;color:var(--nvb-color-primary-600)}.nvb-file-upload__label{margin:0;font-size:13px;color:var(--nvb-color-neutral-700);line-height:1.4;white-space:pre-wrap}.nvb-file-upload__accept{margin:0;font-size:11px;color:var(--nvb-color-neutral-500);line-height:1.35;word-break:break-word}.nvb-file-upload__list{list-style:none;margin:0;padding:0}.nvb-file-upload__list--compact,.nvb-file-upload__list--modern{display:grid;gap:8px}.nvb-file-upload__list--grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.nvb-file-upload__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);padding:8px 10px}.nvb-file-upload__list--grid li{min-height:148px;align-items:stretch;flex-direction:column;justify-content:space-between}.nvb-file-upload__list-item--pending{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 30%,var(--nvb-color-neutral-300))}.nvb-file-upload__list-item--error{border-color:color-mix(in oklab,var(--nvb-color-danger-500, #dc2626) 35%,var(--nvb-color-neutral-300))}.nvb-file-upload__entry-main{border:none;background:transparent;padding:0;display:flex;align-items:center;gap:10px;min-width:0;text-align:left;width:100%}.nvb-file-upload__entry-main:disabled{cursor:default}.nvb-file-upload__entry-main--interactive{cursor:pointer}.nvb-file-upload__list--grid .nvb-file-upload__entry-main{flex-direction:column;align-items:flex-start}.nvb-file-upload__thumb{width:40px;height:40px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-100);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__thumb{width:48px;height:48px}.nvb-file-upload__thumb span.material-symbols-outlined{font-size:22px;color:var(--nvb-color-neutral-600)}.nvb-file-upload__entry-content{min-width:0;display:grid;gap:3px}.nvb-file-upload__entry-name,.nvb-file-upload__entry-meta,.nvb-file-upload__entry-status,.nvb-file-upload__preview-title{margin:0;line-height:1.35}.nvb-file-upload__entry-name{font-size:12px;color:var(--nvb-color-neutral-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}.nvb-file-upload__list--grid .nvb-file-upload__entry-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}.nvb-file-upload__entry-meta{font-size:11px;color:var(--nvb-color-neutral-500);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.nvb-file-upload__entry-status{font-size:11px;color:var(--nvb-color-primary-600)}.nvb-file-upload__list-item--error .nvb-file-upload__entry-status{color:var(--nvb-color-danger-600, #b91c1c)}.nvb-file-upload__entry-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.nvb-file-upload__list--grid .nvb-file-upload__entry-actions{width:100%;justify-content:flex-end}.nvb-file-upload__icon-action,.nvb-file-upload__remove,.nvb-file-upload__preview-close{border:1px solid transparent;background:transparent;color:var(--nvb-color-neutral-500);width:32px;height:32px;border-radius:var(--nvb-control-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.nvb-file-upload__icon-action:hover,.nvb-file-upload__remove:hover,.nvb-file-upload__preview-close:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-file-upload__icon-action:focus-visible,.nvb-file-upload__remove:focus-visible,.nvb-file-upload__preview-close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-file-upload__icon-action:disabled,.nvb-file-upload__remove:disabled{cursor:not-allowed;opacity:.55}.nvb-file-upload__icon-action span,.nvb-file-upload__remove span,.nvb-file-upload__preview-close span{font-size:18px}.nvb-file-upload__preview-backdrop{position:fixed;inset:0;z-index:1000;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:20px}.nvb-file-upload__preview-dialog{width:min(1440px,100%);max-width:100%;max-height:calc(100vh - 32px);min-height:min(88vh,960px);background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:var(--nvb-shadow-16);outline:0}.nvb-file-upload__preview-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-file-upload__preview-title{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--nvb-color-neutral-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-file-upload__preview-header-actions{display:inline-flex;align-items:center;gap:8px}.nvb-file-upload__preview-action{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);min-height:32px;border-radius:var(--nvb-button-radius);padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-file-upload__preview-action:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-file-upload__preview-action span.material-symbols-outlined{font-size:18px}.nvb-file-upload__preview-body{min-height:0;overflow:auto;background:#0f172a;padding:12px;display:flex;align-items:center;justify-content:center}.nvb-file-upload__preview-body img{display:block;max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;height:auto;margin:0 auto}.nvb-file-upload__preview-body iframe{display:block;width:100%;min-height:calc(100vh - 140px);border:none;background:var(--nvb-color-neutral-000)}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],fileInput:[{type:C,args:["fileInput"]}]}});export{O as n,h as t};

package/fesm2022/{ngxviewbuilder-runtime-icon-element-BhhGVwki.mjs → ngxviewbuilder-runtime-icon-element-CLqWvjKL.mjs}

@@ -1 +1 @@
-import{Z as m}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-YhGi50Zx.mjs";import{o as l,r as d,t as a}from"./ngxviewbuilder-runtime-element-wrapper-B7BMP_6p.mjs";import*as n from"@angular/core";import{ChangeDetectionStrategy as v,Component as g,computed as o,inject as b,input as u}from"@angular/core";import{NgClass as s,NgStyle as c}from"@angular/common";var p=class r{model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=d(this.model,"nvb-icon","icon");elementActionService=b(m);iconName=o(()=>{return String(this.model()?.iconName??"").trim()||"star"},...ngDevMode?[{debugName:"iconName"}]:[]);iconStyle=o(()=>{const e=this.resolveSize(this.model()?.iconSize,24);const t=String(this.model()?.iconColor??"").trim();return{width:`${e+18}px`,height:`${e+18}px`,color:t||"var(--nvb-color-neutral-700)","font-size":`${e}px`}},...ngDevMode?[{debugName:"iconStyle"}]:[]);previewStyle=o(()=>{const e=this.resolveSize(this.model()?.previewSize,64);const t=String(this.model()?.iconColor??"").trim();return{width:`${e+20}px`,height:`${e+20}px`,color:t||"var(--nvb-color-neutral-700)","font-size":`${e}px`}},...ngDevMode?[{debugName:"previewStyle"}]:[]);onIconClick(e){e.preventDefault();e.stopPropagation();const t={value:this.iconName(),item:null,row:null};const i=String(this.model().name??"").trim();if(i)t[i]=this.iconName();this.elementActionService.runActions(this.model(),this.model().events??[],"click",t)}resolveSize(e,t){const i=Number(e);if(!Number.isFinite(i)||i<=0)return t;return Math.floor(i)}static ɵfac=n.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:n,type:r,deps:[],target:n.ɵɵFactoryTarget.Component});static ɵcmp=n.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:r,isStandalone:true,selector:"icon-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:n,template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-icon-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('icon')\"\n      type=\"button\"\n      class=\"nvb-icon\"\n      [ngClass]=\"{ 'nvb-icon--filled': model().filled }\"\n      [ngStyle]=\"iconStyle()\"\n      (click)=\"onIconClick($event)\"\n    >\n      <nvb-icon [name]=\"iconName()\"></nvb-icon>\n    </button>\n\n    @if (model().showPreview) {\n      <div class=\"nvb-icon__preview\" [ngStyle]=\"previewStyle()\">\n        <nvb-icon [name]=\"iconName()\"></nvb-icon>\n      </div>\n    }\n  </section>\n</element-wrapper>\n",styles:[':host{display:block;width:100%}.nvb-icon-wrap{width:100%;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.nvb-icon,.nvb-icon__preview{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);border-radius:var(--nvb-radius-lg);display:inline-flex;align-items:center;justify-content:center}.nvb-icon{cursor:pointer;min-width:42px;min-height:42px;padding:0}.nvb-icon span,.nvb-icon__preview span{line-height:1}.nvb-icon--filled span{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}\n'],dependencies:[{kind:"component",type:a,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:s,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:c,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:l,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]}],changeDetection:n.ChangeDetectionStrategy.OnPush})};n.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:n,type:p,decorators:[{type:g,args:[{selector:"icon-element",changeDetection:v.OnPush,imports:[a,s,c,l],template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-icon-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('icon')\"\n      type=\"button\"\n      class=\"nvb-icon\"\n      [ngClass]=\"{ 'nvb-icon--filled': model().filled }\"\n      [ngStyle]=\"iconStyle()\"\n      (click)=\"onIconClick($event)\"\n    >\n      <nvb-icon [name]=\"iconName()\"></nvb-icon>\n    </button>\n\n    @if (model().showPreview) {\n      <div class=\"nvb-icon__preview\" [ngStyle]=\"previewStyle()\">\n        <nvb-icon [name]=\"iconName()\"></nvb-icon>\n      </div>\n    }\n  </section>\n</element-wrapper>\n",styles:[':host{display:block;width:100%}.nvb-icon-wrap{width:100%;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.nvb-icon,.nvb-icon__preview{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);border-radius:var(--nvb-radius-lg);display:inline-flex;align-items:center;justify-content:center}.nvb-icon{cursor:pointer;min-width:42px;min-height:42px;padding:0}.nvb-icon span,.nvb-icon__preview span{line-height:1}.nvb-icon--filled span{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}\n']}]}],propDecorators:{model:[{type:n.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{p as IconElement};
+import{Z as m}from"./ngxviewbuilder-runtime-ngx-view-builder-api.service-BYA8UfCA.mjs";import{o as l,r as d,t as a}from"./ngxviewbuilder-runtime-element-wrapper-EBaWVZvf.mjs";import*as n from"@angular/core";import{ChangeDetectionStrategy as v,Component as g,computed as o,inject as b,input as u}from"@angular/core";import{NgClass as s,NgStyle as c}from"@angular/common";var p=class r{model=u.required(...ngDevMode?[{debugName:"model"}]:[]);tid=d(this.model,"nvb-icon","icon");elementActionService=b(m);iconName=o(()=>{return String(this.model()?.iconName??"").trim()||"star"},...ngDevMode?[{debugName:"iconName"}]:[]);iconStyle=o(()=>{const e=this.resolveSize(this.model()?.iconSize,24);const t=String(this.model()?.iconColor??"").trim();return{width:`${e+18}px`,height:`${e+18}px`,color:t||"var(--nvb-color-neutral-700)","font-size":`${e}px`}},...ngDevMode?[{debugName:"iconStyle"}]:[]);previewStyle=o(()=>{const e=this.resolveSize(this.model()?.previewSize,64);const t=String(this.model()?.iconColor??"").trim();return{width:`${e+20}px`,height:`${e+20}px`,color:t||"var(--nvb-color-neutral-700)","font-size":`${e}px`}},...ngDevMode?[{debugName:"previewStyle"}]:[]);onIconClick(e){e.preventDefault();e.stopPropagation();const t={value:this.iconName(),item:null,row:null};const i=String(this.model().name??"").trim();if(i)t[i]=this.iconName();this.elementActionService.runActions(this.model(),this.model().events??[],"click",t)}resolveSize(e,t){const i=Number(e);if(!Number.isFinite(i)||i<=0)return t;return Math.floor(i)}static ɵfac=n.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:n,type:r,deps:[],target:n.ɵɵFactoryTarget.Component});static ɵcmp=n.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:r,isStandalone:true,selector:"icon-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:n,template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-icon-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('icon')\"\n      type=\"button\"\n      class=\"nvb-icon\"\n      [ngClass]=\"{ 'nvb-icon--filled': model().filled }\"\n      [ngStyle]=\"iconStyle()\"\n      (click)=\"onIconClick($event)\"\n    >\n      <nvb-icon [name]=\"iconName()\"></nvb-icon>\n    </button>\n\n    @if (model().showPreview) {\n      <div class=\"nvb-icon__preview\" [ngStyle]=\"previewStyle()\">\n        <nvb-icon [name]=\"iconName()\"></nvb-icon>\n      </div>\n    }\n  </section>\n</element-wrapper>\n",styles:[':host{display:block;width:100%}.nvb-icon-wrap{width:100%;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.nvb-icon,.nvb-icon__preview{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);border-radius:var(--nvb-radius-lg);display:inline-flex;align-items:center;justify-content:center}.nvb-icon{cursor:pointer;min-width:42px;min-height:42px;padding:0}.nvb-icon span,.nvb-icon__preview span{line-height:1}.nvb-icon--filled span{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}\n'],dependencies:[{kind:"component",type:a,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:s,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:c,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:l,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]}],changeDetection:n.ChangeDetectionStrategy.OnPush})};n.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:n,type:p,decorators:[{type:g,args:[{selector:"icon-element",changeDetection:v.OnPush,imports:[a,s,c,l],template:"<element-wrapper [model]=\"model()\">\n  <section class=\"nvb-icon-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button [attr.data-testid]=\"tid('icon')\"\n      type=\"button\"\n      class=\"nvb-icon\"\n      [ngClass]=\"{ 'nvb-icon--filled': model().filled }\"\n      [ngStyle]=\"iconStyle()\"\n      (click)=\"onIconClick($event)\"\n    >\n      <nvb-icon [name]=\"iconName()\"></nvb-icon>\n    </button>\n\n    @if (model().showPreview) {\n      <div class=\"nvb-icon__preview\" [ngStyle]=\"previewStyle()\">\n        <nvb-icon [name]=\"iconName()\"></nvb-icon>\n      </div>\n    }\n  </section>\n</element-wrapper>\n",styles:[':host{display:block;width:100%}.nvb-icon-wrap{width:100%;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.nvb-icon,.nvb-icon__preview{border:1px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);border-radius:var(--nvb-radius-lg);display:inline-flex;align-items:center;justify-content:center}.nvb-icon{cursor:pointer;min-width:42px;min-height:42px;padding:0}.nvb-icon span,.nvb-icon__preview span{line-height:1}.nvb-icon--filled span{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}\n']}]}],propDecorators:{model:[{type:n.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{p as IconElement};