@ngxviewbuilder/runtime 0.12.0 → 0.12.1

package/fesm2022/ngxviewbuilder-runtime-column-q9jO7OA7.mjs

@@ -0,0 +1,43 @@
+import{t as Z}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{C as Pe,Ht as H,Mt as At,Pt as pt,Ut as Pt,Vt as Oe,Wt as Ot,_ as Nt,an as R,d as Q,fn as Vt,g as E,gn as w,hn as zt,i as mt,jt as Lt,n as k,on as j,rt as Ht,sn as ye,t as A,y as xe}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{$ as ut,D as vt,E as bt,dt as Ne,et as oe,ht as Ft,i as Bt,mt as Ve,nt as ae,o as W,r as G,rt as we,s as Se,t as Te,ut as gt}from"./ngxviewbuilder-runtime-element-wrapper-BUzRnWUH.mjs";import{t as ee}from"./ngxviewbuilder-runtime-element-identity-host-Dh5Xi4Nx.mjs";import{i as $t,l as ht,p as jt,s as _e}from"./ngxviewbuilder-runtime-viewport-breakpoints-CnsMrbX1.mjs";import{i as Gt,o as K,s as ft,t as qt}from"./ngxviewbuilder-runtime-table-element-C0Pcf-Do.mjs";import{t as F}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import{t as Wt}from"./ngxviewbuilder-runtime-number-stepper-element-WzMSnzXR.mjs";import{t as Kt}from"./ngxviewbuilder-runtime-time-picker-element-CKVMQjZ2.mjs";import{t as Ut}from"./ngxviewbuilder-runtime-signature-pad-element-BDSkjOm4.mjs";import{t as Xt}from"./ngxviewbuilder-runtime-list-box-element-BslR4TlH.mjs";import{t as Yt}from"./ngxviewbuilder-runtime-autocomplete-element-D1-b60Yg.mjs";import{t as Jt}from"./ngxviewbuilder-runtime-badge-element-DwLNvH9z.mjs";import{t as Zt}from"./ngxviewbuilder-runtime-button-element-m24BQTuL.mjs";import{t as Qt}from"./ngxviewbuilder-runtime-chart-element-BSWuWpXQ.mjs";import{t as en}from"./ngxviewbuilder-runtime-checkbox-element-CuDort0j.mjs";import{t as yt}from"./ngxviewbuilder-runtime-custom-html-element-B2TQNPbK.mjs";import{t as tn}from"./ngxviewbuilder-runtime-datepicker-element-Dx9ryU_V.mjs";import{t as nn}from"./ngxviewbuilder-runtime-date-range-element-DYtVuNvd.mjs";import{t as rn}from"./ngxviewbuilder-runtime-divider-element-D4828e5R.mjs";import{t as xt}from"./ngxviewbuilder-runtime-toggle-switch-element-NcB3kYta.mjs";import{t as on}from"./ngxviewbuilder-runtime-input-mask.service-WZEF2C2_.mjs";import{t as an}from"./ngxviewbuilder-runtime-file-upload-element-Bx_JJxsl.mjs";import{t as ln}from"./ngxviewbuilder-runtime-iframe-element-DG-YEOXe.mjs";import{t as sn}from"./ngxviewbuilder-runtime-router-outlet-element-DcIc0_OQ.mjs";import{t as dn}from"./ngxviewbuilder-runtime-image-element-sl9NYRt4.mjs";import{t as cn}from"./ngxviewbuilder-runtime-video-element-D_5W6_Rh.mjs";import{t as pn}from"./ngxviewbuilder-runtime-list-grid-element-vbn5afuD.mjs";import{t as mn}from"./ngxviewbuilder-runtime-message-card-element-DV1boKqd.mjs";import{t as un}from"./ngxviewbuilder-runtime-multi-select-element-DO_dk2mB.mjs";import{t as vn}from"./ngxviewbuilder-runtime-number-element-BZouLH-5.mjs";import{t as bn}from"./ngxviewbuilder-runtime-phone-input-element-wJDjqRGH.mjs";import{t as gn}from"./ngxviewbuilder-runtime-progress-bar-element-Bdr0kdSH.mjs";import{t as hn}from"./ngxviewbuilder-runtime-radio-element-KF9kHkJV.mjs";import{t as wt}from"./ngxviewbuilder-runtime-rich-text-element-CGJRHzNG.mjs";import{t as fn}from"./ngxviewbuilder-runtime-select-element-kOJtgDmJ.mjs";import{t as yn}from"./ngxviewbuilder-runtime-select-button-element-DM0If-wo.mjs";import{t as xn}from"./ngxviewbuilder-runtime-single-checkbox-element-CCLuAW3g.mjs";import{t as wn}from"./ngxviewbuilder-runtime-slider-element-DA0m8geD.mjs";import{t as _n}from"./ngxviewbuilder-runtime-spacer-element-D4KgGuYS.mjs";import{t as Sn}from"./ngxviewbuilder-runtime-stats-card-element-Bwt5GL25.mjs";import{t as Tn}from"./ngxviewbuilder-runtime-text-element-CVntVjD5.mjs";import{t as Dn}from"./ngxviewbuilder-runtime-textarea-element-DkNUQ3Xk.mjs";import{t as Cn}from"./ngxviewbuilder-runtime-page-title-element-BgA2xImq.mjs";import*as l from"@angular/core";import{ChangeDetectionStrategy as z,ChangeDetectorRef as En,Component as L,ElementRef as _t,HostBinding as B,HostListener as U,Injectable as te,NgZone as kn,ViewChild as In,computed as f,effect as Rn,forwardRef as Mn,inject as p,input as g,signal as b}from"@angular/core";import{JsonPipe as An,NgClass as O,NgComponentOutlet as De,NgStyle as $,NgTemplateOutlet as N}from"@angular/common";function X(d){if(!d||typeof d!=="object")return String(d??"").trim();const e=d;if(String(e["propertyType"]??"").trim()==="tableColumn"){const n=Tt(e["__tableParent"]);const r=String(e["__columnId"]??e["__columnIndex"]??"").trim();const o=String(e["__columnCollection"]??"").trim();const a=St(n);if(!a&&!r&&!o)return"";return`tableColumn:${a}|collection:${o}|column:${r}`}const t=St(e);if(!t)return"";return`element:${t}`}function St(d){if(!d)return"";const e=Tt(d["parentElement"]);return[Y("ownerSchema",e?.["schemaPath"]),Y("ownerUuid",e?.["uuid"]),Y("owner",e?.["name"]??d["parentName"]),Y("schema",d["schemaPath"]),Y("data",d["dataPath"]),Y("path",d["path"]),Y("name",d["name"]),Y("uuid",d["uuid"])].filter(t=>t.length>0).join("|")}function Y(d,e){const t=String(e??"").trim();if(!t)return"";return`${d}:${t}`}function Tt(d){if(!d||typeof d!=="object"||Array.isArray(d))return null;return d}var ze=class Ke{hoveredElementKey=b(null,...ngDevMode?[{debugName:"hoveredElementKey"}]:[]);setHover(e){const t=this.resolveKey(e);if(this.hoveredElementKey()===t)return;this.hoveredElementKey.set(t)}clearHover(e){const t=this.resolveKey(e);if(!t||this.hoveredElementKey()!==t)return;this.hoveredElementKey.set(null)}resolveKey(e){const t=X(e);return t?t:null}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ke,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ke,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ze,decorators:[{type:te,args:[{providedIn:"root"}]}]});var h;(function(d){d["SINGLE_LINE_INPUT"]="singleLineInput";d["CHOICE_INPUT"]="choiceInputs";d["ACTIONS"]="actions";d["CONTAINERS"]="containers";d["CONTENT"]="content";d["TABLES"]="tables";d["OPTIONS"]="options"})(h||(h={}));const Pn=[{label:"Single line inputs",code:h.SINGLE_LINE_INPUT,icon:"input"},{label:"Choice inputs",code:h.CHOICE_INPUT,icon:"done_all"},{label:"Actions",code:h.ACTIONS,icon:"smart_button"},{label:"Containers",code:h.CONTAINERS,icon:"auto_awesome_mosaic"},{label:"Content",code:h.CONTENT,icon:"article"},{label:"Tables",code:h.TABLES,icon:"view_list"}];const On="ngx-view-builder.drag-debug";const Nn="__NGX_VIEW_BUILDER_DRAG_DEBUG__";const Dt="__NGX_VIEW_BUILDER_DRAG_DEBUG_LOGS__";const Ct=new Map;function ie(){const d=He();if(d&&d[Nn]===true)return true;return kt(Et("localStorage"))||kt(Et("sessionStorage"))}function D(d,e,t){if(!ie())return;Vn({timestamp:new Date().toISOString(),scope:d,phase:e,details:t});console.debug(`[NgxViewBuilder DragDebug] ${d}:${e}`,t??{})}function J(d,e,t,n=160){if(!ie())return;const r=`${d}:${e}`;const o=Date.now();if(o-(Ct.get(r)??0)<n)return;Ct.set(r,o);D(d,e,t)}function C(d){if(!d)return{};return{type:d.type,clientX:Number.isFinite(d.clientX)?d.clientX:null,clientY:Number.isFinite(d.clientY)?d.clientY:null,defaultPrevented:d.defaultPrevented,target:le(d.target),currentTarget:le(d.currentTarget),dataTransferTypes:Array.from(d.dataTransfer?.types??[]),effectAllowed:d.dataTransfer?.effectAllowed??"",dropEffect:d.dataTransfer?.dropEffect??""}}function Le(d){if(!d)return{};return{type:d.type,button:d.button,buttons:d.buttons,clientX:Number.isFinite(d.clientX)?d.clientX:null,clientY:Number.isFinite(d.clientY)?d.clientY:null,target:le(d.target),currentTarget:le(d.currentTarget)}}function le(d){if(!d||typeof Element==="undefined"||!(d instanceof Element))return null;const e=String(d.tagName??"").toLowerCase();const t=String(d.id??"").trim();const n=String(d.className??"").trim().split(/\s+/).filter(a=>a.length>0).slice(0,3).join(".");const r=String(d.getAttribute("data-testid")??"").trim();const o=String(d.getAttribute("draggable")??"").trim();return[e,t?`#${t}`:"",n?`.${n}`:"",r?`[${r}]`:"",o?`{draggable=${o}}`:""].filter(a=>a.length>0).join("")}function Vn(d){const e=He();if(!e)return;const t=e[Dt];const n=Array.isArray(t)?[...t]:[];n.push(d);if(n.length>200)n.splice(0,n.length-200);e[Dt]=n}function He(){if(typeof globalThis==="undefined")return null;return globalThis}function Et(d){const e=He();if(!e)return;return e[d]}function kt(d){if(!d)return false;try{const e=String(d.getItem(On)??"").trim().toLowerCase();return e==="1"||e==="true"||e==="on"||e==="yes"}catch{return false}}const zn=/(label|title|description|placeholder|tooltip|message|caption|text)$/i;const Ln=new Set(["dataService","modelService","onElementChanging","onElementChanged","onOptionChanged","onDataSourceChanged","afterDataSourceLoad","parentElement","structureService","errors","_structure","_previewStructure","onStructureChanged"]);var M=class Ue{creatorStructureService;eventService;eventObject;modelService=p(Pe);elementsService=p(re);uiTranslationService=p(ye);constructor(e,t){this.creatorStructureService=e;this.eventService=t;this.attachGlobalDebugListeners()}onRowDrop(e,t,n,r,o){D("drag-and-drop","row-drop-enter",{parentElementName:String(t?.name??"").trim(),rowIndex:Number.isFinite(n)?n:null,position:o??null,...C(e)});const a=this.getTransferData(e);const i=this.resolveDraggedElementName(a);if(i){if(!this.canDropToParent(i,t)){this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}const m=this.findElementLocation(i);const v=this.shouldMoveWholeSourceRow(m);const u=m?this.cloneLayoutFromColumn(m.column):this.extractExistingLayoutSegment(i);this.relocateExistingElementDefinition(i,t,m?.definitionOwner,u);if(m&&v&&Array.isArray(r)&&r===m.parentRows){const _=this.resolveRowInsertIndex(r,n,o,m,true);this.reorderRowsInPlace(r,m.rowIndex,_);this.normalizeRowsLayout(r);this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}const y=this.resolveRowInsertIndex(r,n,o,m,v);if(!this.removeFromLocation(m))this.creatorStructureService.removeFromPage(i);this.addNewRow(r,y,i,u.rows,u.tabRows);this.normalizeRowsLayout(r);this.normalizeRowsLayout(m?.parentRows);this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}const s=this.prepareDropInsert(a);if(!s){this.eventService.onDrop.fire({payload:null});return}this.attachNewElements(t,s.allElements);const c=this.resolveRowInsertIndex(r,n,o);this.addNewRow(r,c,s.rootElement.name,s.nestedRows,s.nestedTabRows);this.normalizeRowsLayout(r);this.eventService.onDrop.fire({payload:this.resolveExistingElement(s.rootElement.name)??s.rootElement})}onColumnDrop(e,t,n,r,o){D("drag-and-drop","column-drop-enter",{parentElementName:String(t?.name??"").trim(),columnIndex:Number.isFinite(n)?n:null,position:o??null,...C(e)});const a=this.getTransferData(e);const i=this.resolveDraggedElementName(a);if(i){if(!this.canDropToParent(i,t)){this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}const m=this.findElementLocation(i);const v=m?this.cloneLayoutFromColumn(m.column):this.extractExistingLayoutSegment(i);this.relocateExistingElementDefinition(i,t,m?.definitionOwner,v);if(m&&Array.isArray(r)&&r===m.parentColumns){const y=this.resolveColumnInsertIndex(r,n,o,m);this.reorderColumnsInPlace(r,m.columnIndex,y);this.rebalanceHorizontalColumnWidths(r);this.normalizeRowsLayout(m.parentRows);this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}if(!this.removeFromLocation(m))this.creatorStructureService.removeFromPage(i);const u=this.resolveColumnInsertIndex(r,n,o,m);this.addNewColumn(r,u,i,v.rows,v.tabRows);this.rebalanceHorizontalColumnWidths(r);this.rebalanceHorizontalColumnWidths(m?.parentColumns);this.normalizeRowsLayout(m?.parentRows);this.eventService.onDrop.fire({payload:this.resolveExistingElement(i)});return}const s=this.prepareDropInsert(a);if(!s){this.eventService.onDrop.fire({payload:null});return}this.attachNewElements(t,s.allElements);const c=this.resolveColumnInsertIndex(r,n,o);this.addNewColumn(r,c,s.rootElement.name,s.nestedRows,s.nestedTabRows);this.rebalanceHorizontalColumnWidths(r);this.normalizeRowsLayout(this.findRowsByColumns(r));this.eventService.onDrop.fire({payload:this.resolveExistingElement(s.rootElement.name)??s.rootElement})}getTransferData(e){if(!e?.dataTransfer){D("drag-and-drop","transfer-missing-datatransfer",{...C(e)});return null}const t=this.readTransferPayload(e.dataTransfer);if(!t){D("drag-and-drop","transfer-empty",{...C(e)});return null}try{const n=JSON.parse(t);D("drag-and-drop","transfer-parsed",{raw:t,parsedType:typeof n,elementName:String(n?.["name"]??"").trim()||null,elementType:String(n?.["type"]??"").trim()||null});return n}catch{D("drag-and-drop","transfer-invalid-json",{raw:t,...C(e)});return null}}duplicateElement(e){const t=String(e??"").trim();const n=this.findElementLocation(t);if(!n)return null;const r=n.definitionOwner;const o=r?.map?.[t]??this.resolveExistingElement(t);if(!o)return null;const a=this.cloneLayoutFromColumn(n.column);const i=new Set([t]);if(!H(o.type)){this.collectElementRefsFromRows(a.rows,i);Object.values(a.tabRows??{}).forEach(m=>this.collectElementRefsFromRows(m??[],i))}const s={};i.forEach(m=>{const v=r?.map?.[m]??this.resolveExistingElement(m);if(v)s[m]=this.createElementSnapshot(v)});const c=this.prepareFromTemplateTransfer({templateElement:s[t],segmentRows:a.rows,segmentTabRows:a.tabRows,segmentElements:s,source:"copy"});if(!c)return null;this.attachNewElements(r?.kind==="template"?r.ownerElement:null,c.allElements);this.placeAfter(n,c);return this.finishInsert(c)}duplicatePage(e){const t=this.creatorStructureService.getStructure();const n=t?.pages??[];const r=n.findIndex(u=>u.name===e);const o=t?.elements?.[e];if(r<0||!o)return null;const a=this.clonePlainValue(n[r].rows??[]);const i=new Set([e]);const s=u=>{(u??[]).forEach(y=>(y?.columns??[]).forEach(_=>{const T=String(_?.elementRef??"").trim();if(!T)return;i.add(T);if(!H(t.elements?.[T]?.type)){s(_.rows??[]);Object.values(_.tabRows??{}).forEach(I=>s(I??[]))}}))};s(a);const c={};i.forEach(u=>{const y=t.elements?.[u];if(y)c[u]=this.createElementSnapshot(y)});const m=String(o.label??"").trim();if(m)c[e]={...c[e],label:`${m} copy`};const v=this.prepareFromTemplateTransfer({templateElement:c[e],segmentRows:a,segmentElements:c,source:"copy"});if(!v)return null;this.attachNewElements(null,v.allElements);t.pages.splice(r+1,0,{name:v.rootElement.name,rows:v.nestedRows});this.eventService.onDrop.fire({payload:null});return v.rootElement.name}insertElement(e,t){const n=this.prepareDropInsert(e);if(!n)return null;const r=String(t.insideName??"").trim();const o=r?this.findElementLocation(r):null;if(o){const s=o.definitionOwner?.map?.[r]??this.resolveExistingElement(r);if(!Array.isArray(o.column.rows))o.column.rows=[];const c=o.column.rows;this.attachNewElements(s,n.allElements);this.addNewRow(c,c.length,n.rootElement.name,n.nestedRows,n.nestedTabRows);this.normalizeRowsLayout(c);return this.finishInsert(n)}const a=String(t.afterName??"").trim();const i=a?this.findElementLocation(a):null;if(i){const s=i.definitionOwner;this.attachNewElements(s?.kind==="template"?s.ownerElement:null,n.allElements);this.placeAfter(i,n,true);return this.finishInsert(n)}if(!Array.isArray(t.rows))return null;this.attachNewElements(t.parentElement??null,n.allElements);this.addNewRow(t.rows,t.rows.length,n.rootElement.name,n.nestedRows,n.nestedTabRows);this.normalizeRowsLayout(t.rows);return this.finishInsert(n)}placeAfter(e,t,n=false){const{rootElement:r,nestedRows:o,nestedTabRows:a}=t;if(!n&&e.parentColumns.length>1){this.addNewColumn(e.parentColumns,e.columnIndex+1,r.name,o,a);this.rebalanceHorizontalColumnWidths(e.parentColumns)}else this.addNewRow(e.parentRows,e.rowIndex+1,r.name,o,a);this.normalizeRowsLayout(e.parentRows)}finishInsert(e){const t=this.resolveExistingElement(e.rootElement.name)??e.rootElement;this.eventService.onDrop.fire({payload:t});return t}createElementSnapshot(e){const t=new WeakSet;const n=r=>{if(r===null||r===void 0||typeof r!=="object")return typeof r==="function"?void 0:r;if(t.has(r))return;t.add(r);if(Array.isArray(r))return r.map(a=>n(a)).filter(a=>a!==void 0);const o={};Object.entries(r).forEach(([a,i])=>{if(Ln.has(a))return;const s=n(i);if(s!==void 0)o[a]=s});return o};return n(e)??{}}addNewRow(e,t,n,r=[],o){if(!Array.isArray(e))return;e.splice(this.clampInsertIndex(t,e.length),0,new oe({uuid:Ht(),columns:[new ut({elementRef:n,rows:r,tabRows:o})]}))}addNewColumn(e,t,n,r=[],o){if(!Array.isArray(e))return;e.splice(this.clampInsertIndex(t,e.length),0,new ut({elementRef:n,rows:r,tabRows:o}))}prepareDropInsert(e){if(!e||typeof e!=="object")return null;if(this.isTemplateTransfer(e))return this.prepareFromTemplateTransfer(e);const t=String(e?.type??"").trim();if(!t)return null;const n=this.creatorStructureService.getNextElementName(t);const r=this.resolveTypeLabel(t)||n;const o=Lt.has(t);const a=this.modelService.createModel(t,{label:o?"":r,...t==="button"?{text:r}:{},name:n,type:t,value:null});return{rootElement:a,nestedRows:[],allElements:{[a.name]:a}}}prepareFromTemplateTransfer(e){const t=e.segmentElements;if(!(t&&typeof t==="object"&&Object.keys(t).length>0)){const u=this.createElementModelFromTemplate(e.templateElement);if(!u)return null;return{rootElement:u,nestedRows:this.clonePlainValue(e.segmentRows??[]),nestedTabRows:e.segmentTabRows?this.clonePlainValue(e.segmentTabRows):void 0,allElements:{[u.name]:u}}}const n=String(e.templateElement?.name??"").trim();if(!n)return null;const r=this.clonePlainValue(t);if(!r[n])r[n]=this.clonePlainValue(e.templateElement);const o=Object.keys(r);const a=this.collectReservedNames();const i={};o.forEach(u=>{i[u]=pt(u,a)});const s={};o.forEach(u=>{const y=this.clonePlainValue(r[u]);this.replaceNameReferencesDeep(y,i);y["name"]=i[u];const _=String(y["type"]??"").trim();if(!_)return;const T=String(y["label"]??"").trim();if(!T||T===u)y["label"]=i[u];const I=this.modelService.createModel(_,y);s[I.name]=I});const c=s[i[n]];if(!c)return null;const m=this.clonePlainValue(e.segmentRows??[]);const v=e.segmentTabRows?this.clonePlainValue(e.segmentTabRows):void 0;return{rootElement:c,nestedRows:this.remapRowsElementRefs(m,i),nestedTabRows:v?this.remapTabRowsElementRefs(v,i):void 0,allElements:s}}resolveDraggedElementName(e){if(!e||typeof e!=="object")return null;if(this.isTemplateTransfer(e))return null;return String(e?.name??"").trim()||null}createElementModelFromTemplate(e){const t=this.clonePlainValue(e);const n=String(t?.["type"]??"").trim();if(!n)return null;const r=String(t?.["name"]??"").trim();const o=r?pt(r,this.collectReservedNames()):this.creatorStructureService.getNextElementName(n);t["name"]=o;const a=String(t?.["label"]??"").trim();if(!a||a===r)t["label"]=o;return this.modelService.createModel(n,t)}attachNewElements(e,t){if(!t||Object.keys(t).length===0)return;const n=this.resolveTargetDefinitionOwner(e);if(n.kind==="template"){Object.values(t).forEach(r=>{if(!r)return;r.parentElement=n.ownerElement;r.isTemplateElement=true;r.templateElementParentDataPath=String(n.ownerElement?.dataPath??"").trim()});n.ownerElement.template={...n.ownerElement.template??{},...t};return}this.creatorStructureService.structure.elements={...this.creatorStructureService.structure.elements,...t}}extractExistingLayoutSegment(e){const t=this.findElementLocation(e);if(t)return this.cloneLayoutFromColumn(t.column);const n=this.creatorStructureService.getStructure()?.pages??[];const r=this.findColumnByElementRefInRows(n.flatMap(o=>o.rows??[]),e);if(!r)return{rows:[]};return{rows:this.clonePlainValue(Array.isArray(r.rows)?r.rows:[]),tabRows:r.tabRows&&typeof r.tabRows==="object"?this.clonePlainValue(r.tabRows):void 0}}findColumnByElementRefInRows(e,t){if(!Array.isArray(e)||!t)return null;for(const n of e){const r=Array.isArray(n?.columns)?n.columns:[];for(const o of r){if(String(o?.elementRef??"").trim()===t)return o;const a=this.findColumnByElementRefInRows(o?.rows??[],t);if(a)return a;const i=o?.tabRows;if(i&&typeof i==="object")for(const s of Object.keys(i)){const c=this.findColumnByElementRefInRows(i[s]??[],t);if(c)return c}}}return null}cloneLayoutFromColumn(e){if(!e)return{rows:[]};return{rows:this.clonePlainValue(Array.isArray(e.rows)?e.rows:[]),tabRows:e.tabRows&&typeof e.tabRows==="object"?this.clonePlainValue(e.tabRows):void 0}}resolveRowInsertIndex(e,t,n,r,o=true){if(!Array.isArray(e))return 0;const a=Number.isFinite(t)?t:e.length;const i=n==="bottom"?a+1:a;let s=i;if(r&&o&&e===r.parentRows&&r.rowIndex<i)s-=1;return this.clampInsertIndex(s,e.length)}shouldMoveWholeSourceRow(e){if(!e)return false;return(Array.isArray(e.parentColumns)?e.parentColumns:[]).length<=1}resolveColumnInsertIndex(e,t,n,r){if(!Array.isArray(e))return 0;const o=Number.isFinite(t)?t:e.length;const a=n==="right"?o+1:o;let i=a;if(r&&e===r.parentColumns&&r.columnIndex<a)i-=1;return this.clampInsertIndex(i,e.length)}clampInsertIndex(e,t){if(!Number.isFinite(e))return Math.max(0,t);if(e<0)return 0;if(e>t)return t;return e}rebalanceHorizontalColumnWidths(e){if(!Array.isArray(e)||e.length<2)return;const t=e.map(r=>this.resolveExistingElement(String(r?.elementRef??"").trim())).filter(r=>Boolean(r));if(t.length!==e.length)return;const n=t.map(r=>this.resolveHorizontalWidthState(r?.width));if(n.some(r=>r.kind==="fixed"))return;if(!this.shouldClearLegacyManagedRow(n,e.length))return;t.forEach(r=>{r.width=void 0;if(this.isAutoColumnWidth(r?.["tabletWidth"]))r["tabletWidth"]=void 0;if(this.isAutoColumnWidth(r?.["mobileWidth"]))r["mobileWidth"]=void 0})}normalizeRowsLayout(e){if(!Array.isArray(e))return;e.forEach(t=>{const n=Array.isArray(t?.columns)?t.columns:[];if(n.length===1){const r=String(n[0]?.elementRef??"").trim();const o=this.resolveExistingElement(r);if(o){if(this.isAutoColumnWidth(o?.width))o.width=void 0;if(this.isAutoColumnWidth(o?.["tabletWidth"]))o["tabletWidth"]=void 0;if(this.isAutoColumnWidth(o?.["mobileWidth"]))o["mobileWidth"]=void 0}return}this.rebalanceHorizontalColumnWidths(n)})}findRowsByColumns(e){if(!Array.isArray(e))return;const t=this.creatorStructureService.getStructure()?.pages??[];for(const n of t){const r=this.findRowsByColumnsInRows(n?.rows??[],e);if(r)return r}}findRowsByColumnsInRows(e,t){if(!Array.isArray(e))return;for(const n of e){if(n?.columns===t)return e;const r=Array.isArray(n?.columns)?n.columns:[];for(const o of r){const a=this.findRowsByColumnsInRows(o?.rows??[],t);if(a)return a;const i=o?.tabRows;if(i&&typeof i==="object")for(const s of Object.keys(i)){const c=this.findRowsByColumnsInRows(i[s]??[],t);if(c)return c}}}}resolveHorizontalWidthState(e){const t=String(e??"").trim().toLowerCase();if(!t||t==="auto")return{kind:"auto"};const n=t.match(/^(-?\d+(?:\.\d+)?)%$/);if(n){const r=Number(n[1]);if(Number.isFinite(r)){if(r>=99.999)return{kind:"auto"};return{kind:"percentage",value:r}}}return{kind:"fixed"}}shouldClearLegacyManagedRow(e,t){if(!Array.isArray(e)||t<2)return false;if(e.some(a=>a.kind==="fixed"))return false;if(e.filter(a=>a.kind==="auto").length>0)return true;const n=e.filter(a=>a.kind==="percentage");if(n.length!==e.length)return false;const r=n.reduce((a,i)=>a+i.value,0);if(r>100.001||r<99.999)return true;const o=100/t;return n.every(a=>Math.abs(a.value-o)<=.2)}isAutoColumnWidth(e){const t=String(e??"").trim().toLowerCase();return!t||t==="auto"||t==="100%"||t==="100.0%"||t==="100.00%"||t==="100.000%"||t==="100.0000%"}findElementLocation(e){const t=String(e??"").trim();if(!t)return null;const n=this.creatorStructureService.getStructure();const r=n?.pages??[];const o={kind:"root",map:n?.elements??{}};for(const a of r){const i=this.findElementLocationInRows(a?.rows??[],t,o);if(i)return i}return null}findElementLocationInRows(e,t,n){if(!Array.isArray(e)||!t)return null;for(let r=0;r<e.length;r+=1){const o=e[r];const a=Array.isArray(o?.columns)?o.columns:[];for(let i=0;i<a.length;i+=1){const s=a[i];const c=String(s?.elementRef??"").trim();const m=this.resolveElementInOwner(c,n);const v=this.resolveChildRowsOwner(m,n);if(String(s?.elementRef??"").trim()===t)return{parentRows:e,parentColumns:a,rowIndex:r,columnIndex:i,column:s,definitionOwner:n?.map?.[t]?n:null};const u=this.findElementLocationInRows(s?.rows??[],t,v);if(u)return u;const y=s?.tabRows;if(y&&typeof y==="object")for(const _ of Object.keys(y)){const T=this.findElementLocationInRows(y[_]??[],t,v);if(T)return T}}}return null}resolveElementInOwner(e,t){const n=String(e??"").trim();if(!n)return null;const r=t?.map?.[n];if(r)return r;return this.resolveExistingElement(n)}resolveChildRowsOwner(e,t){if(!e||!H(e.type))return t;if(!e.template||typeof e.template!=="object")e.template={};return{kind:"template",map:e.template,ownerElement:e}}remapRowsElementRefs(e,t){return(e??[]).map(n=>{const r=n;r.columns=(Array.isArray(r.columns)?r.columns:[]).map(o=>{const a=o;const i=String(a.elementRef??"").trim();if(i&&t[i])a.elementRef=t[i];a.rows=this.remapRowsElementRefs(a.rows??[],t);a.tabRows=a.tabRows?this.remapTabRowsElementRefs(a.tabRows,t):void 0;return a});return r})}remapTabRowsElementRefs(e,t){return Object.keys(e??{}).reduce((n,r)=>{n[r]=this.remapRowsElementRefs(e[r]??[],t);return n},{})}replaceNameReferencesDeep(e,t,n=new WeakSet){if(!e||typeof e!=="object")return;if(n.has(e))return;n.add(e);if(Array.isArray(e)){e.forEach(o=>this.replaceNameReferencesDeep(o,t,n));return}const r=e;Object.keys(r).forEach(o=>{const a=r[o];if(typeof a==="function")return;if(typeof a==="string"){r[o]=zn.test(o)?a.replace(/\{[^{}]*\}/g,i=>this.replaceNamesInString(i,t)):this.replaceNamesInString(a,t);return}this.replaceNameReferencesDeep(a,t,n)})}replaceNamesInString(e,t){return Object.keys(t).reduce((n,r)=>{const o=t[r];if(!r||!o||r===o)return n;if(n===r)return o;const a=this.escapeRegExp(r);const i=new RegExp(`(^|[.\\[{(\\s,:'"=+\\-/*%!<>|&])${a}(?=([.\\]}\\)\\s,:'"=+\\-/*%!<>|&]|$))`,"g");return n.replace(i,`$1${o}`)},String(e??""))}resolveExistingElement(e){const t=this.creatorStructureService.getStructure();if(!t)return null;if(t.elements?.[e])return t.elements[e];const n=r=>{if(!r||typeof r!=="object")return null;const o=r["template"];if(o&&typeof o==="object"){const a=o;if(a[e]&&typeof a[e]==="object")return a[e];for(const i of Object.keys(a)){const s=n(a[i]);if(s)return s}}return null};for(const r of Object.keys(t.elements??{})){const o=n(t.elements[r]);if(o)return o}return null}collectReservedNames(){const e=this.creatorStructureService.getStructure();const t=At(e?.elements);(e?.pages??[]).forEach(n=>t.add(String(n?.name??"")));return t}resolveTypeLabel(e){const t=String(this.elementsService.getElementByType(e)?.label??"").trim();return this.uiTranslationService.translate(`element.${e}`,t||e)}isTemplateTransfer(e){if(!e||typeof e!=="object")return false;const t=e.templateElement;return Boolean(t&&typeof t==="object")}clonePlainValue(e){return Vt(e)}escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}readTransferPayload(e){if(!e)return"";for(const t of["application/json","text/plain","text"]){const n=String(e.getData(t)??"").trim();if(n)return n}return""}attachGlobalDebugListeners(){if(!ie()||typeof window==="undefined")return;const e=["dragstart","dragenter","dragover","drop","dragend"];e.forEach(t=>{window.addEventListener(t,n=>{const r=n;const o={...C(r),target:le(r.target)};if(t==="dragover"||t==="dragenter"){J("window",t,o,180);return}D("window",t,o)},true)});D("window","drag-debug-attached",{events:e})}canDropToParent(e,t){const n=String(e??"").trim();if(!n||!t)return true;let r=t;while(r){const o=String(r?.name??"").trim();if(o&&o===n)return false;r=r["parentElement"]}return true}reorderRowsInPlace(e,t,n){if(!Array.isArray(e)||e.length===0)return;if(!Number.isInteger(t)||t<0||t>=e.length||!Number.isInteger(n))return;if(t===n)return;const[r]=e.splice(t,1);if(!r)return;e.splice(this.clampInsertIndex(n,e.length),0,r)}reorderColumnsInPlace(e,t,n){if(!Array.isArray(e)||e.length===0)return;if(!Number.isInteger(t)||t<0||t>=e.length||!Number.isInteger(n))return;if(t===n)return;const[r]=e.splice(t,1);if(!r)return;e.splice(this.clampInsertIndex(n,e.length),0,r)}removeFromLocation(e){if(!e)return false;const t=e.parentColumns;if(!Array.isArray(t)||e.columnIndex<0||e.columnIndex>=t.length)return false;t.splice(e.columnIndex,1);if(t.length===0&&Array.isArray(e.parentRows)){const n=e.parentRows;if(e.rowIndex>=0&&e.rowIndex<n.length)n.splice(e.rowIndex,1)}return true}relocateExistingElementDefinition(e,t,n,r){const o=String(e??"").trim();if(!o)return;const a=this.resolveSourceDefinitionOwner(o,n);if(!a)return;const i=this.resolveTargetDefinitionOwner(t);if(a.map===i.map){this.removeDuplicateElementDefinitions(o,a.map);return}const s=a.map[o];if(!s)return;const c=this.resolveDefinitionNamesForMove(o,a.map,r);const m=c.reduce((v,u)=>{const y=a.map[u];if(y)v[u]=y;return v},{});if(a.map!==i.map)c.forEach(v=>{if(Object.prototype.hasOwnProperty.call(a.map,v))delete a.map[v]});c.forEach(v=>{const u=v===o?s:m[v];if(!u)return;i.map[v]=u;this.applyDefinitionOwner(u,i);this.removeDuplicateElementDefinitions(v,i.map)})}resolveDefinitionNamesForMove(e,t,n){const r=new Set;const o=String(e??"").trim();if(!o)return[];r.add(o);this.collectElementRefsFromRows(n?.rows??[],r);if(n?.tabRows&&typeof n.tabRows==="object")Object.keys(n.tabRows).forEach(a=>{this.collectElementRefsFromRows(n.tabRows?.[a]??[],r)});return Array.from(r).filter(a=>Boolean(t?.[a]))}collectElementRefsFromRows(e,t){if(!Array.isArray(e))return;e.forEach(n=>{(Array.isArray(n?.columns)?n.columns:[]).forEach(r=>{const o=String(r?.elementRef??"").trim();if(o)t.add(o);this.collectElementRefsFromRows(r?.rows??[],t);const a=r?.tabRows;if(a&&typeof a==="object")Object.keys(a).forEach(i=>{this.collectElementRefsFromRows(a[i]??[],t)})})})}applyDefinitionOwner(e,t){if(!e)return;if(t.kind==="template"){e.parentElement=t.ownerElement;e.isTemplateElement=true;e.templateElementParentDataPath=String(t.ownerElement?.dataPath??"").trim();return}e.isTemplateElement=false;e.parentElement=void 0;e.templateElementParentDataPath=void 0}resolveSourceDefinitionOwner(e,t){if(t?.map?.[e])return t;return this.resolveElementDefinitionOwner(e)}resolveElementDefinitionOwner(e){const t=this.creatorStructureService.getStructure()?.elements??{};const n=this.findElementDefinitionInTemplates(e,t);if(n)return n;if(t[e])return{kind:"root",map:t};return null}resolveTargetDefinitionOwner(e){const t=this.creatorStructureService.getStructure()?.elements??{};let n=e;while(n){if(H(n.type)){if(!n.template||typeof n.template!=="object")n.template={};return{kind:"template",map:n.template,ownerElement:n}}n=n.parentElement}return{kind:"root",map:t}}findElementDefinitionInTemplates(e,t){if(!t||typeof t!=="object")return null;const n=Object.values(t);for(const r of n){if(!r||typeof r!=="object")continue;const o=r.template&&typeof r.template==="object"?r.template:null;if(!o)continue;if(o[e])return{kind:"template",map:o,ownerElement:r};const a=this.findElementDefinitionInTemplates(e,o);if(a)return a}return null}removeDuplicateElementDefinitions(e,t){const n=this.creatorStructureService.getStructure()?.elements??{};const r=o=>{if(!o||typeof o!=="object")return;if(o!==t&&Object.prototype.hasOwnProperty.call(o,e))delete o[e];Object.values(o).forEach(a=>{const i=a?.template&&typeof a.template==="object"?a.template:null;if(i)r(i)})};r(n)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ue,deps:[{token:ft},{token:E}],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ue,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:M,decorators:[{type:te,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:ft},{type:E}]});var V=class Xe{maxScrollStepPx=22;eventService=p(E);containerElement=null;animationFrameId=null;isDragging=b(false,...ngDevMode?[{debugName:"isDragging"}]:[]);activeDirection=b(null,...ngDevMode?[{debugName:"activeDirection"}]:[]);canScrollUp=b(false,...ngDevMode?[{debugName:"canScrollUp"}]:[]);canScrollDown=b(false,...ngDevMode?[{debugName:"canScrollDown"}]:[]);constructor(){this.eventService.onDragStart.add(()=>{this.startDragging()});this.eventService.onDragEnd.add(()=>{this.stopDragging()});this.eventService.onDrop.add(()=>{this.stopDragging()})}registerContainer(e){this.containerElement=e;this.updateScrollAvailability()}unregisterContainer(e){if(!e||this.containerElement===e){this.containerElement=null;this.stopDragging()}}onContainerDragOver(e){if(!this.isDragging())return;e.preventDefault();this.updateScrollAvailability()}onContainerDragLeave(e){if(!this.isDragging())return;const t=e.relatedTarget;if(t&&this.containerElement?.contains(t))return;this.activeDirection.set(null)}onContainerDrop(){this.activeDirection.set(null)}onControlDragOver(e,t){if(!this.isDragging()||!e)return;t.preventDefault();t.stopPropagation();this.updateScrollAvailability();this.activeDirection.set(e)}onControlDragLeave(e,t){if(!this.isDragging())return;const n=t.currentTarget;const r=t.relatedTarget;if(n&&r&&n.contains(r))return;if(this.activeDirection()===e)this.activeDirection.set(null)}startDragging(){if(typeof window==="undefined"||typeof window.requestAnimationFrame!=="function")return;if(this.isDragging())return;this.isDragging.set(true);this.activeDirection.set(null);this.startAnimationLoop()}stopDragging(){this.isDragging.set(false);this.activeDirection.set(null);this.stopAnimationLoop();this.updateScrollAvailability()}startAnimationLoop(){if(this.animationFrameId!==null||typeof window==="undefined")return;const e=()=>{this.runAutoScrollStep();if(!this.isDragging()){this.animationFrameId=null;return}this.animationFrameId=window.requestAnimationFrame(e)};this.animationFrameId=window.requestAnimationFrame(e)}stopAnimationLoop(){if(this.animationFrameId===null||typeof window==="undefined")return;window.cancelAnimationFrame(this.animationFrameId);this.animationFrameId=null}runAutoScrollStep(){const e=this.containerElement;if(!e){this.activeDirection.set(null);return}this.updateScrollAvailability();if(!this.isDragging()){this.activeDirection.set(null);return}const t=this.activeDirection();if(!t){this.activeDirection.set(null);return}if(t==="up"&&!this.canScrollUp()||t==="down"&&!this.canScrollDown()){this.activeDirection.set(null);return}e.scrollTop+=t==="up"?-this.maxScrollStepPx:this.maxScrollStepPx;this.updateScrollAvailability()}updateScrollAvailability(){const e=this.containerElement;if(!e){this.canScrollUp.set(false);this.canScrollDown.set(false);return}const t=Math.max(0,e.scrollHeight-e.clientHeight);this.canScrollUp.set(e.scrollTop>0);this.canScrollDown.set(e.scrollTop<t)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Xe,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Xe,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:V,decorators:[{type:te,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});function P(d){if(!Array.isArray(d)||d.length===0)return false;return d.some(e=>{return(Array.isArray(e?.["columns"])?e["columns"]??[]:[]).some(t=>String(t?.["elementRef"]??"").trim().length>0)})}var Hn=Z({AccordionElement:()=>Ce});var Ce=class Ye{itemTemplateScopeId=`nvb-accordion-template-${Math.random().toString(36).slice(2,11)}`;itemTemplateScopeSelector=`[data-nvb-template-scope="${this.itemTemplateScopeId}"]`;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-accordion","accordion");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);activeItemValue=b("",...ngDevMode?[{debugName:"activeItemValue"}]:[]);dataVersion=b(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);hoveredElementName=null;dragAutoScrollService=p(V);dataService=p(j);eventService=p(E);expressionService=p(Q);dragAndDropService=p(M);elementActionService=p(we);ngxViewBuilderApiService=p(Se);templateEngineService=p(ae);visibleItems=f(()=>{this.dataVersion();return this.computeVisibleItems()},...ngDevMode?[{debugName:"visibleItems"}]:[]);itemTemplateSource=f(()=>{this.dataVersion();const e=this.templateEngineService.resolveTemplateContentByName(String(this.model()?.itemTemplateName??"").trim(),String(this.model()?.itemTemplate??"").trim());return this.normalizeTemplate(e)},...ngDevMode?[{debugName:"itemTemplateSource"}]:[]);hasItemTemplate=f(()=>this.itemTemplateSource()!==null,...ngDevMode?[{debugName:"hasItemTemplate"}]:[]);itemTemplateCss=f(()=>{const e=this.itemTemplateSource();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.itemTemplateScopeSelector)},...ngDevMode?[{debugName:"itemTemplateCss"}]:[]);itemTemplateStyleKey=f(()=>{return`accordion:${String(this.model()?.name??"").trim()||this.itemTemplateScopeId}:item-template-css`},...ngDevMode?[{debugName:"itemTemplateStyleKey"}]:[]);onDragStartHandler=()=>{this.dropOverlay.set(true)};onDragEndHandler=()=>{this.dropOverlay.set(false)};onDropHandler=()=>{this.dropOverlay.set(false);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.ensureValidActiveItem()};propertyChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.ensureValidActiveItem()};ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.initializeItemRowsStorage();this.initializeActiveItem();this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onDrop.add(this.onDropHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler)}ngOnDestroy(){this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onDrop.remove(this.onDropHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler)}hasContentRows(){this.dataVersion();return P(this.column()?.rows)}buildRowsTemplateContext(){const e=this.templateContext();return{...e??{},rows:Array.isArray(this.column()?.rows)?this.column().rows:[],parentElement:e?.["parentElement"]??this.model()}}resolveItemIdentity(e,t){return this.resolveItemValue(e,t)||`section-${t+1}`}resolveItemButtonId(e,t){return this.buildDomId("nvb-accordion-button",this.resolveItemIdentity(e,t),t)}resolveItemPanelId(e,t){return this.buildDomId("nvb-accordion-panel",this.resolveItemIdentity(e,t),t)}resolveItemLabel(e,t){const n=String(e?.label??"").trim();if(n)return n;return`Section ${t+1}`}resolveItemValue(e,t){const n=String(e?.id??"").trim();if(n)return n;const r=String(e?.value??"").trim();if(r)return r;return`section${t+1}`}isActiveItem(e,t){return this.activeItemValue()===this.resolveItemValue(e,t)}renderItemTemplate(e,t){const n=this.itemTemplateSource();if(!n)return"";return this.templateEngineService.renderTemplate(n,this.buildItemTemplateContext(e,t))}isItemDisabled(e){return this.evaluateCondition(e?.disabledIf,false)}onItemClick(e,t,n){n.preventDefault();n.stopPropagation();if(this.isInteractionLocked())return;if(this.isItemDisabled(e))return;const r=this.resolveItemValue(e,t);const o=this.activeItemValue();if(!r)return;if(o===r){if(!this.model().allowMultiple)return;this.persistRowsForItem(o);this.activeItemValue.set("");if(this.column())this.column().rows=[];if(!this.isEditor())this.syncActiveItemToData("");this.ngxViewBuilderApiService.notifyAccordionItemToggled({elementName:String(this.model().name??""),elementDataPath:String(this.model().dataPath??""),element:this.model(),itemIndex:t,itemValue:o,expanded:false});return}this.persistRowsForItem(o);this.activeItemValue.set(r);this.activateRowsForItem(r);if(!this.isEditor())this.syncActiveItemToData(r);this.ngxViewBuilderApiService.notifyAccordionItemToggled({elementName:String(this.model().name??""),elementDataPath:String(this.model().dataPath??""),element:this.model(),itemIndex:t,itemValue:r,expanded:true});const a={previousValue:o,value:r,index:t,item:e};const i=String(this.model().name??"").trim();if(i)a[i]=r;if(!this.isEditor())this.elementActionService.runActions(this.model(),this.model().events??[],"change",a)}onDragOver(e){e.preventDefault();this.hoveredElementName=this.model().name}onDragLeave(e){e.preventDefault();this.hoveredElementName=null}onDrop(e){if(!this.isEditor()&&this.isInteractionLocked())return;e.preventDefault();this.ensureActiveItemRowsReference();if(!Array.isArray(this.column()?.rows))this.column().rows=[];if(this.column().rows.length===0)this.column().rows.push(new oe({columns:[]}));const t=this.column().rows[0];const n=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onColumnDrop(e,n,-1,t.columns,"right");this.hoveredElementName=null}initializeActiveItem(){const e=this.dataService.getValue(this.resolveActiveItemPath());if(typeof e==="string"&&e.trim())this.activeItemValue.set(e.trim());this.ensureValidActiveItem()}buildItemTemplateContext(e,t){const n=this.resolveItemValue(e,t);const r={...this.dataService.getData()??{},item:e,row:e,value:e,itemValue:n,label:this.resolveItemLabel(e,t),description:String(e?.value??"").trim(),index:t,active:this.isActiveItem(e,t),selected:this.isActiveItem(e,t),disabled:this.isItemDisabled(e),element:this.model()};const o=String(this.model()?.name??"").trim();if(o)r[o]=n;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveItemTemplateFieldMap())}resolveItemTemplateFieldMap(){const e=this.model();const t=e["itemTemplateFieldMap"];if(t&&typeof t==="object"&&!Array.isArray(t))return t;const n=e["templateFieldMap"];return n&&typeof n==="object"&&!Array.isArray(n)?n:null}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();return n==="null"||n==="undefined"?null:t}ensureValidActiveItem(){const e=this.computeVisibleItems();if(!e.length){this.persistRowsForItem(this.activeItemValue());this.activeItemValue.set("");if(!this.isEditor())this.syncActiveItemToData("");return}const t=e.map((i,s)=>this.resolveItemValue(i,s));const n=this.activeItemValue();if(n&&t.includes(n)){this.activateRowsForItem(n);return}if(!n&&!this.model().openFirst&&!this.isEditor()){if(this.column())this.column().rows=[];if(!this.isEditor())this.syncActiveItemToData("");return}const r=e.findIndex(i=>!this.isItemDisabled(i));const o=r>=0?r:0;const a=this.resolveItemValue(e[o],o);this.persistRowsForItem(n);this.activeItemValue.set(a);this.activateRowsForItem(a);if(!this.isEditor())this.syncActiveItemToData(a)}initializeItemRowsStorage(){const e=this.column();if(!e)return;const t=this.getAllItems();const n=this.ensureItemRowsStorage();const r=Array.isArray(e.rows)?e.rows:[];if(!Object.values(n).some(o=>P(o))&&t.length>0&&P(r)){const o=this.resolveItemValue(t[0],0);n[o]=r}t.forEach((o,a)=>{const i=this.resolveItemValue(o,a);if(!Array.isArray(n[i]))n[i]=[]})}ensureActiveItemRowsReference(){const e=String(this.activeItemValue()??"").trim();if(!e)return;this.activateRowsForItem(e)}ensureItemRowsStorage(){const e=this.column();if(!e)return{};if(!e.tabRows||typeof e.tabRows!=="object")e.tabRows={};return e.tabRows}persistRowsForItem(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureItemRowsStorage();r[n]=Array.isArray(t.rows)?t.rows:[]}activateRowsForItem(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureItemRowsStorage();if(!Array.isArray(r[n]))r[n]=[];t.rows=r[n]}getAllItems(){return Array.isArray(this.model()?.items)?this.model().items:[]}computeVisibleItems(){return(Array.isArray(this.model()?.items)?this.model().items:[]).filter(e=>this.evaluateCondition(e?.visibleIf,true))}evaluateCondition(e,t){const n=this.normalizeConditionExpression(e);if(!n)return t;try{const r=this.expressionService.applyContextToExpression(n,this.model());const o=this.expressionService.runPropertyConditionSync(this.dataService.getData()??{},r);return Boolean(o)}catch{return t}}normalizeConditionExpression(e){return String(e??"").replace(/\{([^}]+)\}/g,(t,n)=>String(n??"").trim()).trim()}resolveActiveItemPath(){return`__accordion.${String(this.model()?.name??"accordion").trim()||"accordion"}.active`}syncActiveItemToData(e){this.dataService.setValue(this.resolveActiveItemPath(),e)}buildDomId(e,t,n){return`${e}-${String(t??"").trim().toLowerCase().replace(/[^a-z0-9_-]+/g,"-").replace(/^-+|-+$/g,"")||n+1}`}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ye,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:Ye,isStandalone:true,selector:"accordion-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"<div class=\"nvb-accordion\" [attr.data-testid]=\"tid('root')\">\n  @if (itemTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"itemTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"itemTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\n    <article\n      class=\"nvb-accordion__item\"\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\n      [attr.data-testid]=\"tid('section', resolveItemIdentity(item, itemIndex))\"\n    >\n      <button\n        type=\"button\"\n        class=\"nvb-accordion__header\"\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\n        [disabled]=\"isItemDisabled(item)\"\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\n        [attr.data-testid]=\"tid('item', resolveItemIdentity(item, itemIndex))\"\n        (click)=\"onItemClick(item, itemIndex, $event)\"\n      >\n        @if (hasItemTemplate()) {\n          <span\n            class=\"nvb-accordion__template\"\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\n          ></span>\n        } @else {\n          <span class=\"nvb-accordion__label\">{{\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\n          }}</span>\n        }\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\n      </button>\n\n      @if (isActiveItem(item, itemIndex)) {\n        <section\n          class=\"nvb-accordion__content\"\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\n          [attr.data-testid]=\"tid('content', resolveItemIdentity(item, itemIndex))\"\n        >\n          @if (hasContentRows()) {\n            @if (rowsTemplate(); as templateRef) {\n              <ng-container\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n              ></ng-container>\n            } @else {\n              <ng-content></ng-content>\n            }\n          } @else if (isEditor()) {\n            <div\n              class=\"nvb-accordion__placeholder\"\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\n              [attr.data-testid]=\"tid('empty-builder', resolveItemIdentity(item, itemIndex))\"\n            >\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\n\n              @if (dropOverlay()) {\n                <div\n                  class=\"nvb-accordion__drop-overlay\"\n                  (dragover)=\"onDragOver($event)\"\n                  (dragleave)=\"onDragLeave($event)\"\n                  (drop)=\"onDrop($event)\"\n                ></div>\n              }\n            </div>\n          } @else if (item.value) {\n            <div\n              class=\"nvb-accordion__item-description\"\n              [attr.data-testid]=\"tid('description', resolveItemIdentity(item, itemIndex))\"\n            >\n              {{ item.value | dynamicText: model() }}\n            </div>\n          }\n        </section>\n      }\n    </article>\n  } @empty {\n    <div class=\"nvb-accordion__empty\">\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--nvb-color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--nvb-color-neutral-050) 84%,var(--nvb-color-neutral-000)) 0%,var(--nvb-color-neutral-000) 100%);color:var(--nvb-color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,var(--nvb-color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--nvb-color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--nvb-color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--nvb-color-primary-500) 5%,var(--nvb-color-neutral-000));transform-origin:top}.nvb-accordion__content--empty{padding:0}@media(prefers-reduced-motion:reduce){.nvb-accordion__arrow{transition:none}}.nvb-accordion__item-description{padding:0;color:var(--nvb-color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--nvb-color-neutral-500);font-size:12px}\n"],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"component",type:F,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:A,name:"dynamicText"},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ce,decorators:[{type:L,args:[{selector:"accordion-element",changeDetection:z.OnPush,imports:[O,N,A,k,F],host:{...ee},template:"<div class=\"nvb-accordion\" [attr.data-testid]=\"tid('root')\">\n  @if (itemTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"itemTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"itemTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\n    <article\n      class=\"nvb-accordion__item\"\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\n      [attr.data-testid]=\"tid('section', resolveItemIdentity(item, itemIndex))\"\n    >\n      <button\n        type=\"button\"\n        class=\"nvb-accordion__header\"\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\n        [disabled]=\"isItemDisabled(item)\"\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\n        [attr.data-testid]=\"tid('item', resolveItemIdentity(item, itemIndex))\"\n        (click)=\"onItemClick(item, itemIndex, $event)\"\n      >\n        @if (hasItemTemplate()) {\n          <span\n            class=\"nvb-accordion__template\"\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\n          ></span>\n        } @else {\n          <span class=\"nvb-accordion__label\">{{\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\n          }}</span>\n        }\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\n      </button>\n\n      @if (isActiveItem(item, itemIndex)) {\n        <section\n          class=\"nvb-accordion__content\"\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\n          [attr.data-testid]=\"tid('content', resolveItemIdentity(item, itemIndex))\"\n        >\n          @if (hasContentRows()) {\n            @if (rowsTemplate(); as templateRef) {\n              <ng-container\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n              ></ng-container>\n            } @else {\n              <ng-content></ng-content>\n            }\n          } @else if (isEditor()) {\n            <div\n              class=\"nvb-accordion__placeholder\"\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\n              [attr.data-testid]=\"tid('empty-builder', resolveItemIdentity(item, itemIndex))\"\n            >\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\n\n              @if (dropOverlay()) {\n                <div\n                  class=\"nvb-accordion__drop-overlay\"\n                  (dragover)=\"onDragOver($event)\"\n                  (dragleave)=\"onDragLeave($event)\"\n                  (drop)=\"onDrop($event)\"\n                ></div>\n              }\n            </div>\n          } @else if (item.value) {\n            <div\n              class=\"nvb-accordion__item-description\"\n              [attr.data-testid]=\"tid('description', resolveItemIdentity(item, itemIndex))\"\n            >\n              {{ item.value | dynamicText: model() }}\n            </div>\n          }\n        </section>\n      }\n    </article>\n  } @empty {\n    <div class=\"nvb-accordion__empty\">\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--nvb-color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--nvb-color-neutral-050) 84%,var(--nvb-color-neutral-000)) 0%,var(--nvb-color-neutral-000) 100%);color:var(--nvb-color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,var(--nvb-color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--nvb-color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--nvb-color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--nvb-color-primary-500) 5%,var(--nvb-color-neutral-000));transform-origin:top}.nvb-accordion__content--empty{padding:0}@media(prefers-reduced-motion:reduce){.nvb-accordion__arrow{transition:none}}.nvb-accordion__item-description{padding:0;color:var(--nvb-color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--nvb-color-neutral-500);font-size:12px}\n"]}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}]}});var se=class Je{elementFocusService;eventService;dragAndDropService;templateScopeId=`nvb-panel-header-template-${Math.random().toString(36).slice(2,11)}`;templateScopeSelector=`[data-nvb-template-scope="${this.templateScopeId}"]`;model=g(...ngDevMode?[void 0,{debugName:"model"}]:[]);tid=G(this.model,"nvb-panel","panel");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);isEmpty=b(true,...ngDevMode?[{debugName:"isEmpty"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);rows=g(null,...ngDevMode?[{debugName:"rows"}]:[]);focusedElementName=b(null,...ngDevMode?[{debugName:"focusedElementName"}]:[]);renderVersion=b(0,...ngDevMode?[{debugName:"renderVersion"}]:[]);hoveredElementName=null;dragAutoScrollService=p(V);dataService=p(j);templateEngineService=p(ae);onElementFocusHandler=e=>{this.focusedElementName.set(this.resolveFocusKey(e.payload))};onDragStartHandler=()=>{this.dropOverlay.set(true)};onDragEndHandler=()=>{this.dropOverlay.set(false)};onDropHandler=()=>{this.dropOverlay.set(false);this.bumpRenderVersion()};valueChangedHandler=()=>{this.bumpRenderVersion()};dataMutatedHandler=()=>{this.bumpRenderVersion()};propertyChangedHandler=()=>{this.bumpRenderVersion()};hasHeaderContent=f(()=>{const e=String(this.model()?.label??"").trim();const t=String(this.model()?.description??"").trim();return e.length>0||t.length>0||this.normalizedHeaderTemplate()!==null},...ngDevMode?[{debugName:"hasHeaderContent"}]:[]);normalizedHeaderTemplate=f(()=>{this.renderVersion();return this.normalizeTemplate(this.templateEngineService.resolveTemplateContentByName(this.resolveHeaderTemplateName(),this.resolveHeaderTemplateMarkupFallback()))},...ngDevMode?[{debugName:"normalizedHeaderTemplate"}]:[]);renderedHeaderTemplate=f(()=>{this.renderVersion();const e=this.normalizedHeaderTemplate();if(!e)return{html:"",cssText:""};return this.templateEngineService.renderTemplateWithCss(e,this.buildHeaderTemplateRuntimeContext())},...ngDevMode?[{debugName:"renderedHeaderTemplate"}]:[]);headerTemplateHtml=f(()=>this.renderedHeaderTemplate().html,...ngDevMode?[{debugName:"headerTemplateHtml"}]:[]);headerTemplateCss=f(()=>{const e=this.normalizedHeaderTemplate();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.templateScopeSelector)},...ngDevMode?[{debugName:"headerTemplateCss"}]:[]);styleOutletKey=f(()=>{return`panel:${String(this.model()?.name??"").trim()||this.templateScopeId}:header-template-css`},...ngDevMode?[{debugName:"styleOutletKey"}]:[]);constructor(e,t,n){this.elementFocusService=e;this.eventService=t;this.dragAndDropService=n}ngOnInit(){this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.eventService.onElementFocus.add(this.onElementFocusHandler);this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onDrop.add(this.onDropHandler);this.dataService.onValueChanged.add(this.valueChangedHandler);this.dataService.onDataMutated.add(this.dataMutatedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler);this.isEmpty.set(!this.column()?.rows);this.bumpRenderVersion()}ngOnDestroy(){this.eventService.onElementFocus.remove(this.onElementFocusHandler);this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onDrop.remove(this.onDropHandler);this.dataService.onValueChanged.remove(this.valueChangedHandler);this.dataService.onDataMutated.remove(this.dataMutatedHandler);this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler)}onFocus(e){this.elementFocusService.setFocus(this.model());this.focusedElementName.set(this.resolveFocusKey(this.model()))}resolveFocusKey(e){return X(e)}onDragOver(e){e.preventDefault();e.stopPropagation();ge.clearActiveDragOverlay();this.hoveredElementName=this.model().name}onDragLeav(e){e.preventDefault();e.stopPropagation();this.hoveredElementName=null}onDrop(e){this.column().rows=[];e.preventDefault();e.stopPropagation();const t=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onRowDrop(e,t,0,this.column().rows,"top");this.hoveredElementName=null}hasContentRows(){this.renderVersion();return P(this.column()?.rows)}async onHeaderTemplateClick(e){await this.templateEngineService.handleTemplateClickEvent(e,this.buildHeaderTemplateRuntimeContext(),this.model())}section(){return jt(this.model())}panelStyle(){const e=this.section();if(e.active)return e.style;const t=this.model()?.["showBorder"]!==false;const n=this.normalizeCssSize(this.model()?.["panelBorderWidth"]);const r=this.normalizeCssColor(this.model()?.["panelBorderColor"]);const o=this.normalizeCssSize(this.model()?.["maxHeight"]);const a=this.normalizeCssSize(this.model()?.["panelPadding"]);const i=this.normalizeCssSize(this.model()?.["mobilePadding"]);return{width:"100%","max-height":o,padding:this.isMobileView()||this.isRealMobileViewport()?i||a:a,"border-radius":this.normalizeCssSize(this.model()?.["panelRadius"]),"box-shadow":this.normalizeCssShadow(this.model()?.["panelShadow"]),"background-color":this.normalizeCssColor(this.model()?.["panelBackgroundColor"]),"border-width":t?n:"0","border-style":t?n?"solid":null:"none","border-color":t?r:"transparent"}}hasScrollableMaxHeight(){return Boolean(this.normalizeCssSize(this.model()?.["maxHeight"]))}headerStyle(){const e=Boolean(this.model()?.["titleUnderline"]);const t=e?this.normalizeCssSize(this.model()?.["titleUnderlineWidth"]??1):null;return{"border-bottom-width":t,"border-bottom-style":t?"solid":null,"border-bottom-color":e?this.normalizeCssColor(this.model()?.["titleUnderlineColor"])||"var(--nvb-color-neutral-300)":null,"padding-bottom":t?"8px":null,"margin-bottom":t?"8px":null}}contentStyle(){return{"justify-content":this.normalizeJustify(this.model()?.["contentJustify"]),"align-items":this.normalizeAlign(this.model()?.["contentAlign"]),gap:this.normalizeCssSize(this.model()?.["contentGap"])}}normalizeCssColor(e){return String(e??"").trim()||null}normalizeCssShadow(e){return String(e??"").trim()||null}normalizeJustify(e){return String(e??"").trim()||null}normalizeAlign(e){return String(e??"").trim()||null}normalizeCssSize(e){const t=String(e??"").trim();if(!t)return null;if(/^-?\d+(\.\d+)?$/.test(t))return`${t}px`;return t}isRealMobileViewport(){if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return _e()}buildHeaderTemplateRuntimeContext(){const e=this.model();const t=e?.value??null;const n=t&&typeof t==="object"?t:{};const r={...this.dataService.getData()??{},value:t,item:n,rows:this.column()?.rows??[],element:e,panel:e,label:e?.label??"",description:e?.description??""};const o=String(e?.name??"").trim();if(o)r[o]=t;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveHeaderTemplateFieldMap())}resolveHeaderTemplateFieldMap(){const e=this.model()?.["headerTemplateFieldMap"];return e&&typeof e==="object"&&!Array.isArray(e)?e:null}resolveHeaderTemplateName(){const e=this.model();return String(e?.["headerTemplateName"]??e?.["headerTemplateRef"]??"").trim()}resolveHeaderTemplateMarkupFallback(){const e=this.model();return String(e?.["headerTemplate"]??e?.["headerTemplateHtml"]??e?.["headerTemplateMarkup"]??"").trim()}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();if(n==="null"||n==="undefined")return null;return t}bumpRenderVersion(){this.renderVersion.update(e=>e+1)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Je,deps:[{token:K},{token:E},{token:M}],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:Je,isStandalone:true,selector:"panel-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null},rows:{classPropertyName:"rows",publicName:"rows",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"@if (headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n<div\n  class=\"nvb-panel\"\n  [class.nvb-panel--scrollable]=\"hasScrollableMaxHeight()\"\n  [class.nvb-panel--section]=\"section().active\"\n  [class.nvb-section-theme-dark]=\"section().active && section().theme === 'dark'\"\n  [attr.data-testid]=\"tid('root')\"\n  [ngStyle]=\"panelStyle()\"\n>\n  @if (hasHeaderContent()) {\n    <header\n      class=\"nvb-panel__header\"\n      [class.nvb-panel__header--templated]=\"!!headerTemplateHtml()\"\n      [ngStyle]=\"headerStyle()\"\n      [attr.data-testid]=\"tid('header')\"\n    >\n      @if (model()?.label) {\n        <h4 class=\"nvb-panel__header-heading\">\n          {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n        </h4>\n      }\n      @if (model()?.description) {\n        <p class=\"nvb-panel__header-description\">\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </p>\n      }\n      @if (headerTemplateHtml()) {\n        <div [attr.data-testid]=\"tid('header-template')\"\n          class=\"nvb-panel__header-template\"\n          [attr.data-nvb-template-scope]=\"templateScopeId\"\n          [innerHTML]=\"headerTemplateHtml()\"\n          (click)=\"onHeaderTemplateClick($event)\"\n        ></div>\n      }\n    </header>\n  }\n\n  <div class=\"nvb-panel__body\" [attr.data-testid]=\"tid('body')\">\n    @if (hasContentRows()) {\n      <div class=\"nvb-panel__content\" [ngStyle]=\"contentStyle()\" [attr.data-testid]=\"tid('content')\">\n        <ng-content></ng-content>\n      </div>\n    } @else {\n      <div\n        class=\"nvb-empty-panel\"\n        [class.nvb-empty-panel--overlay]=\"hoveredElementName === model().name\"\n        role=\"region\"\n        [attr.aria-label]=\"\n          'panel.emptyBuilder' | uiT: 'Add elements from the left menu to build content'\n        \"\n        [attr.data-testid]=\"tid('empty')\"\n      >\n        <nvb-icon class=\"nvb-empty-panel__icon\" name=\"note_stack_add\"></nvb-icon>\n        <p class=\"nvb-empty-panel__text\">\n          {{ 'panel.emptyBuilder' | uiT: 'Add elements from the left menu to build content' }}\n        </p>\n        <span class=\"nvb-sr-only\">\n          {{\n            'builder.dropHint'\n              | uiT\n                : 'Drop an element here. In the builder, use keyboard focus and contextual actions when drag and drop is not convenient.'\n          }}\n        </span>\n        @if (dropOverlay()) {\n          <div\n            class=\"nvb-drop-overlay\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeav($event)\"\n            (drop)=\"onDrop($event)\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",styles:[".nvb-panel{box-sizing:border-box;min-width:0;max-width:100%;border:1px solid var(--nvb-card-border-color);border-style:solid;border-radius:var(--nvb-card-radius);overflow:hidden;display:flex;flex-direction:column;background:var(--nvb-card-bg);color:var(--nvb-color-neutral-800);box-shadow:var(--nvb-card-shadow)}.nvb-panel__header{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--nvb-color-neutral-200);min-width:0;background:var(--nvb-color-neutral-000)}.nvb-panel__header--templated{padding:0}.nvb-panel__header-heading{margin:0;font-size:var(--nvb-text-subtitle2);line-height:22px;color:var(--nvb-color-neutral-900)}.nvb-panel__header-description{margin:0;color:color-mix(in oklab,var(--nvb-color-neutral-600) 86%,var(--nvb-color-surface-mix-target, white));font-size:var(--nvb-text-body1);line-height:20px}.nvb-panel__header-template{width:100%;min-width:0}.nvb-panel--focused{outline:0;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 54%,var(--nvb-color-neutral-300));box-shadow:var(--nvb-focus-ring)}.nvb-panel__body{display:flex;flex-direction:column;padding:10px 12px;min-width:0}.nvb-panel__content{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;z-index:1;padding:0;overflow:visible}.nvb-panel--scrollable{display:flex;flex-direction:column;min-height:0;overflow:hidden}.nvb-panel--scrollable .nvb-panel__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.nvb-panel--scrollable .nvb-panel__content,.nvb-panel--scrollable .nvb-empty-panel{flex:1 1 auto;min-height:0;overflow:visible}.nvb-empty-panel{box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));padding:clamp(16px,5vw,40px);display:flex;position:relative;justify-content:center;align-items:center;flex-direction:column;gap:8px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-200);text-align:center}.nvb-empty-panel__icon{font-size:clamp(40px,10vw,60px);color:var(--nvb-color-neutral-600)}.nvb-empty-panel__text{color:var(--nvb-color-neutral-600);font-size:var(--nvb-text-body1);line-height:20px;margin:0;overflow-wrap:anywhere}.nvb-empty-panel--overlay{border-color:var(--nvb-color-primary-500);background-color:color-mix(in oklab,var(--nvb-color-primary-050) 68%,var(--nvb-color-neutral-000));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 42%,transparent)}.nvb-drop-overlay{position:absolute;z-index:var(--nvb-builder-z-inner-drop-overlay, 50);width:100%;height:90%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"],dependencies:[{kind:"directive",type:$,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:F,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"component",type:W,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:k,name:"uiT"},{kind:"pipe",type:A,name:"dynamicText"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:se,decorators:[{type:L,args:[{selector:"panel-element",changeDetection:z.OnPush,imports:[k,A,$,F,W],host:{...ee},template:"@if (headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n<div\n  class=\"nvb-panel\"\n  [class.nvb-panel--scrollable]=\"hasScrollableMaxHeight()\"\n  [class.nvb-panel--section]=\"section().active\"\n  [class.nvb-section-theme-dark]=\"section().active && section().theme === 'dark'\"\n  [attr.data-testid]=\"tid('root')\"\n  [ngStyle]=\"panelStyle()\"\n>\n  @if (hasHeaderContent()) {\n    <header\n      class=\"nvb-panel__header\"\n      [class.nvb-panel__header--templated]=\"!!headerTemplateHtml()\"\n      [ngStyle]=\"headerStyle()\"\n      [attr.data-testid]=\"tid('header')\"\n    >\n      @if (model()?.label) {\n        <h4 class=\"nvb-panel__header-heading\">\n          {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n        </h4>\n      }\n      @if (model()?.description) {\n        <p class=\"nvb-panel__header-description\">\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </p>\n      }\n      @if (headerTemplateHtml()) {\n        <div [attr.data-testid]=\"tid('header-template')\"\n          class=\"nvb-panel__header-template\"\n          [attr.data-nvb-template-scope]=\"templateScopeId\"\n          [innerHTML]=\"headerTemplateHtml()\"\n          (click)=\"onHeaderTemplateClick($event)\"\n        ></div>\n      }\n    </header>\n  }\n\n  <div class=\"nvb-panel__body\" [attr.data-testid]=\"tid('body')\">\n    @if (hasContentRows()) {\n      <div class=\"nvb-panel__content\" [ngStyle]=\"contentStyle()\" [attr.data-testid]=\"tid('content')\">\n        <ng-content></ng-content>\n      </div>\n    } @else {\n      <div\n        class=\"nvb-empty-panel\"\n        [class.nvb-empty-panel--overlay]=\"hoveredElementName === model().name\"\n        role=\"region\"\n        [attr.aria-label]=\"\n          'panel.emptyBuilder' | uiT: 'Add elements from the left menu to build content'\n        \"\n        [attr.data-testid]=\"tid('empty')\"\n      >\n        <nvb-icon class=\"nvb-empty-panel__icon\" name=\"note_stack_add\"></nvb-icon>\n        <p class=\"nvb-empty-panel__text\">\n          {{ 'panel.emptyBuilder' | uiT: 'Add elements from the left menu to build content' }}\n        </p>\n        <span class=\"nvb-sr-only\">\n          {{\n            'builder.dropHint'\n              | uiT\n                : 'Drop an element here. In the builder, use keyboard focus and contextual actions when drag and drop is not convenient.'\n          }}\n        </span>\n        @if (dropOverlay()) {\n          <div\n            class=\"nvb-drop-overlay\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeav($event)\"\n            (drop)=\"onDrop($event)\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</div>\n",styles:[".nvb-panel{box-sizing:border-box;min-width:0;max-width:100%;border:1px solid var(--nvb-card-border-color);border-style:solid;border-radius:var(--nvb-card-radius);overflow:hidden;display:flex;flex-direction:column;background:var(--nvb-card-bg);color:var(--nvb-color-neutral-800);box-shadow:var(--nvb-card-shadow)}.nvb-panel__header{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--nvb-color-neutral-200);min-width:0;background:var(--nvb-color-neutral-000)}.nvb-panel__header--templated{padding:0}.nvb-panel__header-heading{margin:0;font-size:var(--nvb-text-subtitle2);line-height:22px;color:var(--nvb-color-neutral-900)}.nvb-panel__header-description{margin:0;color:color-mix(in oklab,var(--nvb-color-neutral-600) 86%,var(--nvb-color-surface-mix-target, white));font-size:var(--nvb-text-body1);line-height:20px}.nvb-panel__header-template{width:100%;min-width:0}.nvb-panel--focused{outline:0;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 54%,var(--nvb-color-neutral-300));box-shadow:var(--nvb-focus-ring)}.nvb-panel__body{display:flex;flex-direction:column;padding:10px 12px;min-width:0}.nvb-panel__content{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;z-index:1;padding:0;overflow:visible}.nvb-panel--scrollable{display:flex;flex-direction:column;min-height:0;overflow:hidden}.nvb-panel--scrollable .nvb-panel__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.nvb-panel--scrollable .nvb-panel__content,.nvb-panel--scrollable .nvb-empty-panel{flex:1 1 auto;min-height:0;overflow:visible}.nvb-empty-panel{box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));padding:clamp(16px,5vw,40px);display:flex;position:relative;justify-content:center;align-items:center;flex-direction:column;gap:8px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-200);text-align:center}.nvb-empty-panel__icon{font-size:clamp(40px,10vw,60px);color:var(--nvb-color-neutral-600)}.nvb-empty-panel__text{color:var(--nvb-color-neutral-600);font-size:var(--nvb-text-body1);line-height:20px;margin:0;overflow-wrap:anywhere}.nvb-empty-panel--overlay{border-color:var(--nvb-color-primary-500);background-color:color-mix(in oklab,var(--nvb-color-primary-050) 68%,var(--nvb-color-neutral-000));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 42%,transparent)}.nvb-drop-overlay{position:absolute;z-index:var(--nvb-builder-z-inner-drop-overlay, 50);width:100%;height:90%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"]}]}],ctorParameters:()=>[{type:K},{type:E},{type:M}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:false}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}],rows:[{type:l.Input,args:[{isSignal:true,alias:"rows",required:false}]}]}});var Fn=Z({DialogElement:()=>de});var de=class Ze{templateScopeId=`nvb-dialog-header-template-${Math.random().toString(36).slice(2,11)}`;templateScopeSelector=`[data-nvb-template-scope="${this.templateScopeId}"]`;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-dialog","dialog");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);isEditor=b(true,...ngDevMode?[{debugName:"isEditor"}]:[]);isOpen=b(true,...ngDevMode?[{debugName:"isOpen"}]:[]);isClosing=b(false,...ngDevMode?[{debugName:"isClosing"}]:[]);currentMode=b("modal",...ngDevMode?[{debugName:"currentMode"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);hoveredElementName=null;triggerText=f(()=>{const e=String(this.model()?.triggerText??"").trim();if(e)return e;const t=String(this.model()?.label??"").trim();if(t)return t;return""},...ngDevMode?[{debugName:"triggerText"}]:[]);triggerIcon=f(()=>String(this.model()?.triggerIcon??"").trim(),...ngDevMode?[{debugName:"triggerIcon"}]:[]);renderVersion=b(0,...ngDevMode?[{debugName:"renderVersion"}]:[]);hasHeaderContent=f(()=>{const e=String(this.model()?.label??"").trim();const t=String(this.model()?.description??"").trim();return e.length>0||t.length>0||this.normalizedHeaderTemplate()!==null||Boolean(this.model()?.showCloseButton)},...ngDevMode?[{debugName:"hasHeaderContent"}]:[]);normalizedHeaderTemplate=f(()=>{this.renderVersion();return this.normalizeTemplate(this.templateEngineService.resolveTemplateContentByName(this.resolveHeaderTemplateName(),this.resolveHeaderTemplateMarkupFallback()))},...ngDevMode?[{debugName:"normalizedHeaderTemplate"}]:[]);renderedHeaderTemplate=f(()=>{this.renderVersion();const e=this.normalizedHeaderTemplate();if(!e)return{html:"",cssText:""};return this.templateEngineService.renderTemplateWithCss(e,this.buildHeaderTemplateRuntimeContext())},...ngDevMode?[{debugName:"renderedHeaderTemplate"}]:[]);headerTemplateHtml=f(()=>this.renderedHeaderTemplate().html,...ngDevMode?[{debugName:"headerTemplateHtml"}]:[]);headerTemplateCss=f(()=>{const e=this.normalizedHeaderTemplate();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.templateScopeSelector)},...ngDevMode?[{debugName:"headerTemplateCss"}]:[]);styleOutletKey=f(()=>{return`dialog:${String(this.model()?.name??"").trim()||this.templateScopeId}:header-template-css`},...ngDevMode?[{debugName:"styleOutletKey"}]:[]);hasTriggerIcon=f(()=>this.triggerIcon().length>0,...ngDevMode?[{debugName:"hasTriggerIcon"}]:[]);triggerIconPosition=f(()=>{return String(this.model()?.triggerIconPosition??"left").trim().toLowerCase()==="right"?"right":"left"},...ngDevMode?[{debugName:"triggerIconPosition"}]:[]);isTriggerIconOnly=f(()=>{if(Boolean(this.model()?.triggerIconOnly)&&this.hasTriggerIcon())return true;const e=String(this.model()?.triggerText??"").trim();return this.hasTriggerIcon()&&e.length===0&&!String(this.model()?.label??"").trim()},...ngDevMode?[{debugName:"isTriggerIconOnly"}]:[]);showTriggerText=f(()=>!this.isTriggerIconOnly(),...ngDevMode?[{debugName:"showTriggerText"}]:[]);triggerButtonClass=f(()=>{const e=String(this.model()?.triggerVariant??"solid").trim().toLowerCase();const t=["nvb-dialog-trigger__button"];if(e==="outline")t.push("nvb-dialog-trigger__button--outline");else if(e==="text")t.push("nvb-dialog-trigger__button--text");else t.push("nvb-dialog-trigger__button--solid");if(this.hasTriggerIcon())t.push("nvb-dialog-trigger__button--with-icon");t.push(this.triggerIconPosition()==="right"?"nvb-dialog-trigger__button--icon-right":"nvb-dialog-trigger__button--icon-left");if(this.isTriggerIconOnly())t.push("nvb-dialog-trigger__button--icon-only");return t.join(" ")},...ngDevMode?[{debugName:"triggerButtonClass"}]:[]);triggerButtonStyle=f(()=>{const e=String(this.model()?.triggerColor??"").trim();const t=String(this.model()?.triggerTextColor??"").trim();const n=this.resolveTriggerWidth();const r={};if(e)r["--nvb-dialog-trigger-color"]=e;if(t)r["--nvb-dialog-trigger-text-color"]=t;if(n){r["width"]=n;r["max-width"]="100%"}return r},...ngDevMode?[{debugName:"triggerButtonStyle"}]:[]);triggerContainerClass=f(()=>{const e=String(this.model()?.triggerAlign??"left").trim().toLowerCase();const t=["nvb-dialog-trigger-container"];if(e==="center")t.push("nvb-dialog-trigger-container--center");else if(e==="right")t.push("nvb-dialog-trigger-container--right");else t.push("nvb-dialog-trigger-container--left");return t.join(" ")},...ngDevMode?[{debugName:"triggerContainerClass"}]:[]);shouldRenderTriggerButton=f(()=>this.isEditor()||this.model()?.showTriggerButton!==false,...ngDevMode?[{debugName:"shouldRenderTriggerButton"}]:[]);dataService=p(j);eventService=p(E);dragAndDropService=p(M);dragAutoScrollService=p(V);expressionService=p(Q);elementActionService=p(we);templateEngineService=p(ae);hostElement=p(_t);lastTriggerElement=null;closeAnimationTimeoutId=null;closeAnimationDurationMs=180;onDragStartHandler=()=>{this.dropOverlay.set(true)};onDragEndHandler=()=>{this.dropOverlay.set(false)};onDropHandler=()=>{this.dropOverlay.set(false);this.bumpRenderVersion()};onDataValueChangedHandler=()=>{if(!this.isEditor())this.syncOpenStateFromData();this.bumpRenderVersion()};onDataMutationHandler=()=>{if(!this.isEditor())this.syncOpenStateFromData();this.bumpRenderVersion()};onPropertyChangedHandler=()=>{this.bumpRenderVersion()};ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());if(this.isEditor())this.isOpen.set(true);else this.initializeRuntimeState();this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onDrop.add(this.onDropHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.dataService.onDataMutated.add(this.onDataMutationHandler);this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler);this.bumpRenderVersion()}ngOnDestroy(){this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onDrop.remove(this.onDropHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.dataService.onDataMutated.remove(this.onDataMutationHandler);this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler);if(this.closeAnimationTimeoutId!==null){clearTimeout(this.closeAnimationTimeoutId);this.closeAnimationTimeoutId=null}if(this.isEditor())return;this.isOpen.set(false);this.dataService.setValue(this.resolveOpenPath(),false);this.syncDialogStatePath(false);this.resetValuesOnDialogClosed()}onEscapePressed(){if(this.isEditor()||!this.isOpen())return;this.close("blur")}onBackdropClick(){if(this.isInteractionLocked())return;if(this.isEditor())return;if(!this.model()?.closeOnBackdrop)return;this.close("change")}onCloseClick(e){if(this.isInteractionLocked())return;if(this.isEditor())return;e.preventDefault();e.stopPropagation();this.close("change")}onToggleFullscreenClick(e){if(this.isInteractionLocked()||this.isEditor())return;e.preventDefault();e.stopPropagation();this.currentMode.update(t=>t==="fullscreen"?"modal":"fullscreen")}onOpenClick(e){if(this.isInteractionLocked())return;e.preventDefault();e.stopPropagation();this.lastTriggerElement=e.currentTarget;this.clearCloseAnimation();this.isOpen.set(true);this.resetDialogMode();this.dataService.setValue(this.resolveOpenPath(),true);this.syncDialogStatePath(true);this.runDialogActions("click",true);queueMicrotask(()=>this.focusFirstDialogControl())}onEditorTriggerPreviewClick(e){e.preventDefault();e.stopPropagation()}async onHeaderTemplateClick(e){await this.templateEngineService.handleTemplateClickEvent(e,this.buildHeaderTemplateRuntimeContext(),this.model())}onDragOver(e){e.preventDefault();e.stopPropagation();this.hoveredElementName=this.model().name}onDragLeave(e){e.preventDefault();e.stopPropagation();this.hoveredElementName=null}onDrop(e){if(!this.isEditor()&&this.isInteractionLocked())return;const t=this.column();if(!t)return;t.rows=[];e.preventDefault();e.stopPropagation();const n=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onRowDrop(e,n,0,t.rows,"top");this.hoveredElementName=null}shouldRenderRuntimeDialog(){if(this.isEditor())return true;return this.isOpen()||this.isClosing()}shellClass(){const e=this.currentMode();return{"nvb-dialog--modal":e==="modal","nvb-dialog--fullscreen":e==="fullscreen","nvb-dialog--closing":this.isClosing()}}dialogStyle(){const e=this.currentMode();const t=this.normalizeSize(this.model()?.dialogWidth)??"720px";const n=this.normalizeSize(this.model()?.dialogMaxWidth)??"94vw";const r=this.normalizeSize(this.model()?.dialogHeight);return{width:e==="fullscreen"?"100vw":t,"max-width":e==="fullscreen"?"100vw":n,height:e==="fullscreen"?"100vh":r}}dialogTitleDomId(){return this.buildDialogDomId("title")}dialogDescriptionDomId(){return this.buildDialogDomId("description")}dialogTitleId(){return String(this.model()?.label??"").trim()?this.dialogTitleDomId():null}dialogDescriptionId(){return String(this.model()?.description??"").trim()?this.dialogDescriptionDomId():null}dialogFallbackLabel(){return this.triggerText()||String(this.model()?.name??"").trim()||"Dialog"}hasContentRows(){this.renderVersion();return P(this.column()?.rows)}buildRowsTemplateContext(){const e={rows:this.column()?.rows??[],parentElement:this.model()};const t=this.templateContext();if(!t||typeof t!=="object")return e;return{...e,...t}}initializeRuntimeState(){const e=this.resolveOpenPath();const t=Boolean(this.model()?.initiallyOpen);this.resetDialogMode();this.isOpen.set(t);this.dataService.setValue(e,t);this.syncDialogStatePath(t);if(!t)this.resetValuesOnDialogClosed();this.applyOpenIfCondition()}syncOpenStateFromData(){const e=this.resolveOpenPath();const t=this.dataService.getValue(e);if(typeof t==="boolean"){if(t&&!this.isOpen())this.resetDialogMode();this.isOpen.set(t);this.syncDialogStatePath(t);if(!t&&!this.isClosing())this.resetValuesOnDialogClosed()}this.applyOpenIfCondition()}applyOpenIfCondition(){const e=String(this.model()?.openIf??"").trim();if(!e)return;try{const t=this.expressionService.applyContextToExpression(e.replace(/{/g,"").replace(/}/g,"").trim(),this.model());const n=Boolean(this.expressionService.runPropertyConditionSync(this.dataService.getData(),t));this.isOpen.set(n);this.dataService.setValue(this.resolveOpenPath(),n);this.syncDialogStatePath(n);if(!n&&!this.isClosing())this.resetValuesOnDialogClosed()}catch{}}close(e){if(this.isInteractionLocked())return;this.isOpen.set(false);this.resetDialogMode();this.beginCloseAnimation();this.dataService.setValue(this.resolveOpenPath(),false);this.syncDialogStatePath(false);this.runDialogActions(e,false);this.restoreTriggerFocus()}beginCloseAnimation(){if(this.isEditor()){this.resetValuesOnDialogClosed();return}this.clearCloseAnimation();this.isClosing.set(true);this.closeAnimationTimeoutId=setTimeout(()=>{this.isClosing.set(false);this.closeAnimationTimeoutId=null;this.resetValuesOnDialogClosed()},this.closeAnimationDurationMs)}clearCloseAnimation(){if(this.closeAnimationTimeoutId!==null){clearTimeout(this.closeAnimationTimeoutId);this.closeAnimationTimeoutId=null}this.isClosing.set(false)}focusFirstDialogControl(){if(this.isEditor()||!this.isOpen())return;const e=this.hostElement.nativeElement.querySelector(".nvb-dialog__window");if(!e)return;(e.querySelector(["button:not([disabled])","[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","))??e).focus({preventScroll:true})}restoreTriggerFocus(){const e=this.lastTriggerElement;this.lastTriggerElement=null;if(!e||typeof e.focus!=="function")return;queueMicrotask(()=>e.focus({preventScroll:true}))}buildDialogDomId(e){return`nvb-dialog-${(String(this.model()?.name??this.templateScopeId).trim()||this.templateScopeId).toLowerCase().replace(/[^a-z0-9_-]+/g,"-").replace(/^-+|-+$/g,"")||this.templateScopeId}-${e}`}resolveOpenPath(){const e=String(this.model()?.openDataPath??"").trim();if(e)return e;return`__dialog.${String(this.model()?.name??"dialog").trim()||"dialog"}.open`}resolveStatePath(){const e=String(this.model()?.stateDataPath??"").trim();if(e)return e;return`__dialog.${String(this.model()?.name??"dialog").trim()||"dialog"}.state`}async syncDialogStatePath(e){await this.dataService.setValue(this.resolveStatePath(),e?"open":"closed")}async resetValuesOnDialogClosed(){await this.expressionService.resetValuesOnHide(this.model())}normalizeSize(e){const t=String(e??"").trim();if(!t)return null;if(/^-?\d+(\.\d+)?$/.test(t))return`${t}px`;return t}resolveTriggerWidth(){const e=this.normalizeSize(this.model()?.triggerMobileWidth);const t=this.normalizeSize(this.model()?.triggerWidth);return this.isMobileView()||this.isRealMobileViewport()?e||t:t}isRealMobileViewport(){if(typeof window==="undefined")return false;return window.innerWidth<=767}async runDialogActions(e,t){const n={value:t,item:null,row:null};const r=String(this.model().name??"").trim();if(r)n[r]=t;await this.elementActionService.runActions(this.model(),this.model().events??[],e,n)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}buildHeaderTemplateRuntimeContext(){const e=this.model();const t=e?.value??null;const n={...this.dataService.getData()??{},value:t,rows:this.column()?.rows??[],element:e,dialog:e,label:e?.label??"",description:e?.description??""};const r=String(e?.name??"").trim();if(r)n[r]=t;return n}resolveHeaderTemplateName(){return String(this.model()?.headerTemplateName??"").trim()}resolveHeaderTemplateMarkupFallback(){return String(this.model()?.headerTemplate??"").trim()}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();if(n==="null"||n==="undefined")return null;return t}bumpRenderVersion(){this.renderVersion.update(e=>e+1)}resetDialogMode(){const e=String(this.model()?.dialogMode??"modal").trim().toLowerCase();this.currentMode.set(e==="fullscreen"?"fullscreen":"modal")}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ze,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:Ze,isStandalone:true,selector:"dialog-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null}},host:{listeners:{"document:keydown.escape":"onEscapePressed()"},properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"@if (!isEditor() && headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n@if (isEditor()) {\n  <section class=\"nvb-dialog-editor\" [attr.data-testid]=\"tid('editor-root')\">\n    @if (shouldRenderTriggerButton()) {\n      <div [class]=\"triggerContainerClass()\">\n        <button\n          type=\"button\"\n          [class]=\"triggerButtonClass()\"\n          [ngStyle]=\"triggerButtonStyle()\"\n          (click)=\"onEditorTriggerPreviewClick($event)\"\n          tabindex=\"-1\"\n          [attr.data-testid]=\"tid('editor-trigger')\"\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n        >\n          @if (hasTriggerIcon()) {\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\n              triggerIcon()\n            }}</span>\n          }\n          @if (showTriggerText()) {\n            <span class=\"nvb-dialog-trigger__text\">\n              @if (triggerText()) {\n                {{ triggerText() | dynamicText: model() }}\n              } @else {\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\n      @if (rowsTemplate(); as templateRef) {\n        <ng-container\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n        ></ng-container>\n      }\n    </panel-element>\n  </section>\n} @else {\n  @if (shouldRenderTriggerButton()) {\n    <div [class]=\"triggerContainerClass()\">\n      <button\n        type=\"button\"\n        [class]=\"triggerButtonClass()\"\n        [disabled]=\"isInteractionLocked()\"\n        [ngStyle]=\"triggerButtonStyle()\"\n        (click)=\"onOpenClick($event)\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n      >\n        @if (hasTriggerIcon()) {\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\n            triggerIcon()\n          }}</span>\n        }\n        @if (showTriggerText()) {\n          <span class=\"nvb-dialog-trigger__text\">\n            @if (triggerText()) {\n              {{ triggerText() | dynamicText: model() }}\n            } @else {\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\n            }\n          </span>\n        }\n      </button>\n    </div>\n  }\n\n  @if (shouldRenderRuntimeDialog()) {\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" [attr.data-testid]=\"tid('root')\">\n      <div\n        class=\"nvb-dialog__backdrop\"\n        (click)=\"onBackdropClick()\"\n        [attr.data-testid]=\"tid('backdrop')\"\n      ></div>\n\n      <section\n        class=\"nvb-dialog__window\"\n        [ngStyle]=\"dialogStyle()\"\n        [attr.data-testid]=\"tid('window')\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-modal]=\"\n          currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\n        \"\n        [attr.aria-labelledby]=\"dialogTitleId()\"\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\n      >\n        @if (hasHeaderContent()) {\n          <header class=\"nvb-dialog__header\">\n            <div class=\"nvb-dialog__heading\">\n              @if (model()?.label) {\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\n                  {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n                </div>\n              }\n              @if (model()?.description) {\n                <p [id]=\"dialogDescriptionDomId()\">\n                  {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n                </p>\n              }\n              @if (headerTemplateHtml()) {\n                <div [attr.data-testid]=\"tid('header-template')\"\n                  class=\"nvb-dialog__header-template\"\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\n                  [innerHTML]=\"headerTemplateHtml()\"\n                  (click)=\"onHeaderTemplateClick($event)\"\n                ></div>\n              }\n            </div>\n\n            <div class=\"nvb-dialog__header-actions\">\n              @if (model()?.allowFullscreenToggle) {\n                <button [attr.data-testid]=\"tid('exit-fullscreen')\"\n                  type=\"button\"\n                  class=\"nvb-dialog__close\"\n                  (click)=\"onToggleFullscreenClick($event)\"\n                  [title]=\"\n                    currentMode() === 'fullscreen'\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\n                  \"\n                  [attr.aria-label]=\"\n                    currentMode() === 'fullscreen'\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\n                  \"\n                >\n                  <span class=\"material-symbols-outlined\">{{\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\n                  }}</span>\n                </button>\n              }\n\n              @if (model()?.showCloseButton) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-dialog__close\"\n                  (click)=\"onCloseClick($event)\"\n                  [attr.data-testid]=\"tid('close')\"\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\n                >\n                  <span class=\"material-symbols-outlined\">close</span>\n                </button>\n              }\n            </div>\n          </header>\n        }\n\n        <div class=\"nvb-dialog__body\" [attr.data-testid]=\"tid('body')\">\n          @if (hasContentRows()) {\n            @if (rowsTemplate(); as templateRef) {\n              <ng-container\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n              ></ng-container>\n            }\n          }\n        </div>\n      </section>\n    </div>\n  }\n}\n",styles:[":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-dialog__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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--nvb-color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--nvb-color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--nvb-color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--nvb-color-primary-050);border-color:var(--nvb-color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--nvb-radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:$,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"component",type:se,selector:"panel-element",inputs:["model","column","isMobileView","rows"]},{kind:"component",type:F,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:A,name:"dynamicText"},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:de,decorators:[{type:L,args:[{selector:"dialog-element",changeDetection:z.OnPush,imports:[O,$,N,A,k,se,F],host:{...ee},template:"@if (!isEditor() && headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n@if (isEditor()) {\n  <section class=\"nvb-dialog-editor\" [attr.data-testid]=\"tid('editor-root')\">\n    @if (shouldRenderTriggerButton()) {\n      <div [class]=\"triggerContainerClass()\">\n        <button\n          type=\"button\"\n          [class]=\"triggerButtonClass()\"\n          [ngStyle]=\"triggerButtonStyle()\"\n          (click)=\"onEditorTriggerPreviewClick($event)\"\n          tabindex=\"-1\"\n          [attr.data-testid]=\"tid('editor-trigger')\"\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n        >\n          @if (hasTriggerIcon()) {\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\n              triggerIcon()\n            }}</span>\n          }\n          @if (showTriggerText()) {\n            <span class=\"nvb-dialog-trigger__text\">\n              @if (triggerText()) {\n                {{ triggerText() | dynamicText: model() }}\n              } @else {\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\n      @if (rowsTemplate(); as templateRef) {\n        <ng-container\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n        ></ng-container>\n      }\n    </panel-element>\n  </section>\n} @else {\n  @if (shouldRenderTriggerButton()) {\n    <div [class]=\"triggerContainerClass()\">\n      <button\n        type=\"button\"\n        [class]=\"triggerButtonClass()\"\n        [disabled]=\"isInteractionLocked()\"\n        [ngStyle]=\"triggerButtonStyle()\"\n        (click)=\"onOpenClick($event)\"\n        [attr.data-testid]=\"tid('trigger')\"\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\n      >\n        @if (hasTriggerIcon()) {\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\n            triggerIcon()\n          }}</span>\n        }\n        @if (showTriggerText()) {\n          <span class=\"nvb-dialog-trigger__text\">\n            @if (triggerText()) {\n              {{ triggerText() | dynamicText: model() }}\n            } @else {\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\n            }\n          </span>\n        }\n      </button>\n    </div>\n  }\n\n  @if (shouldRenderRuntimeDialog()) {\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" [attr.data-testid]=\"tid('root')\">\n      <div\n        class=\"nvb-dialog__backdrop\"\n        (click)=\"onBackdropClick()\"\n        [attr.data-testid]=\"tid('backdrop')\"\n      ></div>\n\n      <section\n        class=\"nvb-dialog__window\"\n        [ngStyle]=\"dialogStyle()\"\n        [attr.data-testid]=\"tid('window')\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-modal]=\"\n          currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\n        \"\n        [attr.aria-labelledby]=\"dialogTitleId()\"\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\n      >\n        @if (hasHeaderContent()) {\n          <header class=\"nvb-dialog__header\">\n            <div class=\"nvb-dialog__heading\">\n              @if (model()?.label) {\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\n                  {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n                </div>\n              }\n              @if (model()?.description) {\n                <p [id]=\"dialogDescriptionDomId()\">\n                  {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n                </p>\n              }\n              @if (headerTemplateHtml()) {\n                <div [attr.data-testid]=\"tid('header-template')\"\n                  class=\"nvb-dialog__header-template\"\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\n                  [innerHTML]=\"headerTemplateHtml()\"\n                  (click)=\"onHeaderTemplateClick($event)\"\n                ></div>\n              }\n            </div>\n\n            <div class=\"nvb-dialog__header-actions\">\n              @if (model()?.allowFullscreenToggle) {\n                <button [attr.data-testid]=\"tid('exit-fullscreen')\"\n                  type=\"button\"\n                  class=\"nvb-dialog__close\"\n                  (click)=\"onToggleFullscreenClick($event)\"\n                  [title]=\"\n                    currentMode() === 'fullscreen'\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\n                  \"\n                  [attr.aria-label]=\"\n                    currentMode() === 'fullscreen'\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\n                  \"\n                >\n                  <span class=\"material-symbols-outlined\">{{\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\n                  }}</span>\n                </button>\n              }\n\n              @if (model()?.showCloseButton) {\n                <button\n                  type=\"button\"\n                  class=\"nvb-dialog__close\"\n                  (click)=\"onCloseClick($event)\"\n                  [attr.data-testid]=\"tid('close')\"\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\n                >\n                  <span class=\"material-symbols-outlined\">close</span>\n                </button>\n              }\n            </div>\n          </header>\n        }\n\n        <div class=\"nvb-dialog__body\" [attr.data-testid]=\"tid('body')\">\n          @if (hasContentRows()) {\n            @if (rowsTemplate(); as templateRef) {\n              <ng-container\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n              ></ng-container>\n            }\n          }\n        </div>\n      </section>\n    </div>\n  }\n}\n",styles:[":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-dialog__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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--nvb-color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--nvb-color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--nvb-color-neutral-050);border-color:var(--nvb-color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--nvb-color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--nvb-color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--nvb-color-primary-050);border-color:var(--nvb-color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--nvb-radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--nvb-color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"]}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}],onEscapePressed:[{type:U,args:["document:keydown.escape"]}]}});var Ee=class Qe{eventService;dragAndDropService;dragAutoScrollService;dragDebugEnabled=ie();onDragStartHandler=()=>{this.dropOverlay=true};onDragEndHandler=()=>{this.dropOverlay=false};onDropHandler=()=>{this.dropOverlay=false};onAfterPropertyChangedHandler=()=>{this.updateGroupedLockState()};model=g(null,...ngDevMode?[{debugName:"model"}]:[]);rows=g(null,...ngDevMode?[{debugName:"rows"}]:[]);index=g(null,...ngDevMode?[{debugName:"index"}]:[]);rowTestToken(){const e=this.model()?.columns?.find(t=>t?.elementRef)?.elementRef;return Bt(e)||String(this.index()??"")}isTemplateElement=g(false,...ngDevMode?[{debugName:"isTemplateElement"}]:[]);rowLength=g(null,...ngDevMode?[{debugName:"rowLength"}]:[]);parentPath=g([],...ngDevMode?[{debugName:"parentPath"}]:[]);parentElement=g(null,...ngDevMode?[{debugName:"parentElement"}]:[]);dropOverlay=false;dropIndicator=p(qe);hoveredTopElementName=null;hoveredBottomElementName=null;groupedLocked=false;constructor(e,t,n){this.eventService=e;this.dragAndDropService=t;this.dragAutoScrollService=n}get rowJustifyContent(){return String(this.parentElement()?.["contentJustify"]??"").trim()||null}get rowAlignItems(){return String(this.parentElement()?.["contentAlign"]??"").trim()||null}get rowGap(){const e=String(this.parentElement()?.["contentGap"]??"").trim();if(!e)return null;if(/^-?\d+(\.\d+)?$/.test(e))return`${e}px`;return e}get rowDisplay(){return String(this.parentElement()?.["contentDisplay"]??"").trim().toLowerCase()==="grid"?"grid":"flex"}get rowFlexDirection(){if(this.rowDisplay!=="flex")return null;return String(this.parentElement()?.["flexDirection"]??"").trim().toLowerCase()==="column"?"column":"row"}get rowFlexWrap(){return this.rowDisplay==="flex"?"wrap":null}get rowGridTemplateColumns(){if(this.rowDisplay!=="grid")return null;return String(this.parentElement()?.["gridTemplateColumns"]??"").trim()||null}get rowGridAutoRows(){if(this.rowDisplay!=="grid")return null;return String(this.parentElement()?.["gridAutoRows"]??"").trim()||null}ngOnInit(){this.dropOverlay=this.dragAutoScrollService.isDragging();this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onDrop.add(this.onDropHandler);this.eventService.afterPropertyChanged.add(this.onAfterPropertyChangedHandler);this.updateGroupedLockState()}ngOnDestroy(){this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onDrop.remove(this.onDropHandler);this.eventService.afterPropertyChanged.remove(this.onAfterPropertyChangedHandler)}showTopDropGutter(){return Number(this.index())===0}onDragOverTop(e){if(this.isGroupedLocked())return;e.preventDefault();e.stopPropagation();J("row","dragover-top",{rowUuid:String(this.model()?.uuid??""),...C(e)});this.hoveredTopElementName=this.model().uuid;this.hoveredBottomElementName=null;this.dropIndicator.setTarget(this,this.parentElement())}onDragLeavTop(e){if(this.isGroupedLocked())return;e.preventDefault();e.stopPropagation();this.hoveredTopElementName=null;this.dropIndicator.clearTarget(this)}onDropTop(e){if(this.isGroupedLocked()){e.preventDefault();return}e.preventDefault();e.stopPropagation();D("row","drop-top",{rowUuid:String(this.model()?.uuid??""),...C(e)});this.dragAndDropService.onRowDrop(e,this.parentElement(),this.index(),this.rows(),"top");this.hoveredTopElementName=null;this.hoveredBottomElementName=null}onDragOverBottom(e){if(this.isGroupedLocked())return;e.preventDefault();e.stopPropagation();J("row","dragover-bottom",{rowUuid:String(this.model()?.uuid??""),...C(e)});this.hoveredBottomElementName=this.model().uuid;this.hoveredTopElementName=null;this.dropIndicator.setTarget(this,this.parentElement())}onDragLeavBottom(e){if(this.isGroupedLocked())return;e.preventDefault();e.stopPropagation();this.hoveredBottomElementName=null;this.dropIndicator.clearTarget(this)}onDropBottom(e){if(this.isGroupedLocked()){e.preventDefault();return}e.preventDefault();e.stopPropagation();D("row","drop-bottom",{rowUuid:String(this.model()?.uuid??""),...C(e)});this.dragAndDropService.onRowDrop(e,this.parentElement(),this.index(),this.rows(),"bottom");this.hoveredTopElementName=null;this.hoveredBottomElementName=null}isTopDropActive(){return this.hoveredTopElementName===this.model()?.uuid}isBottomDropActive(){return this.hoveredBottomElementName===this.model()?.uuid}isGroupedLocked(){return false}updateGroupedLockState(){this.groupedLocked=false}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Qe,deps:[{token:E},{token:M},{token:V}],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:Qe,isStandalone:true,selector:"row",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null},rows:{classPropertyName:"rows",publicName:"rows",isSignal:true,isRequired:false,transformFunction:null},index:{classPropertyName:"index",publicName:"index",isSignal:true,isRequired:false,transformFunction:null},isTemplateElement:{classPropertyName:"isTemplateElement",publicName:"isTemplateElement",isSignal:true,isRequired:false,transformFunction:null},rowLength:{classPropertyName:"rowLength",publicName:"rowLength",isSignal:true,isRequired:false,transformFunction:null},parentPath:{classPropertyName:"parentPath",publicName:"parentPath",isSignal:true,isRequired:false,transformFunction:null},parentElement:{classPropertyName:"parentElement",publicName:"parentElement",isSignal:true,isRequired:false,transformFunction:null}},ngImport:l,template:"@if (dropOverlay && !isGroupedLocked() && showTopDropGutter()) {\n  <div\n    class=\"nvb-row-drop-gutter nvb-row-drop-gutter--top\"\n    [attr.data-testid]=\"'builder-row-drop-top-' + rowTestToken()\"\n    [ngClass]=\"{\n      'nvb-row-drop-gutter--active': isTopDropActive(),\n      'nvb-row-drop-gutter--debug': dragDebugEnabled,\n    }\"\n    (dragover)=\"onDragOverTop($event)\"\n    (dragleave)=\"onDragLeavTop($event)\"\n    (drop)=\"onDropTop($event)\"\n  >\n    @if (isTopDropActive() && dropIndicator.draggedLabel()) {\n      <span class=\"nvb-row-drop-gutter__label\">{{ dropIndicator.draggedLabel() }}</span>\n    }\n  </div>\n}\n\n<div\n  class=\"nvb-row-content\"\n  [attr.data-testid]=\"'builder-row-' + rowTestToken()\"\n  [style.display]=\"rowDisplay\"\n  [style.flex-direction]=\"rowFlexDirection\"\n  [style.flex-wrap]=\"rowFlexWrap\"\n  [style.grid-template-columns]=\"rowGridTemplateColumns\"\n  [style.grid-auto-rows]=\"rowGridAutoRows\"\n  [style.justify-content]=\"rowJustifyContent\"\n  [style.align-items]=\"rowAlignItems\"\n  [style.gap]=\"rowGap\"\n>\n  <ng-content></ng-content>\n</div>\n\n@if (dropOverlay && !isGroupedLocked()) {\n  <div\n    class=\"nvb-row-drop-gutter nvb-row-drop-gutter--bottom\"\n    [attr.data-testid]=\"'builder-row-drop-bottom-' + rowTestToken()\"\n    [ngClass]=\"{\n      'nvb-row-drop-gutter--active': isBottomDropActive(),\n      'nvb-row-drop-gutter--debug': dragDebugEnabled,\n    }\"\n    (dragover)=\"onDragOverBottom($event)\"\n    (dragleave)=\"onDragLeavBottom($event)\"\n    (drop)=\"onDropBottom($event)\"\n  >\n    @if (isBottomDropActive() && dropIndicator.draggedLabel()) {\n      <span class=\"nvb-row-drop-gutter__label\">{{ dropIndicator.draggedLabel() }}</span>\n    }\n  </div>\n}\n",styles:[':host{display:block;width:100%;position:relative;overflow:visible}.nvb-row-content{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:start;overflow:visible}.nvb-row-drop-gutter{position:absolute;left:0;right:0;height:30px;z-index:var(--nvb-builder-z-row-gutter, 60);pointer-events:auto;background:transparent}.nvb-row-drop-gutter:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%);border-radius:var(--nvb-radius-full);opacity:0;background:var(--nvb-color-primary-500);transition:opacity .1s ease}.nvb-row-drop-gutter:before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);opacity:0;background:radial-gradient(circle at 4px 50%,var(--nvb-color-primary-500) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 4px) 50%,var(--nvb-color-primary-500) 3.5px,transparent 4px);transition:opacity .1s ease}.nvb-row-drop-gutter--top{top:-15px}.nvb-row-drop-gutter--bottom{bottom:-15px}.nvb-row-drop-gutter--active:after,.nvb-row-drop-gutter--active:before{opacity:1}.nvb-row-drop-gutter--debug{background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 5%,transparent)}.nvb-row-drop-gutter--debug:after{opacity:.55;background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 42%,transparent)}.nvb-row-drop-gutter__label{position:absolute;left:16px;top:50%;z-index:1;transform:translateY(-50%);max-width:calc(100% - 32px);overflow:hidden;padding:1px 7px;border-radius:var(--nvb-radius-sm);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000, #fff);font-size:11px;font-weight:600;line-height:16px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}\n'],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]}],changeDetection:l.ChangeDetectionStrategy.Eager})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ee,decorators:[{type:L,args:[{selector:"row",imports:[O],changeDetection:z.Eager,template:"@if (dropOverlay && !isGroupedLocked() && showTopDropGutter()) {\n  <div\n    class=\"nvb-row-drop-gutter nvb-row-drop-gutter--top\"\n    [attr.data-testid]=\"'builder-row-drop-top-' + rowTestToken()\"\n    [ngClass]=\"{\n      'nvb-row-drop-gutter--active': isTopDropActive(),\n      'nvb-row-drop-gutter--debug': dragDebugEnabled,\n    }\"\n    (dragover)=\"onDragOverTop($event)\"\n    (dragleave)=\"onDragLeavTop($event)\"\n    (drop)=\"onDropTop($event)\"\n  >\n    @if (isTopDropActive() && dropIndicator.draggedLabel()) {\n      <span class=\"nvb-row-drop-gutter__label\">{{ dropIndicator.draggedLabel() }}</span>\n    }\n  </div>\n}\n\n<div\n  class=\"nvb-row-content\"\n  [attr.data-testid]=\"'builder-row-' + rowTestToken()\"\n  [style.display]=\"rowDisplay\"\n  [style.flex-direction]=\"rowFlexDirection\"\n  [style.flex-wrap]=\"rowFlexWrap\"\n  [style.grid-template-columns]=\"rowGridTemplateColumns\"\n  [style.grid-auto-rows]=\"rowGridAutoRows\"\n  [style.justify-content]=\"rowJustifyContent\"\n  [style.align-items]=\"rowAlignItems\"\n  [style.gap]=\"rowGap\"\n>\n  <ng-content></ng-content>\n</div>\n\n@if (dropOverlay && !isGroupedLocked()) {\n  <div\n    class=\"nvb-row-drop-gutter nvb-row-drop-gutter--bottom\"\n    [attr.data-testid]=\"'builder-row-drop-bottom-' + rowTestToken()\"\n    [ngClass]=\"{\n      'nvb-row-drop-gutter--active': isBottomDropActive(),\n      'nvb-row-drop-gutter--debug': dragDebugEnabled,\n    }\"\n    (dragover)=\"onDragOverBottom($event)\"\n    (dragleave)=\"onDragLeavBottom($event)\"\n    (drop)=\"onDropBottom($event)\"\n  >\n    @if (isBottomDropActive() && dropIndicator.draggedLabel()) {\n      <span class=\"nvb-row-drop-gutter__label\">{{ dropIndicator.draggedLabel() }}</span>\n    }\n  </div>\n}\n",styles:[':host{display:block;width:100%;position:relative;overflow:visible}.nvb-row-content{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:start;overflow:visible}.nvb-row-drop-gutter{position:absolute;left:0;right:0;height:30px;z-index:var(--nvb-builder-z-row-gutter, 60);pointer-events:auto;background:transparent}.nvb-row-drop-gutter:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%);border-radius:var(--nvb-radius-full);opacity:0;background:var(--nvb-color-primary-500);transition:opacity .1s ease}.nvb-row-drop-gutter:before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);opacity:0;background:radial-gradient(circle at 4px 50%,var(--nvb-color-primary-500) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 4px) 50%,var(--nvb-color-primary-500) 3.5px,transparent 4px);transition:opacity .1s ease}.nvb-row-drop-gutter--top{top:-15px}.nvb-row-drop-gutter--bottom{bottom:-15px}.nvb-row-drop-gutter--active:after,.nvb-row-drop-gutter--active:before{opacity:1}.nvb-row-drop-gutter--debug{background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 5%,transparent)}.nvb-row-drop-gutter--debug:after{opacity:.55;background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 42%,transparent)}.nvb-row-drop-gutter__label{position:absolute;left:16px;top:50%;z-index:1;transform:translateY(-50%);max-width:calc(100% - 32px);overflow:hidden;padding:1px 7px;border-radius:var(--nvb-radius-sm);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000, #fff);font-size:11px;font-weight:600;line-height:16px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}\n']}]}],ctorParameters:()=>[{type:E},{type:M},{type:V}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:false}]}],rows:[{type:l.Input,args:[{isSignal:true,alias:"rows",required:false}]}],index:[{type:l.Input,args:[{isSignal:true,alias:"index",required:false}]}],isTemplateElement:[{type:l.Input,args:[{isSignal:true,alias:"isTemplateElement",required:false}]}],rowLength:[{type:l.Input,args:[{isSignal:true,alias:"rowLength",required:false}]}],parentPath:[{type:l.Input,args:[{isSignal:true,alias:"parentPath",required:false}]}],parentElement:[{type:l.Input,args:[{isSignal:true,alias:"parentElement",required:false}]}]}});var Fe=class et{icon=g("check_box_outline_blank",...ngDevMode?[{debugName:"icon"}]:[]);text=g(...ngDevMode?[void 0,{debugName:"text"}]:[]);ariaLabel=g("",...ngDevMode?[{debugName:"ariaLabel"}]:[]);testId=g(null,...ngDevMode?[{debugName:"testId"}]:[]);static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:et,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:et,isStandalone:true,selector:"element-action-button",inputs:{icon:{classPropertyName:"icon",publicName:"icon",isSignal:true,isRequired:false,transformFunction:null},text:{classPropertyName:"text",publicName:"text",isSignal:true,isRequired:false,transformFunction:null},ariaLabel:{classPropertyName:"ariaLabel",publicName:"ariaLabel",isSignal:true,isRequired:false,transformFunction:null},testId:{classPropertyName:"testId",publicName:"testId",isSignal:true,isRequired:false,transformFunction:null}},ngImport:l,template:'<button\n  type="button"\n  class="nvb-button"\n  [attr.data-testid]="testId()"\n  [attr.aria-label]="ariaLabel() || text() || icon()"\n  [attr.title]="ariaLabel() || text() || icon()"\n>\n  <span class="material-symbols-outlined nvb-button__icon">{{ icon() }}</span>\n  @if (text()) {\n    {{ text() }}\n  }\n</button>\n',styles:[".nvb-button{padding:3px;height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:var(--nvb-radius-md);color:#fff}.nvb-button:hover{background-color:var(--nvb-color-primary-600);color:var(--nvb-color-primary-050)}.nvb-button__icon{font-size:16px}\n"],changeDetection:l.ChangeDetectionStrategy.Eager})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Fe,decorators:[{type:L,args:[{selector:"element-action-button",imports:[],changeDetection:z.Eager,template:'<button\n  type="button"\n  class="nvb-button"\n  [attr.data-testid]="testId()"\n  [attr.aria-label]="ariaLabel() || text() || icon()"\n  [attr.title]="ariaLabel() || text() || icon()"\n>\n  <span class="material-symbols-outlined nvb-button__icon">{{ icon() }}</span>\n  @if (text()) {\n    {{ text() }}\n  }\n</button>\n',styles:[".nvb-button{padding:3px;height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:var(--nvb-radius-md);color:#fff}.nvb-button:hover{background-color:var(--nvb-color-primary-600);color:var(--nvb-color-primary-050)}.nvb-button__icon{font-size:16px}\n"]}]}],propDecorators:{icon:[{type:l.Input,args:[{isSignal:true,alias:"icon",required:false}]}],text:[{type:l.Input,args:[{isSignal:true,alias:"text",required:false}]}],ariaLabel:[{type:l.Input,args:[{isSignal:true,alias:"ariaLabel",required:false}]}],testId:[{type:l.Input,args:[{isSignal:true,alias:"testId",required:false}]}]}});var Bn=Z({TabsElement:()=>ne});var ne=class tt{tabTemplateScopeId=`nvb-tabs-template-${Math.random().toString(36).slice(2,11)}`;tabTemplateScopeSelector=`[data-nvb-template-scope="${this.tabTemplateScopeId}"]`;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-tabs","tabs");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);isEditor=b(R.isEditor(),...ngDevMode?[{debugName:"isEditor"}]:[]);loadingPlaceholderItems=[0,1,2];dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);activeTabValue=b("",...ngDevMode?[{debugName:"activeTabValue"}]:[]);hostWidth=b(0,...ngDevMode?[{debugName:"hostWidth"}]:[]);hostResizeObserver=null;hostRef=p(_t);ngZone=p(kn);dragAutoScrollService=p(V);dataVersion=b(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);hoveredElementName=null;dataService=p(j);eventService=p(E);expressionService=p(Q);markupSecurityService=p(Ft);dragAndDropService=p(M);elementActionService=p(we);ngxViewBuilderApiService=p(Se);templateEngineService=p(ae);dragStartHandler=()=>{this.dropOverlay.set(true)};dragEndHandler=()=>{this.dropOverlay.set(false)};dropHandler=()=>{this.dropOverlay.set(false);this.dataVersion.update(e=>e+1)};dataChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.ensureValidActiveTab()};propertyChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.ensureValidActiveTab()};dataSourceLoadedHandler=()=>{this.dataVersion.update(e=>e+1);this.initializeTabRowsStorage();this.ensureValidActiveTab()};visibleTabs=f(()=>{this.dataVersion();return this.computeVisibleTabs()},...ngDevMode?[{debugName:"visibleTabs"}]:[]);dataSourceLoading=f(()=>{this.dataVersion();return Boolean(this.model()?.dataSource)&&!Boolean(this.model()["dataSourceLoaded"])&&!this.isEditor()},...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);tabTemplateSource=f(()=>{this.dataVersion();const e=this.templateEngineService.resolveTemplateContentByName(String(this.model()?.tabTemplateName??"").trim(),String(this.model()?.tabTemplate??"").trim());return this.normalizeTemplate(e)},...ngDevMode?[{debugName:"tabTemplateSource"}]:[]);hasTabTemplate=f(()=>this.tabTemplateSource()!==null,...ngDevMode?[{debugName:"hasTabTemplate"}]:[]);tabTemplateCss=f(()=>{const e=this.tabTemplateSource();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.tabTemplateScopeSelector)},...ngDevMode?[{debugName:"tabTemplateCss"}]:[]);tabTemplateStyleKey=f(()=>{return`tabs:${String(this.model()?.name??"").trim()||this.tabTemplateScopeId}:tab-template-css`},...ngDevMode?[{debugName:"tabTemplateStyleKey"}]:[]);ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.initializeTabRowsStorage();this.initializeActiveTab();this.eventService.onDragStart.add(this.dragStartHandler);this.eventService.onDragEnd.add(this.dragEndHandler);this.eventService.onDrop.add(this.dropHandler);this.dataService.onValueChanged.add(this.dataChangedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler);this.model().afterDataSourceLoad?.add(this.dataSourceLoadedHandler);this.startHostResizeObserver()}ngOnDestroy(){this.eventService.onDragStart.remove(this.dragStartHandler);this.eventService.onDragEnd.remove(this.dragEndHandler);this.eventService.onDrop.remove(this.dropHandler);this.dataService.onValueChanged.remove(this.dataChangedHandler);this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler);this.model().afterDataSourceLoad?.remove(this.dataSourceLoadedHandler);this.hostResizeObserver?.disconnect();this.hostResizeObserver=null}hasContentRows(){this.dataVersion();return P(this.column()?.rows)}buildRowsTemplateContext(){const e=this.templateContext();return{...e??{},rows:Array.isArray(this.column()?.rows)?this.column().rows:[],parentElement:e?.["parentElement"]??this.model()}}resolveTabsPosition(){const e=String(this.model()?.tabsPosition??"top").trim().toLowerCase();if(e==="left"||e==="right")return e;return"top"}isSideTabsLayout(){if(this.isMobileTabsLayout())return false;const e=this.resolveTabsPosition();return e==="left"||e==="right"}isRightSideTabsLayout(){if(this.isMobileTabsLayout())return false;return this.resolveTabsPosition()==="right"}isMobileTabsLayout(){return this.isMobileView()||this.isRealMobileViewport()||this.isNarrowHostContainer()}isHeaderVariant(){return String(this.model()?.tabsVariant??"buttons").trim().toLowerCase()==="header"}isUnderlineVariant(){return String(this.model()?.tabsVariant??"buttons").trim().toLowerCase()==="underline"}isButtonsVariant(){return!this.isHeaderVariant()&&!this.isUnderlineVariant()}resolveTabIdentity(e,t){return this.resolveTabValue(e,t)||`tab-${t+1}`}resolveTabDomId(e,t){return this.buildDomId("nvb-tabs-tab",this.resolveTabIdentity(e,t),t)}tabsPanelDomId(){const e=String(this.model()?.name??"tabs").trim()||"tabs";return this.buildDomId("nvb-tabs-panel",e,0)}activeTabDomId(){const e=this.visibleTabs();const t=e.findIndex((n,r)=>this.isActiveTab(n,r));if(t<0)return null;return this.resolveTabDomId(e[t],t)}resolveTabLabel(e,t){const n=String(e?.label??"").trim();if(n)return n;return`Tab ${t+1}`}resolveTabValue(e,t){const n=String(e?.value??"").trim();if(n)return n;const r=String(e?.id??"").trim();if(r)return r;return`tab${t+1}`}isActiveTab(e,t){return this.activeTabValue()===this.resolveTabValue(e,t)}renderTabTemplate(e,t){const n=this.tabTemplateSource();if(!n)return"";return this.templateEngineService.renderTemplate(n,this.buildTabTemplateContext(e,t))}isTabDisabled(e){return this.evaluateCondition(e?.disabledIf,false)}onTabClick(e,t,n){n.preventDefault();n.stopPropagation();if(this.isInteractionLocked())return;if(this.isTabDisabled(e))return;const r=this.resolveTabValue(e,t);const o=this.activeTabValue();const a=this.resolveTabActionValue(e,t);const i={previousValue:o,value:a,activeValue:r,index:t,tab:e,item:e,row:e};const s=String(this.model().name??"").trim();if(s)i[s]=this.buildRuntimeStatePayload(r,a,e,t);if(!this.isEditor())this.elementActionService.runActions(this.model(),this.model().events??[],"click",i);if(!r||o===r)return;this.persistRowsForTab(o);this.activeTabValue.set(r);this.activateRowsForTab(r);this.ngxViewBuilderApiService.notifyElementTabChanged({elementName:String(this.model().name??""),elementDataPath:String(this.model().dataPath??""),elementType:String(this.model().type??""),element:this.model(),previousTabValue:o||null,tabValue:r,tabIndex:t});if(!this.isEditor()){this.syncActiveTabToData(r,a,e,t);this.elementActionService.runActions(this.model(),this.model().events??[],"change",i)}}onDragOver(e){e.preventDefault();this.hoveredElementName=this.model().name}onDragLeave(e){e.preventDefault();this.hoveredElementName=null}onDrop(e){if(!this.isEditor()&&this.isInteractionLocked())return;e.preventDefault();this.ensureActiveTabRowsReference();if(!Array.isArray(this.column()?.rows))this.column().rows=[];if(this.column().rows.length===0)this.column().rows.push(new oe({columns:[]}));const t=this.column().rows[0];const n=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onColumnDrop(e,n,-1,t.columns,"right");this.hoveredElementName=null}initializeActiveTab(){const e=this.resolveExternalActiveTabValue();if(e)this.activeTabValue.set(e);const t=this.dataService.getValue(this.resolveActiveTabPath());if(typeof t==="string"&&t.trim())this.activeTabValue.set(t.trim());this.ensureValidActiveTab()}buildTabTemplateContext(e,t){const n=this.resolveTabValue(e,t);const r={...this.dataService.getData()??{},tab:e,item:e,row:e,value:e,tabValue:n,itemValue:n,label:this.resolveTabLabel(e,t),content:String(e?.content??"").trim(),index:t,active:this.isActiveTab(e,t),selected:this.isActiveTab(e,t),disabled:this.isTabDisabled(e),element:this.model()};const o=String(this.model()?.name??"").trim();if(o)r[o]=n;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveTabTemplateFieldMap())}resolveTabTemplateFieldMap(){const e=this.model();const t=e["tabTemplateFieldMap"];if(t&&typeof t==="object"&&!Array.isArray(t))return t;const n=e["templateFieldMap"];return n&&typeof n==="object"&&!Array.isArray(n)?n:null}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();return n==="null"||n==="undefined"?null:t}ensureValidActiveTab(){const e=this.computeVisibleTabs();if(!e.length){this.persistRowsForTab(this.activeTabValue());this.activeTabValue.set("");if(!this.isEditor())this.syncActiveTabToData("");return}const t=e.map((i,s)=>this.resolveTabValue(i,s));const n=this.activeTabValue();if(n&&t.includes(n)){this.activateRowsForTab(n);return}const r=e.findIndex(i=>!this.isTabDisabled(i));const o=r>=0?r:0;const a=this.resolveTabValue(e[o],o);this.persistRowsForTab(n);this.activeTabValue.set(a);this.activateRowsForTab(a);if(!this.isEditor())this.syncActiveTabToData(a)}initializeTabRowsStorage(){const e=this.column();if(!e)return;const t=this.getAllTabs();const n=this.ensureTabRowsStorage();const r=Array.isArray(e.rows)?e.rows:[];if(!Object.values(n).some(o=>P(o))&&t.length>0&&P(r)){const o=this.resolveTabValue(t[0],0);n[o]=r}t.forEach((o,a)=>{const i=this.resolveTabValue(o,a);if(!Array.isArray(n[i]))n[i]=[]})}ensureActiveTabRowsReference(){const e=String(this.activeTabValue()??"").trim();if(!e)return;this.activateRowsForTab(e)}ensureTabRowsStorage(){const e=this.column();if(!e)return{};if(!e.tabRows||typeof e.tabRows!=="object")e.tabRows={};return e.tabRows}persistRowsForTab(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureTabRowsStorage();r[n]=Array.isArray(t.rows)?t.rows:[]}activateRowsForTab(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureTabRowsStorage();if(!Array.isArray(r[n]))r[n]=[];t.rows=r[n]}getAllTabs(){return Array.isArray(this.model()?.tabs)?this.model().tabs:[]}computeVisibleTabs(){return(Array.isArray(this.model()?.tabs)?this.model().tabs:[]).filter(e=>this.evaluateCondition(e?.visibleIf,true))}activeTabContent(){const e=String(this.activeTabValue()??"").trim();if(!e)return null;const t=this.visibleTabs().find((n,r)=>this.resolveTabValue(n,r)===e)??null;return String(t?.content??"").trim()||null}sanitizeTabContent(e){return this.markupSecurityService.sanitizeHtml(String(e??""))}evaluateCondition(e,t){const n=this.normalizeConditionExpression(e);if(!n)return t;try{const r=this.expressionService.applyContextToExpression(n,this.model());const o=this.expressionService.runPropertyConditionSync(this.dataService.getData()??{},r);return Boolean(o)}catch{return t}}normalizeConditionExpression(e){return String(e??"").replace(/\{([^}]+)\}/g,(t,n)=>String(n??"").trim()).trim()}resolveActiveTabPath(){return`__tabs.${String(this.model()?.name??"tabs").trim()||"tabs"}.active`}buildDomId(e,t,n){return`${e}-${String(t??"").trim().toLowerCase().replace(/[^a-z0-9_-]+/g,"-").replace(/^-+|-+$/g,"")||n+1}`}syncActiveTabToData(e,t,n,r){const o=this.resolveRuntimeState(e,t,n,r);this.dataService.setValue(this.resolveActiveTabPath(),e);this.dataService.setValue(`__tabs.${o.elementName}.selectedTab`,o.selectedValue);this.dataService.setValue(`__tabs.${o.elementName}.activeTab`,e);this.dataService.setValue(`__tabs.${o.elementName}.selectedTabItem`,o.tab);this.dataService.setValue(`__tabs.${o.elementName}.selectedTabIndex`,o.index);const a=String(this.model()?.activeTabDataPath??"").trim();if(a)this.dataService.setValue(a,e)}resolveExternalActiveTabValue(){const e=String(this.model()?.activeTabDataPath??"").trim();if(!e)return"";return String(this.dataService.getValue(e)??"").trim()}resolveTabActionValue(e,t){const n=String(this.model()?.dataSource?.optionValue??"").trim();if(!n)return e;return this.readPath(e,n)??this.resolveTabValue(e,t)}buildRuntimeStatePayload(e,t,n,r){return{selectedTab:t,activeTab:e,selectedTabItem:n,selectedTabIndex:r,value:t,item:n,index:r}}resolveRuntimeState(e,t,n,r){const o=String(this.model()?.name??"tabs").trim()||"tabs";if(n&&typeof r==="number"&&r>=0)return{elementName:o,selectedValue:t??this.resolveTabActionValue(n,r),tab:n,index:r};const a=this.computeVisibleTabs();const i=a.findIndex((s,c)=>this.resolveTabValue(s,c)===e);if(i>=0){const s=a[i];return{elementName:o,selectedValue:t??this.resolveTabActionValue(s,i),tab:s,index:i}}return{elementName:o,selectedValue:t??(e||null),tab:null,index:typeof r==="number"?r:-1}}readPath(e,t){const n=String(t??"").trim().split(".").filter(o=>o.length>0);if(!n.length||!e)return;let r=e;for(const o of n){if(!r||typeof r!=="object"||Array.isArray(r))return;r=r[o]}return r}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}isRealMobileViewport(){if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return _e()}isNarrowHostContainer(){const e=Number(this.hostWidth());return Number.isFinite(e)&&e>0&&e<=$t()}startHostResizeObserver(){const e=this.hostRef?.nativeElement;if(!e||typeof ResizeObserver!=="function")return;const t=Number(e.getBoundingClientRect().width);this.hostWidth.set(Number.isFinite(t)&&t>0?t:0);this.hostResizeObserver=new ResizeObserver(n=>{const r=n?.[0];if(!r)return;const o=Number(r.contentRect?.width??e.getBoundingClientRect().width);this.ngZone.run(()=>{this.hostWidth.set(Number.isFinite(o)&&o>0?o:0)})});this.hostResizeObserver.observe(e)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:tt,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:tt,isStandalone:true,selector:"tabs-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"<div\n  class=\"nvb-tabs\"\n  [attr.aria-label]=\"model().label || model().name\"\n  [ngClass]=\"{\n    'nvb-tabs--side': isSideTabsLayout(),\n    'nvb-tabs--side-right': isRightSideTabsLayout(),\n    'nvb-tabs--mobile-top': isMobileTabsLayout(),\n    'nvb-tabs--variant-header': isHeaderVariant(),\n    'nvb-tabs--variant-underline': isUnderlineVariant(),\n    'nvb-tabs--variant-buttons': isButtonsVariant(),\n    'nvb-tabs--loading': dataSourceLoading(),\n  }\"\n  [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n  [attr.data-testid]=\"tid('root')\"\n>\n  @if (tabTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"tabTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"tabTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-tabs__header\"\n    [ngClass]=\"{\n      'nvb-tabs__header--full': model().fullWidthTabs && !isSideTabsLayout(),\n      'nvb-tabs__header--side': isSideTabsLayout(),\n      'nvb-tabs__header--variant-header': isHeaderVariant(),\n      'nvb-tabs__header--variant-underline': isUnderlineVariant(),\n    }\"\n    role=\"tablist\"\n    [attr.aria-label]=\"model().label || model().name || 'Tabs'\"\n    [attr.data-testid]=\"tid('header')\"\n  >\n    @if (dataSourceLoading()) {\n      @for (placeholder of loadingPlaceholderItems; track placeholder) {\n        <span class=\"nvb-tabs__loading-tab\" aria-hidden=\"true\"></span>\n      }\n      <span class=\"nvb-sr-only\">Loading tabs...</span>\n    } @else {\n      @for (tab of visibleTabs(); track resolveTabIdentity(tab, $index); let tabIndex = $index) {\n        <button\n          type=\"button\"\n          class=\"nvb-tabs__tab\"\n          [ngClass]=\"{\n            'nvb-tabs__tab--active': isActiveTab(tab, tabIndex),\n            'nvb-tabs__tab--disabled': isTabDisabled(tab),\n            'nvb-tabs__tab--variant-header': isHeaderVariant(),\n            'nvb-tabs__tab--variant-underline': isUnderlineVariant(),\n          }\"\n          [disabled]=\"isTabDisabled(tab)\"\n          role=\"tab\"\n          [attr.id]=\"resolveTabDomId(tab, tabIndex)\"\n          [attr.aria-selected]=\"isActiveTab(tab, tabIndex)\"\n          [attr.aria-current]=\"isActiveTab(tab, tabIndex) ? 'page' : null\"\n          [attr.aria-controls]=\"tabsPanelDomId()\"\n          [attr.aria-label]=\"resolveTabLabel(tab, tabIndex)\"\n          [attr.data-testid]=\"tid('tab', resolveTabIdentity(tab, tabIndex))\"\n          (click)=\"onTabClick(tab, tabIndex, $event)\"\n        >\n          @if (hasTabTemplate()) {\n            <span\n              class=\"nvb-tabs__tab-template\"\n              [attr.data-nvb-template-scope]=\"tabTemplateScopeId\"\n              [innerHTML]=\"renderTabTemplate(tab, tabIndex)\"\n            ></span>\n          } @else {\n            {{ resolveTabLabel(tab, tabIndex) }}\n          }\n        </button>\n      }\n    }\n  </div>\n\n  @if (model().showContent !== false) {\n    <section\n      class=\"nvb-tabs__content\"\n      [class.nvb-tabs__content--empty]=\"!hasContentRows()\"\n      role=\"tabpanel\"\n      [attr.id]=\"tabsPanelDomId()\"\n      [attr.aria-labelledby]=\"activeTabDomId()\"\n      [attr.aria-label]=\"model().label || model().name\"\n      [attr.data-testid]=\"tid('content')\"\n    >\n      @if (dataSourceLoading()) {\n        <div class=\"nvb-tabs__loading-content\" role=\"status\" aria-live=\"polite\">\n          <span class=\"nvb-tabs__loading-line nvb-tabs__loading-line--wide\" aria-hidden=\"true\"></span>\n          <span class=\"nvb-tabs__loading-line\" aria-hidden=\"true\"></span>\n          <span class=\"nvb-sr-only\">Loading tab content...</span>\n        </div>\n      } @else if (hasContentRows()) {\n        @if (rowsTemplate(); as templateRef) {\n          <ng-container\n            *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n          ></ng-container>\n        } @else {\n          <ng-content></ng-content>\n        }\n      } @else if (isEditor()) {\n        <div\n          class=\"nvb-tabs__placeholder\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [class.nvb-tabs__placeholder--overlay]=\"hoveredElementName === model().name\"\n          [attr.data-testid]=\"tid('empty-builder')\"\n        >\n          <span class=\"material-symbols-outlined\">note_stack_add</span>\n          <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into tabs' }}</p>\n\n          @if (dropOverlay()) {\n            <div\n              class=\"nvb-tabs__drop-overlay\"\n              (dragover)=\"onDragOver($event)\"\n              (dragleave)=\"onDragLeave($event)\"\n              (drop)=\"onDrop($event)\"\n            ></div>\n          }\n        </div>\n      } @else if (activeTabContent(); as tabContent) {\n        <article\n          class=\"nvb-tabs__text-content\"\n          [innerHTML]=\"sanitizeTabContent(tabContent | dynamicText: model())\"\n          [attr.data-testid]=\"tid('text-content')\"\n        ></article>\n      }\n    </section>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-tabs{border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);overflow:hidden}.nvb-tabs--side{display:flex;align-items:stretch}.nvb-tabs--side-right{flex-direction:row-reverse}.nvb-tabs__header{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;min-height:40px;padding:0 8px;border-bottom:1px solid color-mix(in oklab,var(--nvb-color-neutral-200) 88%,transparent);background:var(--nvb-color-neutral-000);overflow-x:auto;scrollbar-width:thin}.nvb-tabs__header--full{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.nvb-tabs__header--side{flex-direction:column;align-items:stretch;width:220px;min-width:180px;max-width:320px;border-bottom:0;border-right:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--side-right .nvb-tabs__header--side{border-right:0;border-left:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--variant-header{border-radius:var(--nvb-card-radius, var(--nvb-radius-lg))}.nvb-tabs__header--variant-header{gap:0;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--variant-underline{box-shadow:none}.nvb-tabs__header--variant-underline{gap:0;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs__tab--variant-underline{border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;min-height:40px;padding:0 12px;font-size:14px;font-weight:500;color:var(--nvb-color-neutral-500);margin-bottom:-1px;box-shadow:none}.nvb-tabs__tab--variant-underline:hover{background:transparent;color:var(--nvb-color-neutral-700)}.nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent}.nvb-tabs__tab--variant-header{border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;min-height:40px;padding:0 12px;font-size:14px;font-weight:500;color:var(--nvb-color-neutral-600);margin-bottom:-1px}.nvb-tabs__tab--variant-header:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 70%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-700)}.nvb-tabs__tab--active.nvb-tabs__tab--variant-header{border-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent;box-shadow:none}.nvb-tabs__header--side.nvb-tabs__header--variant-header{gap:6px;padding:10px}.nvb-tabs__header--side.nvb-tabs__header--variant-underline{gap:0;padding:12px 0;background:var(--nvb-color-neutral-000)}.nvb-tabs__header--side .nvb-tabs__tab--variant-underline{min-height:44px;padding:0 18px;text-align:left;justify-content:flex-start;border-bottom:0;border-left:2px solid transparent;margin-bottom:0}.nvb-tabs--side-right .nvb-tabs__header--side .nvb-tabs__tab--variant-underline{border-left:0;border-right:2px solid transparent}.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-neutral-100) 50%,var(--nvb-color-neutral-000))}.nvb-tabs--side-right .nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:transparent;border-right-color:var(--nvb-color-primary-500)}.nvb-tabs__header--side .nvb-tabs__tab--variant-header{border:0;border-left:2px solid transparent;border-radius:0;min-height:40px;padding:0 12px;text-align:left}.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-header{border-left-color:var(--nvb-color-primary-500)}.nvb-tabs__tab{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500;line-height:20px;min-height:40px;padding:0 12px;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.nvb-tabs__tab-template{display:block;min-width:0}.nvb-tabs__header--side .nvb-tabs__tab{width:100%;text-align:left}.nvb-tabs__tab:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 54%,var(--nvb-color-neutral-000));border-color:transparent;color:var(--nvb-color-neutral-800)}.nvb-tabs__tab:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:-2px}.nvb-tabs__tab--active{border-bottom-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent;font-weight:600;box-shadow:none}.nvb-tabs__tab--disabled,.nvb-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.nvb-tabs--loading{cursor:wait}.nvb-tabs__loading-tab{display:inline-flex;align-self:center;width:104px;height:20px;margin:9px 8px 9px 4px;border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-tabs-loading-shimmer 1.35s ease-in-out infinite}.nvb-tabs__loading-content{display:grid;gap:10px;padding:12px}.nvb-tabs__loading-line{height:12px;width:min(320px,70%);border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-tabs-loading-shimmer 1.35s ease-in-out infinite}.nvb-tabs__loading-line--wide{width:min(520px,100%)}@keyframes nvb-tabs-loading-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-tabs__content{padding:10px 12px 12px}.nvb-tabs--side .nvb-tabs__content{flex:1 1 auto;min-width:0}.nvb-tabs__content--empty{padding:0}.nvb-tabs__text-content{padding:10px;color:var(--nvb-color-neutral-700);font-size:13px;line-height:1.5}.nvb-tabs__placeholder{position:relative;min-height:120px;border:1px dashed color-mix(in oklab,var(--nvb-color-neutral-300) 90%,transparent);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));margin:8px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-tabs__placeholder span{font-size:30px}.nvb-tabs__placeholder p{margin:0;font-size:13px}.nvb-tabs__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-tabs__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-tabs--mobile-top{display:block}.nvb-tabs--mobile-top .nvb-tabs__header,.nvb-tabs--mobile-top .nvb-tabs__header--full,.nvb-tabs--mobile-top .nvb-tabs__header--side{display:block;width:100%;min-width:0;max-width:none;border-right:0;border-left:0;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--mobile-top .nvb-tabs__tab{display:block;width:100%;text-align:left;margin-bottom:6px}.nvb-tabs--mobile-top .nvb-tabs__tab--variant-header{border:0;border-left:2px solid transparent;border-radius:0;min-height:40px;padding:0 12px}.nvb-tabs--mobile-top .nvb-tabs__tab--variant-underline{border:0;border-left:2px solid transparent;border-radius:0;min-height:42px;padding:0 10px;margin-bottom:0}.nvb-tabs--mobile-top .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);border-bottom-color:transparent;background:color-mix(in oklab,var(--nvb-color-neutral-100) 50%,var(--nvb-color-neutral-000))}.nvb-tabs--mobile-top .nvb-tabs__tab:last-child{margin-bottom:0}@media(max-width:768px){.nvb-tabs--side,.nvb-tabs--side-right{display:block}.nvb-tabs__header,.nvb-tabs__header--full,.nvb-tabs__header--side{display:block;width:100%;min-width:0;max-width:none;border-right:0;border-left:0;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs__tab,.nvb-tabs__header--side .nvb-tabs__tab{display:block;width:100%;text-align:left;margin-bottom:6px}.nvb-tabs__tab:last-child,.nvb-tabs__header--side .nvb-tabs__tab:last-child{margin-bottom:0}.nvb-tabs__tab--variant-underline,.nvb-tabs__header--side .nvb-tabs__tab--variant-underline{border-bottom:0;border-left:2px solid transparent;min-height:42px;margin-bottom:0}.nvb-tabs__tab--active.nvb-tabs__tab--variant-underline,.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);border-bottom-color:transparent}}.nvb-tabs--variant-underline{border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));box-shadow:none}.nvb-tabs--variant-underline .nvb-tabs__header{gap:0;min-height:40px;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,transparent)}.nvb-tabs--variant-underline .nvb-tabs__tab{min-height:40px;padding:0 12px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500}.nvb-tabs--variant-underline .nvb-tabs__tab:hover:not(:disabled){background:transparent;border-color:transparent;box-shadow:none;color:var(--nvb-color-neutral-700)}.nvb-tabs--variant-underline .nvb-tabs__tab--active{background:transparent;border-bottom-color:var(--nvb-color-primary-500);box-shadow:none;color:var(--nvb-color-neutral-900);font-weight:600}.nvb-tabs--variant-underline .nvb-tabs__content{padding:10px 12px 12px}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__header,.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__header{padding:12px 0;border-bottom:0}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__tab,.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab{width:100%;min-height:40px;padding:0 12px;margin-bottom:0;text-align:left;justify-content:flex-start;border-bottom:0;border-left:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab{border-left:0;border-right:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__tab--active{border-left-color:var(--nvb-color-primary-500)}.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab--active{border-right-color:var(--nvb-color-primary-500)}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__header{padding:8px 0}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__tab{width:100%;min-height:40px;padding:0 12px;margin-bottom:0;border-bottom:0;border-left:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__tab--active{border-left-color:var(--nvb-color-primary-500)}\n"],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"component",type:F,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:k,name:"uiT"},{kind:"pipe",type:A,name:"dynamicText"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ne,decorators:[{type:L,args:[{selector:"tabs-element",changeDetection:z.OnPush,imports:[O,N,k,A,F],host:{...ee},template:"<div\n  class=\"nvb-tabs\"\n  [attr.aria-label]=\"model().label || model().name\"\n  [ngClass]=\"{\n    'nvb-tabs--side': isSideTabsLayout(),\n    'nvb-tabs--side-right': isRightSideTabsLayout(),\n    'nvb-tabs--mobile-top': isMobileTabsLayout(),\n    'nvb-tabs--variant-header': isHeaderVariant(),\n    'nvb-tabs--variant-underline': isUnderlineVariant(),\n    'nvb-tabs--variant-buttons': isButtonsVariant(),\n    'nvb-tabs--loading': dataSourceLoading(),\n  }\"\n  [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n  [attr.data-testid]=\"tid('root')\"\n>\n  @if (tabTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"tabTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"tabTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-tabs__header\"\n    [ngClass]=\"{\n      'nvb-tabs__header--full': model().fullWidthTabs && !isSideTabsLayout(),\n      'nvb-tabs__header--side': isSideTabsLayout(),\n      'nvb-tabs__header--variant-header': isHeaderVariant(),\n      'nvb-tabs__header--variant-underline': isUnderlineVariant(),\n    }\"\n    role=\"tablist\"\n    [attr.aria-label]=\"model().label || model().name || 'Tabs'\"\n    [attr.data-testid]=\"tid('header')\"\n  >\n    @if (dataSourceLoading()) {\n      @for (placeholder of loadingPlaceholderItems; track placeholder) {\n        <span class=\"nvb-tabs__loading-tab\" aria-hidden=\"true\"></span>\n      }\n      <span class=\"nvb-sr-only\">Loading tabs...</span>\n    } @else {\n      @for (tab of visibleTabs(); track resolveTabIdentity(tab, $index); let tabIndex = $index) {\n        <button\n          type=\"button\"\n          class=\"nvb-tabs__tab\"\n          [ngClass]=\"{\n            'nvb-tabs__tab--active': isActiveTab(tab, tabIndex),\n            'nvb-tabs__tab--disabled': isTabDisabled(tab),\n            'nvb-tabs__tab--variant-header': isHeaderVariant(),\n            'nvb-tabs__tab--variant-underline': isUnderlineVariant(),\n          }\"\n          [disabled]=\"isTabDisabled(tab)\"\n          role=\"tab\"\n          [attr.id]=\"resolveTabDomId(tab, tabIndex)\"\n          [attr.aria-selected]=\"isActiveTab(tab, tabIndex)\"\n          [attr.aria-current]=\"isActiveTab(tab, tabIndex) ? 'page' : null\"\n          [attr.aria-controls]=\"tabsPanelDomId()\"\n          [attr.aria-label]=\"resolveTabLabel(tab, tabIndex)\"\n          [attr.data-testid]=\"tid('tab', resolveTabIdentity(tab, tabIndex))\"\n          (click)=\"onTabClick(tab, tabIndex, $event)\"\n        >\n          @if (hasTabTemplate()) {\n            <span\n              class=\"nvb-tabs__tab-template\"\n              [attr.data-nvb-template-scope]=\"tabTemplateScopeId\"\n              [innerHTML]=\"renderTabTemplate(tab, tabIndex)\"\n            ></span>\n          } @else {\n            {{ resolveTabLabel(tab, tabIndex) }}\n          }\n        </button>\n      }\n    }\n  </div>\n\n  @if (model().showContent !== false) {\n    <section\n      class=\"nvb-tabs__content\"\n      [class.nvb-tabs__content--empty]=\"!hasContentRows()\"\n      role=\"tabpanel\"\n      [attr.id]=\"tabsPanelDomId()\"\n      [attr.aria-labelledby]=\"activeTabDomId()\"\n      [attr.aria-label]=\"model().label || model().name\"\n      [attr.data-testid]=\"tid('content')\"\n    >\n      @if (dataSourceLoading()) {\n        <div class=\"nvb-tabs__loading-content\" role=\"status\" aria-live=\"polite\">\n          <span class=\"nvb-tabs__loading-line nvb-tabs__loading-line--wide\" aria-hidden=\"true\"></span>\n          <span class=\"nvb-tabs__loading-line\" aria-hidden=\"true\"></span>\n          <span class=\"nvb-sr-only\">Loading tab content...</span>\n        </div>\n      } @else if (hasContentRows()) {\n        @if (rowsTemplate(); as templateRef) {\n          <ng-container\n            *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n          ></ng-container>\n        } @else {\n          <ng-content></ng-content>\n        }\n      } @else if (isEditor()) {\n        <div\n          class=\"nvb-tabs__placeholder\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [class.nvb-tabs__placeholder--overlay]=\"hoveredElementName === model().name\"\n          [attr.data-testid]=\"tid('empty-builder')\"\n        >\n          <span class=\"material-symbols-outlined\">note_stack_add</span>\n          <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into tabs' }}</p>\n\n          @if (dropOverlay()) {\n            <div\n              class=\"nvb-tabs__drop-overlay\"\n              (dragover)=\"onDragOver($event)\"\n              (dragleave)=\"onDragLeave($event)\"\n              (drop)=\"onDrop($event)\"\n            ></div>\n          }\n        </div>\n      } @else if (activeTabContent(); as tabContent) {\n        <article\n          class=\"nvb-tabs__text-content\"\n          [innerHTML]=\"sanitizeTabContent(tabContent | dynamicText: model())\"\n          [attr.data-testid]=\"tid('text-content')\"\n        ></article>\n      }\n    </section>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-tabs{border:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);overflow:hidden}.nvb-tabs--side{display:flex;align-items:stretch}.nvb-tabs--side-right{flex-direction:row-reverse}.nvb-tabs__header{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;min-height:40px;padding:0 8px;border-bottom:1px solid color-mix(in oklab,var(--nvb-color-neutral-200) 88%,transparent);background:var(--nvb-color-neutral-000);overflow-x:auto;scrollbar-width:thin}.nvb-tabs__header--full{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.nvb-tabs__header--side{flex-direction:column;align-items:stretch;width:220px;min-width:180px;max-width:320px;border-bottom:0;border-right:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--side-right .nvb-tabs__header--side{border-right:0;border-left:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--variant-header{border-radius:var(--nvb-card-radius, var(--nvb-radius-lg))}.nvb-tabs__header--variant-header{gap:0;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--variant-underline{box-shadow:none}.nvb-tabs__header--variant-underline{gap:0;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs__tab--variant-underline{border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;min-height:40px;padding:0 12px;font-size:14px;font-weight:500;color:var(--nvb-color-neutral-500);margin-bottom:-1px;box-shadow:none}.nvb-tabs__tab--variant-underline:hover{background:transparent;color:var(--nvb-color-neutral-700)}.nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent}.nvb-tabs__tab--variant-header{border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;min-height:40px;padding:0 12px;font-size:14px;font-weight:500;color:var(--nvb-color-neutral-600);margin-bottom:-1px}.nvb-tabs__tab--variant-header:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 70%,var(--nvb-color-neutral-000));color:var(--nvb-color-neutral-700)}.nvb-tabs__tab--active.nvb-tabs__tab--variant-header{border-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent;box-shadow:none}.nvb-tabs__header--side.nvb-tabs__header--variant-header{gap:6px;padding:10px}.nvb-tabs__header--side.nvb-tabs__header--variant-underline{gap:0;padding:12px 0;background:var(--nvb-color-neutral-000)}.nvb-tabs__header--side .nvb-tabs__tab--variant-underline{min-height:44px;padding:0 18px;text-align:left;justify-content:flex-start;border-bottom:0;border-left:2px solid transparent;margin-bottom:0}.nvb-tabs--side-right .nvb-tabs__header--side .nvb-tabs__tab--variant-underline{border-left:0;border-right:2px solid transparent}.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);background:color-mix(in oklab,var(--nvb-color-neutral-100) 50%,var(--nvb-color-neutral-000))}.nvb-tabs--side-right .nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:transparent;border-right-color:var(--nvb-color-primary-500)}.nvb-tabs__header--side .nvb-tabs__tab--variant-header{border:0;border-left:2px solid transparent;border-radius:0;min-height:40px;padding:0 12px;text-align:left}.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-header{border-left-color:var(--nvb-color-primary-500)}.nvb-tabs__tab{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500;line-height:20px;min-height:40px;padding:0 12px;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.nvb-tabs__tab-template{display:block;min-width:0}.nvb-tabs__header--side .nvb-tabs__tab{width:100%;text-align:left}.nvb-tabs__tab:hover{background:color-mix(in oklab,var(--nvb-color-neutral-100) 54%,var(--nvb-color-neutral-000));border-color:transparent;color:var(--nvb-color-neutral-800)}.nvb-tabs__tab:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:-2px}.nvb-tabs__tab--active{border-bottom-color:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-900);background:transparent;font-weight:600;box-shadow:none}.nvb-tabs__tab--disabled,.nvb-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.nvb-tabs--loading{cursor:wait}.nvb-tabs__loading-tab{display:inline-flex;align-self:center;width:104px;height:20px;margin:9px 8px 9px 4px;border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-tabs-loading-shimmer 1.35s ease-in-out infinite}.nvb-tabs__loading-content{display:grid;gap:10px;padding:12px}.nvb-tabs__loading-line{height:12px;width:min(320px,70%);border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-tabs-loading-shimmer 1.35s ease-in-out infinite}.nvb-tabs__loading-line--wide{width:min(520px,100%)}@keyframes nvb-tabs-loading-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-tabs__content{padding:10px 12px 12px}.nvb-tabs--side .nvb-tabs__content{flex:1 1 auto;min-width:0}.nvb-tabs__content--empty{padding:0}.nvb-tabs__text-content{padding:10px;color:var(--nvb-color-neutral-700);font-size:13px;line-height:1.5}.nvb-tabs__placeholder{position:relative;min-height:120px;border:1px dashed color-mix(in oklab,var(--nvb-color-neutral-300) 90%,transparent);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));margin:8px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-tabs__placeholder span{font-size:30px}.nvb-tabs__placeholder p{margin:0;font-size:13px}.nvb-tabs__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-tabs__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-tabs--mobile-top{display:block}.nvb-tabs--mobile-top .nvb-tabs__header,.nvb-tabs--mobile-top .nvb-tabs__header--full,.nvb-tabs--mobile-top .nvb-tabs__header--side{display:block;width:100%;min-width:0;max-width:none;border-right:0;border-left:0;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs--mobile-top .nvb-tabs__tab{display:block;width:100%;text-align:left;margin-bottom:6px}.nvb-tabs--mobile-top .nvb-tabs__tab--variant-header{border:0;border-left:2px solid transparent;border-radius:0;min-height:40px;padding:0 12px}.nvb-tabs--mobile-top .nvb-tabs__tab--variant-underline{border:0;border-left:2px solid transparent;border-radius:0;min-height:42px;padding:0 10px;margin-bottom:0}.nvb-tabs--mobile-top .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);border-bottom-color:transparent;background:color-mix(in oklab,var(--nvb-color-neutral-100) 50%,var(--nvb-color-neutral-000))}.nvb-tabs--mobile-top .nvb-tabs__tab:last-child{margin-bottom:0}@media(max-width:768px){.nvb-tabs--side,.nvb-tabs--side-right{display:block}.nvb-tabs__header,.nvb-tabs__header--full,.nvb-tabs__header--side{display:block;width:100%;min-width:0;max-width:none;border-right:0;border-left:0;border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-tabs__tab,.nvb-tabs__header--side .nvb-tabs__tab{display:block;width:100%;text-align:left;margin-bottom:6px}.nvb-tabs__tab:last-child,.nvb-tabs__header--side .nvb-tabs__tab:last-child{margin-bottom:0}.nvb-tabs__tab--variant-underline,.nvb-tabs__header--side .nvb-tabs__tab--variant-underline{border-bottom:0;border-left:2px solid transparent;min-height:42px;margin-bottom:0}.nvb-tabs__tab--active.nvb-tabs__tab--variant-underline,.nvb-tabs__header--side .nvb-tabs__tab--active.nvb-tabs__tab--variant-underline{border-left-color:var(--nvb-color-primary-500);border-bottom-color:transparent}}.nvb-tabs--variant-underline{border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));box-shadow:none}.nvb-tabs--variant-underline .nvb-tabs__header{gap:0;min-height:40px;padding:0 8px;background:var(--nvb-color-neutral-000);border-bottom:1px solid color-mix(in oklab,var(--nvb-color-neutral-300) 82%,transparent)}.nvb-tabs--variant-underline .nvb-tabs__tab{min-height:40px;padding:0 12px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:var(--nvb-color-neutral-600);font-size:14px;font-weight:500}.nvb-tabs--variant-underline .nvb-tabs__tab:hover:not(:disabled){background:transparent;border-color:transparent;box-shadow:none;color:var(--nvb-color-neutral-700)}.nvb-tabs--variant-underline .nvb-tabs__tab--active{background:transparent;border-bottom-color:var(--nvb-color-primary-500);box-shadow:none;color:var(--nvb-color-neutral-900);font-weight:600}.nvb-tabs--variant-underline .nvb-tabs__content{padding:10px 12px 12px}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__header,.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__header{padding:12px 0;border-bottom:0}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__tab,.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab{width:100%;min-height:40px;padding:0 12px;margin-bottom:0;text-align:left;justify-content:flex-start;border-bottom:0;border-left:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab{border-left:0;border-right:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--side .nvb-tabs__tab--active{border-left-color:var(--nvb-color-primary-500)}.nvb-tabs--variant-underline.nvb-tabs--side-right .nvb-tabs__tab--active{border-right-color:var(--nvb-color-primary-500)}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__header{padding:8px 0}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__tab{width:100%;min-height:40px;padding:0 12px;margin-bottom:0;border-bottom:0;border-left:2px solid transparent}.nvb-tabs--variant-underline.nvb-tabs--mobile-top .nvb-tabs__tab--active{border-left-color:var(--nvb-color-primary-500)}\n"]}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}]}});var ke=class nt{components=new Map;extraComponents=new Map;isInitialized=false;elementsService=p(re);constructor(){this.elementsService.onRegistryChanged.add(()=>{if(!this.isInitialized)return;this.registerElementComponent(true)})}registerElementComponent(e=false){if(this.isInitialized&&!e)return;if(e)this.components.clear();this.elementsService.getAllElements().forEach(t=>{if(!t?.component)return;this.components.set(String(t.type),t.component)});this.components.set("tabsPro",ne);this.components.set("htmlSnippet",yt);this.components.set("toggleButton",xt);this.extraComponents.forEach((t,n)=>{this.components.set(n,t)});this.isInitialized=true}getElementComponent(e){if(!this.isInitialized)this.registerElementComponent();return this.components.get(String(e??""))??null}registerComponent(e,t){const n=String(e??"").trim();if(!n||!t)return;if(!this.isInitialized)this.registerElementComponent();this.extraComponents.set(n,t);this.components.set(n,t)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:nt,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:nt,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ke,decorators:[{type:te,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});var $n=Z({EmptyBlockElement:()=>ce});const It="8px";var ce=class rt{elementFocusService;eventService;dragAndDropService;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-empty-block","empty-block");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);rows=g(null,...ngDevMode?[{debugName:"rows"}]:[]);isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);focusedElementName=b(null,...ngDevMode?[{debugName:"focusedElementName"}]:[]);hoveredElementName=null;contentVersion=b(0,...ngDevMode?[{debugName:"contentVersion"}]:[]);formRefreshToken=0;elementFocusHandler=null;dragStartHandler=null;dragEndHandler=null;dropHandler=null;dataChangedHandler=null;propertyChangedHandler=null;dataService=p(j);structureService=p(xe);dragAutoScrollService=p(V);validatorService=p(Ne);constructor(e,t,n){this.elementFocusService=e;this.eventService=t;this.dragAndDropService=n}ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.elementFocusHandler=e=>{this.focusedElementName.set(this.resolveFocusKey(e?.payload))};this.eventService.onElementFocus.add(this.elementFocusHandler);this.dragStartHandler=()=>{this.dropOverlay.set(true)};this.eventService.onDragStart.add(this.dragStartHandler);this.dragEndHandler=()=>{this.dropOverlay.set(false)};this.eventService.onDragEnd.add(this.dragEndHandler);this.dropHandler=()=>{this.dropOverlay.set(false);this.bumpContentVersion();this.refreshFormStatus()};this.eventService.onDrop.add(this.dropHandler);this.dataChangedHandler=e=>{if(!this.isFormBlock())return;if(!this.isChangedPathWithinBlock(e))return;this.refreshFormStatus()};this.dataService.onValueChanged.add(this.dataChangedHandler);this.propertyChangedHandler=()=>{this.refreshFormStatus()};this.eventService.afterPropertyChanged.add(this.propertyChangedHandler);this.refreshFormStatus()}ngOnDestroy(){if(this.elementFocusHandler){this.eventService.onElementFocus.remove(this.elementFocusHandler);this.elementFocusHandler=null}if(this.dragStartHandler){this.eventService.onDragStart.remove(this.dragStartHandler);this.dragStartHandler=null}if(this.dragEndHandler){this.eventService.onDragEnd.remove(this.dragEndHandler);this.dragEndHandler=null}if(this.dropHandler){this.eventService.onDrop.remove(this.dropHandler);this.dropHandler=null}if(this.dataChangedHandler){this.dataService.onValueChanged.remove(this.dataChangedHandler);this.dataChangedHandler=null}if(this.propertyChangedHandler){this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler);this.propertyChangedHandler=null}}onFocus(){if(!this.isEditor())return;this.elementFocusService.setFocus(this.model());this.focusedElementName.set(this.resolveFocusKey(this.model()))}resolveFocusKey(e){return X(e)}onDragOver(e){e.preventDefault();this.hoveredElementName=this.model().name}onDragLeave(e){e.preventDefault();this.hoveredElementName=null}onDrop(e){e.preventDefault();if(!Array.isArray(this.column()?.rows))this.column().rows=[];if(this.column().rows.length===0)this.column().rows.push(new oe({columns:[]}));const t=H(this.model()?.parentElement?.type)?this.model().parentElement:null;const n=this.column().rows[0];this.dragAndDropService.onColumnDrop(e,t,-1,n.columns,"right");this.hoveredElementName=null;this.bumpContentVersion();this.refreshFormStatus()}blockStyle(){const e=this.model();const t=this.normalizeCssSize(e?.["panelBorderWidth"]);const n=this.normalizeCssColor(e?.["panelBorderColor"]);const r=this.normalizeCssSize(e?.["maxHeight"]);const o=this.buildBackgroundStyles(e);const a=this.normalizeCssSize(e?.["panelPadding"]);const i=this.normalizeCssSize(e?.["mobilePadding"]);const s=this.isMobileView()||this.isRealMobileViewport()?i||a:a;const c=this.isEditor()?this.applyEditorMinPadding(s):s;return{width:e?.fitContent?"fit-content":"100%","max-width":"100%",height:this.normalizeCssSize(e?.["height"]),"min-height":this.normalizeCssSize(e?.["minHeight"]),"max-height":r,overflow:this.normalizeOverflow(e?.["overflow"]),padding:c,margin:null,"border-radius":this.normalizeCssSize(e?.["panelRadius"]),"box-shadow":this.normalizeCssShadow(e?.["panelShadow"]),"background-color":this.normalizeCssColor(e?.["panelBackgroundColor"]),"background-image":o.image,"background-position":o.position,"background-size":o.size,"background-repeat":o.repeat,"background-blend-mode":o.blendMode,opacity:this.normalizeOpacity(e?.["opacity"]),"backdrop-filter":this.normalizeCssTemplate(e?.["backdropFilter"]),"border-width":t,"border-style":t?this.normalizeBorderStyle(e?.["panelBorderStyle"]):null,"border-color":n,display:this.normalizeDisplay(e?.["contentDisplay"]),"flex-direction":e?.["contentDisplay"]==="flex"?this.normalizeFlexDirection(e?.["flexDirection"]):null,"flex-wrap":e?.["contentDisplay"]==="flex"?this.normalizeFlexWrap(e?.["contentWrap"]):null,"justify-content":this.normalizeJustify(e?.["contentJustify"]),"align-items":this.normalizeAlign(e?.["contentAlign"]),"align-content":this.normalizeAlign(e?.["contentAlignContent"]),gap:this.normalizeCssSize(e?.["contentGap"]),"row-gap":this.normalizeCssSize(e?.["contentRowGap"]),"column-gap":this.normalizeCssSize(e?.["contentColumnGap"]),"grid-template-columns":e?.["contentDisplay"]==="grid"?this.normalizeCssTemplate(e?.["gridTemplateColumns"]):null,"grid-template-rows":e?.["contentDisplay"]==="grid"?this.normalizeCssTemplate(e?.["gridTemplateRows"]):null,"grid-auto-rows":e?.["contentDisplay"]==="grid"?this.normalizeCssTemplate(e?.["gridAutoRows"]):null}}hasScrollableMaxHeight(){return Boolean(this.normalizeCssSize(this.model()?.["maxHeight"]))}hasRows(){this.contentVersion();return P(this.column()?.rows)}buildRowsTemplateContext(){const e=this.templateContext();return{...e??{},rows:Array.isArray(this.column()?.rows)?this.column().rows:[],parentElement:e?.["parentElement"]??this.model()}}isFormBlock(){return this.resolveBlockType()==="form"}resolveBlockType(){return String(this.model()?.blockType??"").trim().toLowerCase()==="form"?"form":"layout"}async refreshFormStatus(){if(!this.isFormBlock()){this.applyFormStatus("valid",0);this.clearFormDataState();return}const e=++this.formRefreshToken;const t=this.collectFormChildElements();await Promise.all(t.map(a=>this.validatorService.evaluateValidators(a)));if(e!==this.formRefreshToken)return;const n=t.filter(a=>!a.hidden&&!a.disabled&&!Boolean(a["__pfInteractionLocked"]));const r=n.reduce((a,i)=>a+(Array.isArray(i.errors)?i.errors.length:0),0);const o=r>0?"invalid":"valid";this.applyFormStatus(o,r);this.syncFormDataState(o,r,n.length)}applyFormStatus(e,t){this.model().formStatus=e;this.model().formErrorsCount=t;this.model().formIsValid=e==="valid"}syncFormDataState(e,t,n){const r=String(this.model()?.name??"").trim();if(!r)return;const o=`__form.${r}`;this.dataService.setValue(`${o}.status`,e);this.dataService.setValue(`${o}.isValid`,e==="valid");this.dataService.setValue(`${o}.errorsCount`,t);this.dataService.setValue(`${o}.fieldsCount`,n)}clearFormDataState(){const e=String(this.model()?.name??"").trim();if(!e)return;this.dataService.deleteValue(`__form.${e}`)}collectFormChildElements(){const e=Object.values(this.structureService.flatModelMap??{});const t=new Set;e.forEach(n=>{const r=n;if(!r||r===this.model())return;if(!String(r.dataPath??"").trim())return;if(!this.isElementWithinBlock(r))return;t.add(r)});return Array.from(t.values())}isChangedPathWithinBlock(e){if(!e)return false;if(this.isElementWithinBlock(e.sender))return true;const t=String(e.dataPath??"").trim();if(!t)return false;return this.collectFormChildElements().some(n=>{const r=String(n?.dataPath??"").trim();if(!r)return false;return t===r||t.startsWith(`${r}.`)||t.startsWith(`${r}[`)})}isElementWithinBlock(e){if(!e||!this.model())return false;if(e===this.model())return true;let t=e.parentElement;while(t){if(t===this.model())return true;t=t.parentElement}return false}applyEditorMinPadding(e){const t=String(e??"").trim();if(!t)return It;if(t.includes("("))return t;return t.split(/\s+/).map(n=>{const r=/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n;return`max(${It}, ${r})`}).join(" ")}normalizeDisplay(e){return String(e??"").trim()==="grid"?"grid":"flex"}normalizeFlexDirection(e){return String(e??"").trim()==="row"?"row":"column"}normalizeFlexWrap(e){const t=String(e??"").trim();return["wrap","wrap-reverse","nowrap"].includes(t)?t:"nowrap"}normalizeJustify(e){return String(e??"").trim()||null}normalizeAlign(e){return String(e??"").trim()||null}normalizeCssTemplate(e){return String(e??"").trim()||null}normalizeCssColor(e){return String(e??"").trim()||null}normalizeCssShadow(e){return String(e??"").trim()||null}normalizeOverflow(e){const t=String(e??"").trim();return["visible","auto","hidden","scroll","clip"].includes(t)?t:null}normalizeBorderStyle(e){const t=String(e??"").trim();return["solid","dashed","dotted","double"].includes(t)?t:"solid"}normalizeOpacity(e){const t=String(e??"").trim();if(!t)return null;const n=Number(t);if(!Number.isFinite(n))return t;return String(Math.max(0,Math.min(1,n)))}buildBackgroundStyles(e){const t=this.normalizeBackgroundImageSource(e?.["backgroundImage"]);if(!t)return{image:null,position:null,size:null,repeat:null,blendMode:null};const n=this.normalizeCssColor(e?.["backgroundOverlayColor"]);const r=this.normalizeCssTemplate(e?.["backgroundPosition"])??"center center";const o=this.normalizeCssTemplate(e?.["backgroundSize"])??"cover";const a=this.normalizeCssTemplate(e?.["backgroundRepeat"])??"no-repeat";const i=this.normalizeCssTemplate(e?.["backgroundBlendMode"]);if(!n)return{image:t,position:r,size:o,repeat:a,blendMode:i};return{image:`linear-gradient(${n}, ${n}), ${t}`,position:`0 0, ${r}`,size:`auto, ${o}`,repeat:`repeat, ${a}`,blendMode:i}}normalizeBackgroundImageSource(e){const t=String(e??"").trim();if(!t)return null;if(/^url\(/i.test(t))return t;return`url("${t.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`}normalizeCssSize(e){const t=String(e??"").trim();if(!t)return null;if(/^-?\d+(\.\d+)?$/.test(t))return`${t}px`;return t}isRealMobileViewport(){if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return _e()}bumpContentVersion(){this.contentVersion.update(e=>e+1)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:rt,deps:[{token:K},{token:E},{token:M}],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:rt,isStandalone:true,selector:"empty-block-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null},rows:{classPropertyName:"rows",publicName:"rows",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"<div\n  class=\"nvb-empty-block\"\n  [class.nvb-empty-block--editor]=\"isEditor()\"\n  [class.nvb-empty-block--form]=\"isFormBlock()\"\n  [class.nvb-empty-block--scrollable]=\"hasScrollableMaxHeight()\"\n  [ngStyle]=\"blockStyle()\"\n  (focus)=\"onFocus()\"\n  [attr.tabindex]=\"isEditor() ? 0 : null\"\n  [attr.data-testid]=\"tid('root')\"\n>\n  @if (hasRows()) {\n    @if (rowsTemplate(); as templateRef) {\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n      ></ng-container>\n    } @else {\n      <ng-content></ng-content>\n    }\n  } @else if (isEditor()) {\n    <div\n      class=\"nvb-empty-block__placeholder\"\n      [class.nvb-empty-block__placeholder--overlay]=\"hoveredElementName === model().name\"\n      [attr.data-testid]=\"tid('placeholder')\"\n    >\n      <span class=\"material-symbols-outlined\">add_box</span>\n      <p>{{ 'emptyBlock.emptyBuilder' | uiT: 'Drop elements here to create a layout block' }}</p>\n\n      @if (dropOverlay()) {\n        <div\n          class=\"nvb-empty-block__drop-overlay\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%;max-width:100%}.nvb-empty-block{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:0;padding:0;position:relative}.nvb-empty-block--scrollable{overflow:auto;overscroll-behavior:contain}.nvb-empty-block--editor{border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);min-height:40px}.nvb-empty-block--form{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 28%,var(--nvb-color-neutral-300))}.nvb-empty-block__placeholder{box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:120px;color:var(--nvb-color-neutral-500);background:var(--nvb-color-neutral-050);width:100%;max-width:100%;min-width:0;padding:clamp(16px,5vw,28px);text-align:center}.nvb-empty-block__placeholder span{font-size:28px}.nvb-empty-block__placeholder p{margin:0;font-size:13px;overflow-wrap:anywhere}.nvb-empty-block__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-empty-block__drop-overlay{position:absolute;inset:0;z-index:20}\n"],dependencies:[{kind:"directive",type:$,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ce,decorators:[{type:L,args:[{selector:"empty-block-element",changeDetection:z.OnPush,imports:[$,N,k],host:{...ee},template:"<div\n  class=\"nvb-empty-block\"\n  [class.nvb-empty-block--editor]=\"isEditor()\"\n  [class.nvb-empty-block--form]=\"isFormBlock()\"\n  [class.nvb-empty-block--scrollable]=\"hasScrollableMaxHeight()\"\n  [ngStyle]=\"blockStyle()\"\n  (focus)=\"onFocus()\"\n  [attr.tabindex]=\"isEditor() ? 0 : null\"\n  [attr.data-testid]=\"tid('root')\"\n>\n  @if (hasRows()) {\n    @if (rowsTemplate(); as templateRef) {\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n      ></ng-container>\n    } @else {\n      <ng-content></ng-content>\n    }\n  } @else if (isEditor()) {\n    <div\n      class=\"nvb-empty-block__placeholder\"\n      [class.nvb-empty-block__placeholder--overlay]=\"hoveredElementName === model().name\"\n      [attr.data-testid]=\"tid('placeholder')\"\n    >\n      <span class=\"material-symbols-outlined\">add_box</span>\n      <p>{{ 'emptyBlock.emptyBuilder' | uiT: 'Drop elements here to create a layout block' }}</p>\n\n      @if (dropOverlay()) {\n        <div\n          class=\"nvb-empty-block__drop-overlay\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%;max-width:100%}.nvb-empty-block{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:0;padding:0;position:relative}.nvb-empty-block--scrollable{overflow:auto;overscroll-behavior:contain}.nvb-empty-block--editor{border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);min-height:40px}.nvb-empty-block--form{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 28%,var(--nvb-color-neutral-300))}.nvb-empty-block__placeholder{box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:120px;color:var(--nvb-color-neutral-500);background:var(--nvb-color-neutral-050);width:100%;max-width:100%;min-width:0;padding:clamp(16px,5vw,28px);text-align:center}.nvb-empty-block__placeholder span{font-size:28px}.nvb-empty-block__placeholder p{margin:0;font-size:13px;overflow-wrap:anywhere}.nvb-empty-block__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-empty-block__drop-overlay{position:absolute;inset:0;z-index:20}\n"]}]}],ctorParameters:()=>[{type:K},{type:E},{type:M}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],rows:[{type:l.Input,args:[{isSignal:true,alias:"rows",required:false}]}]}});var jn=Z({ProgressFlowElement:()=>pe});var pe=class ot{stepTemplateScopeId=`nvb-progress-template-${Math.random().toString(36).slice(2,11)}`;stepTemplateScopeSelector=`[data-nvb-template-scope="${this.stepTemplateScopeId}"]`;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-progress-flow","progress-flow");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);isEditor=b(R.isEditor(),...ngDevMode?[{debugName:"isEditor"}]:[]);loadingPlaceholderItems=[0,1,2];dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);activeStepValue=b("",...ngDevMode?[{debugName:"activeStepValue"}]:[]);dataVersion=b(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);hoveredElementName=null;dragAutoScrollService=p(V);dataChangedHandler=null;dragStartHandler=null;dragEndHandler=null;dropHandler=null;dataSourceLoadedHandler=()=>{this.dataVersion.update(e=>e+1);this.initializeStepRowsStorage();this.ensureValidActiveStep()};dataService=p(j);eventService=p(E);expressionService=p(Q);dragAndDropService=p(M);elementActionService=p(we);templateEngineService=p(ae);stepTemplateSource=f(()=>{this.dataVersion();const e=this.templateEngineService.resolveTemplateContentByName(String(this.model()?.stepTemplateName??"").trim(),String(this.model()?.stepTemplate??"").trim());return this.normalizeTemplate(e)},...ngDevMode?[{debugName:"stepTemplateSource"}]:[]);hasStepTemplate=f(()=>this.stepTemplateSource()!==null,...ngDevMode?[{debugName:"hasStepTemplate"}]:[]);stepTemplateCss=f(()=>{const e=this.stepTemplateSource();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.stepTemplateScopeSelector)},...ngDevMode?[{debugName:"stepTemplateCss"}]:[]);stepTemplateStyleKey=f(()=>{return`progress-flow:${String(this.model()?.name??"").trim()||this.stepTemplateScopeId}:step-template-css`},...ngDevMode?[{debugName:"stepTemplateStyleKey"}]:[]);mode=f(()=>{return String(this.model()?.mode??"stepper").trim().toLowerCase()==="timeline"?"timeline":"stepper"},...ngDevMode?[{debugName:"mode"}]:[]);variant=f(()=>{const e=String(this.model()?.variant??"default").trim().toLowerCase();if(["soft","underline","plain","accordion","side"].includes(e))return e;return"default"},...ngDevMode?[{debugName:"variant"}]:[]);shellClass=f(()=>{return[this.variant()==="plain"?"nvb-progress-shell--plain":"",this.variant()==="side"&&!this.isInlineContentMode()?"nvb-progress-shell--side":""].filter(Boolean).join(" ")},...ngDevMode?[{debugName:"shellClass"}]:[]);modeClass=f(()=>{return[this.mode()==="timeline"?"nvb-progress--timeline":"nvb-progress--stepper",`nvb-progress--variant-${this.variant()}`].join(" ")},...ngDevMode?[{debugName:"modeClass"}]:[]);visibleItems=f(()=>{this.dataVersion();return this.computeVisibleItems()},...ngDevMode?[{debugName:"visibleItems"}]:[]);dataSourceLoading=f(()=>{this.dataVersion();return Boolean(this.model()?.dataSource)&&!Boolean(this.model()["dataSourceLoaded"])&&!this.isEditor()},...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.initializeStepRowsStorage();this.initializeActiveStep();this.dataChangedHandler=e=>{this.dataVersion.update(t=>t+1);this.ensureValidActiveStep(e)};this.dataService.onValueChanged.add(this.dataChangedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler);this.model().afterDataSourceLoad?.add(this.dataSourceLoadedHandler);this.dragStartHandler=()=>{this.dropOverlay.set(true)};this.eventService.onDragStart.add(this.dragStartHandler);this.dragEndHandler=()=>{this.dropOverlay.set(false)};this.eventService.onDragEnd.add(this.dragEndHandler);this.dropHandler=()=>{this.dropOverlay.set(false);this.dataVersion.update(e=>e+1)};this.eventService.onDrop.add(this.dropHandler)}ngOnDestroy(){if(this.dataChangedHandler){this.dataService.onValueChanged.remove(this.dataChangedHandler);this.dataChangedHandler=null}this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler);this.model().afterDataSourceLoad?.remove(this.dataSourceLoadedHandler);if(this.dragStartHandler){this.eventService.onDragStart.remove(this.dragStartHandler);this.dragStartHandler=null}if(this.dragEndHandler){this.eventService.onDragEnd.remove(this.dragEndHandler);this.dragEndHandler=null}if(this.dropHandler){this.eventService.onDrop.remove(this.dropHandler);this.dropHandler=null}}isTimelineMode(){return this.mode()==="timeline"}isAccordionVariant(){return this.variant()==="accordion"}isInlineContentMode(){return this.isAccordionVariant()||this.isTimelineMode()}hasContentRows(){this.dataVersion();return P(this.column()?.rows)}buildRowsTemplateContext(){const e=this.templateContext();return{...e??{},rows:Array.isArray(this.column()?.rows)?this.column().rows:[],parentElement:e?.["parentElement"]??this.model()}}shouldRenderContent(){return this.model().showContent!==false}resolveItemIdentity(e,t){return this.resolveItemValue(e,t)||`step-${t+1}`}resolveItemLabel(e,t){const n=String(e?.label??"").trim();if(n)return n;return`Step ${t+1}`}resolveItemValue(e,t){const n=String(e?.id??"").trim();if(n)return n;const r=String(e?.value??"").trim();if(r)return r;return`step${t+1}`}isStepActive(e,t){return this.activeStepValue()===this.resolveItemValue(e,t)}itemClass(e,t){return{"nvb-progress__item--completed":this.isStepCompleted(e,t),"nvb-progress__item--active":this.isStepActive(e,t),"nvb-progress__item--disabled":this.isStepDisabled(e)}}isStepCompleted(e,t){const n=String(e?.completedIf??"").trim();if(n)return this.evaluateCondition(n,false);const r=this.resolveActiveVisibleIndex();return r>=0&&t<r}isStepDisabled(e){if(this.evaluateCondition(String(e?.disabledIf??"").trim(),false))return true;if(this.isEditor())return false;return this.model().allowManualNavigation===false}activeStepDescription(){const e=String(this.activeStepValue()??"").trim();if(!e)return null;const t=this.visibleItems();const n=t.findIndex((r,o)=>this.resolveItemValue(r,o)===e);if(n<0)return null;return String(t[n]?.value??"").trim()||null}renderStepTemplate(e,t){const n=this.stepTemplateSource();if(!n)return"";return this.templateEngineService.renderTemplate(n,this.buildStepTemplateContext(e,t))}onItemClick(e,t,n){n.preventDefault();n.stopPropagation();if(this.isInteractionLocked())return;if(this.isStepDisabled(e))return;const r=this.resolveItemValue(e,t);const o=this.activeStepValue();const a=this.resolveStepActionValue(e,t);const i={previousValue:o,value:a,activeValue:r,index:t,item:e,row:e};const s=String(this.model().name??"").trim();if(s)i[s]=this.buildRuntimeStatePayload(r,a,e,t);if(!this.isEditor())this.elementActionService.runActions(this.model(),this.model().events??[],"click",i);if(!r||o===r)return;this.persistRowsForStep(o);this.activeStepValue.set(r);this.activateRowsForStep(r);this.model().activeIndex=t;if(!this.isEditor()){this.syncActiveStepToData(r,t,a,e);this.elementActionService.runActions(this.model(),this.model().events??[],"change",i)}}onDragOver(e){e.preventDefault();this.hoveredElementName=this.model().name}onDragLeave(e){e.preventDefault();this.hoveredElementName=null}onDrop(e){if(!this.isEditor()&&this.isInteractionLocked())return;e.preventDefault();this.ensureActiveStepRowsReference();if(!Array.isArray(this.column()?.rows))this.column().rows=[];if(this.column().rows.length===0)this.column().rows.push(new oe({columns:[]}));const t=this.column().rows[0];const n=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onColumnDrop(e,n,-1,t.columns,"right");this.hoveredElementName=null}initializeActiveStep(){const e=this.dataService.getValue(this.resolveActiveStepPath());const t=this.getAllItems();const n=this.resolveActiveStepValueFromUnknown(e,t);if(n)this.activeStepValue.set(n);else{const r=Number(this.model()?.activeIndex??0);if(Number.isFinite(r)&&r>=0&&r<t.length)this.activeStepValue.set(this.resolveItemValue(t[r],r))}this.ensureValidActiveStep()}propertyChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.ensureValidActiveStep()};buildStepTemplateContext(e,t){const n=this.resolveItemValue(e,t);const r={...this.dataService.getData()??{},item:e,row:e,value:e,step:e,itemValue:n,stepValue:n,label:this.resolveItemLabel(e,t),description:String(e?.value??"").trim(),index:t,active:this.isStepActive(e,t),selected:this.isStepActive(e,t),completed:this.isStepCompleted(e,t),disabled:this.isStepDisabled(e),element:this.model()};const o=String(this.model()?.name??"").trim();if(o)r[o]=n;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveStepTemplateFieldMap())}resolveStepTemplateFieldMap(){const e=this.model();const t=e["stepTemplateFieldMap"];if(t&&typeof t==="object"&&!Array.isArray(t))return t;const n=e["templateFieldMap"];return n&&typeof n==="object"&&!Array.isArray(n)?n:null}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();return n==="null"||n==="undefined"?null:t}ensureValidActiveStep(e){const t=this.computeVisibleItems();if(!t.length){this.persistRowsForStep(this.activeStepValue());this.activeStepValue.set("");if(this.column())this.column().rows=[];this.model().activeIndex=0;if(!this.isEditor())this.syncActiveStepToData("",0);return}const n=this.resolveLogicDrivenActiveStepValue(t);if(n){const c=this.resolveItemIndexByValue(t,n);if(c>=0){this.applyActiveStep(n,c);return}}const r=this.activeStepValue();const o=this.resolveItemIndexByValue(t,r);if(r&&o>=0&&!this.isItemConditionDisabled(t[o])){this.activateRowsForStep(r);this.model().activeIndex=o;if(!this.isEditor())this.syncActiveStepToData(r,o);return}const a=t.findIndex(c=>!this.isItemConditionDisabled(c));const i=a>=0?a:0;const s=this.resolveItemValue(t[i],i);this.applyActiveStep(s,i);if(e&&e.trigger==="load")return}applyActiveStep(e,t){const n=this.activeStepValue();if(n!==e){this.persistRowsForStep(n);this.activeStepValue.set(e)}this.activateRowsForStep(e);this.model().activeIndex=t;if(!this.isEditor())this.syncActiveStepToData(e,t)}resolveLogicDrivenActiveStepValue(e){const t=this.normalizeConditionExpression(String(this.model()?.["activeStepExpression"]??""));if(t)try{const o=this.expressionService.applyContextToExpression(t,this.model());const a=this.expressionService.runPropertyConditionSync(this.dataService.getData()??{},o);const i=this.resolveActiveStepValueFromUnknown(a,e);if(i)return i}catch{}const n=String(this.model()?.["activeStepDataPath"]??"").trim();if(n){const o=this.dataService.getValue(n);const a=this.resolveActiveStepValueFromUnknown(o,e);if(a)return a}const r=e.findIndex(o=>this.evaluateCondition(String(o?.activeIf??""),false));if(r>=0)return this.resolveItemValue(e[r],r);return null}resolveActiveStepValueFromUnknown(e,t){if(!t.length)return null;if(typeof e==="number"&&Number.isFinite(e)){const a=Math.floor(e);if(a>=0&&a<t.length)return this.resolveItemValue(t[a],a)}const n=String(e??"").trim();if(!n)return null;const r=this.resolveItemIndexByValue(t,n);if(r>=0)return this.resolveItemValue(t[r],r);if(/^\d+$/.test(n)){const a=Number(n);if(Number.isFinite(a)&&a>=0&&a<t.length)return this.resolveItemValue(t[a],a)}const o=t.findIndex((a,i)=>this.resolveItemLabel(a,i)===n);if(o>=0)return this.resolveItemValue(t[o],o);return null}resolveActiveVisibleIndex(){return this.resolveItemIndexByValue(this.visibleItems(),this.activeStepValue())}resolveItemIndexByValue(e,t){const n=String(t??"").trim();if(!n)return-1;return e.findIndex((r,o)=>this.resolveItemValue(r,o)===n)}initializeStepRowsStorage(){const e=this.column();if(!e)return;const t=this.getAllItems();const n=this.ensureStepRowsStorage();const r=Array.isArray(e.rows)?e.rows:[];if(!Object.values(n).some(o=>P(o))&&t.length>0&&P(r)){const o=this.resolveItemValue(t[0],0);n[o]=r}t.forEach((o,a)=>{const i=this.resolveItemValue(o,a);if(!Array.isArray(n[i]))n[i]=[]})}ensureActiveStepRowsReference(){const e=String(this.activeStepValue()??"").trim();if(!e)return;this.activateRowsForStep(e)}ensureStepRowsStorage(){const e=this.column();if(!e)return{};if(!e.tabRows||typeof e.tabRows!=="object")e.tabRows={};return e.tabRows}persistRowsForStep(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureStepRowsStorage();r[n]=Array.isArray(t.rows)?t.rows:[]}activateRowsForStep(e){const t=this.column();const n=String(e??"").trim();if(!t||!n)return;const r=this.ensureStepRowsStorage();if(!Array.isArray(r[n]))r[n]=[];t.rows=r[n]}getAllItems(){return Array.isArray(this.model()?.items)?this.model().items:[]}computeVisibleItems(){return(Array.isArray(this.model()?.items)?this.model().items:[]).filter(e=>this.evaluateCondition(String(e?.visibleIf??""),true))}evaluateCondition(e,t){const n=this.normalizeConditionExpression(e);if(!n)return t;try{const r=this.expressionService.applyContextToExpression(n,this.model());const o=this.expressionService.runPropertyConditionSync(this.dataService.getData()??{},r);return Boolean(o)}catch{return t}}normalizeConditionExpression(e){return String(e??"").replace(/\{([^}]+)\}/g,(t,n)=>String(n??"").trim()).trim()}isItemConditionDisabled(e){return this.evaluateCondition(String(e?.disabledIf??""),false)}resolveActiveStepPath(){return`__progressFlow.${String(this.model()?.name??"progressFlow").trim()||"progressFlow"}.active`}resolveActiveStepIndexPath(){return`__progressFlow.${String(this.model()?.name??"progressFlow").trim()||"progressFlow"}.activeIndex`}syncActiveStepToData(e,t,n,r){const o=this.resolveRuntimeState(e,t,n,r);this.dataService.setValue(this.resolveActiveStepPath(),e);this.dataService.setValue(this.resolveActiveStepIndexPath(),t);this.dataService.setValue(`__progressFlow.${o.elementName}.selectedStep`,o.selectedValue);this.dataService.setValue(`__progressFlow.${o.elementName}.activeStep`,e);this.dataService.setValue(`__progressFlow.${o.elementName}.selectedStepItem`,o.item);this.dataService.setValue(`__progressFlow.${o.elementName}.selectedStepIndex`,o.index);const a=String(this.model()?.activeStepDataPath??"").trim();if(a)this.dataService.setValue(a,e)}resolveStepActionValue(e,t){const n=String(this.model()?.stepValueKey??"").trim()||String(this.model()?.dataSource?.optionValue??"").trim();if(!n)return e;return this.readPath(e,n)??this.resolveItemValue(e,t)}buildRuntimeStatePayload(e,t,n,r){return{selectedStep:t,activeStep:e,selectedStepItem:n,selectedStepIndex:r,value:t,item:n,index:r}}resolveRuntimeState(e,t,n,r){const o=String(this.model()?.name??"progressFlow").trim()||"progressFlow";if(r&&t>=0)return{elementName:o,selectedValue:n??this.resolveStepActionValue(r,t),item:r,index:t};const a=this.computeVisibleItems();const i=a.findIndex((s,c)=>this.resolveItemValue(s,c)===e);if(i>=0){const s=a[i];return{elementName:o,selectedValue:n??this.resolveStepActionValue(s,i),item:s,index:i}}return{elementName:o,selectedValue:n??(e||null),item:null,index:t}}readPath(e,t){const n=String(t??"").trim().split(".").filter(o=>o.length>0);if(!n.length||!e)return;let r=e;for(const o of n){if(!r||typeof r!=="object"||Array.isArray(r))return;r=r[o]}return r}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ot,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:ot,isStandalone:true,selector:"progress-flow-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null}},ngImport:l,template:"<element-wrapper [model]=\"model()\">\n  @if (stepTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"stepTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"stepTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-progress-shell\"\n    [ngClass]=\"shellClass()\"\n    [class.nvb-progress-shell--loading]=\"dataSourceLoading()\"\n  >\n    <ol\n      class=\"nvb-progress\"\n      [ngClass]=\"modeClass()\"\n      [attr.aria-label]=\"model().label || model().name\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n      [attr.data-testid]=\"tid('root')\"\n    >\n      @if (dataSourceLoading()) {\n        @for (placeholder of loadingPlaceholderItems; track placeholder; let isLast = $last) {\n          <li class=\"nvb-progress__item nvb-progress__item--loading\" aria-hidden=\"true\">\n            <span class=\"nvb-progress__trigger nvb-progress__trigger--loading\">\n              <span class=\"nvb-progress__marker nvb-progress__marker--loading\"></span>\n              <span class=\"nvb-progress__body\">\n                <span class=\"nvb-progress__loading-line nvb-progress__loading-line--label\"></span>\n                <span class=\"nvb-progress__loading-line nvb-progress__loading-line--value\"></span>\n              </span>\n              @if (model().showConnector && !isLast) {\n                <span class=\"nvb-progress__connector\"></span>\n              }\n            </span>\n          </li>\n        }\n        <li class=\"nvb-sr-only\" role=\"status\" aria-live=\"polite\">Loading steps...</li>\n      } @else {\n        @for (\n          item of visibleItems();\n          track resolveItemIdentity(item, $index);\n          let itemIndex = $index;\n          let isLast = $last\n        ) {\n          <li class=\"nvb-progress__item\" [ngClass]=\"itemClass(item, itemIndex)\">\n            <button\n              type=\"button\"\n              class=\"nvb-progress__trigger\"\n              [disabled]=\"isStepDisabled(item)\"\n              [attr.aria-current]=\"isStepActive(item, itemIndex) ? 'step' : null\"\n              [attr.aria-expanded]=\"isInlineContentMode() ? (isStepActive(item, itemIndex) ? 'true' : 'false') : null\"\n              [attr.aria-label]=\"resolveItemLabel(item, itemIndex) | dynamicText: model()\"\n              [attr.data-testid]=\"tid('step', resolveItemIdentity(item, itemIndex))\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              <span class=\"nvb-progress__marker\">\n                @if (model().showNumbers) {\n                  <span>{{ itemIndex + 1 }}</span>\n                } @else {\n                  <span class=\"material-symbols-outlined\">fiber_manual_record</span>\n                }\n              </span>\n\n              <span class=\"nvb-progress__body\">\n                @if (hasStepTemplate()) {\n                  <span\n                    class=\"nvb-progress__template\"\n                    [attr.data-nvb-template-scope]=\"stepTemplateScopeId\"\n                    [innerHTML]=\"renderStepTemplate(item, itemIndex)\"\n                  ></span>\n                } @else {\n                  <span class=\"nvb-progress__label\">{{\n                    resolveItemLabel(item, itemIndex) | dynamicText: model()\n                  }}</span>\n                  @if (item.value) {\n                    <span class=\"nvb-progress__value\">{{ item.value | dynamicText: model() }}</span>\n                  }\n                }\n              </span>\n\n              @if (model().showConnector && !isLast) {\n                <span class=\"nvb-progress__connector\"></span>\n              }\n            </button>\n\n            @if (isInlineContentMode() && isStepActive(item, itemIndex) && shouldRenderContent()) {\n              <div class=\"nvb-progress__item-content\">\n                @if (dataSourceLoading()) {\n                  <div class=\"nvb-progress__content-loading\" role=\"status\" aria-live=\"polite\">\n                    <span class=\"nvb-progress__loading-line nvb-progress__loading-line--wide\" aria-hidden=\"true\"></span>\n                    <span class=\"nvb-progress__loading-line\" aria-hidden=\"true\"></span>\n                  </div>\n                } @else if (hasContentRows()) {\n                  @if (rowsTemplate(); as templateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n                    ></ng-container>\n                  } @else {\n                    <ng-content></ng-content>\n                  }\n                } @else if (isEditor()) {\n                  <div\n                    class=\"nvb-progress__placeholder\"\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    [attr.data-testid]=\"tid('empty-builder')\"\n                    [class.nvb-progress__placeholder--overlay]=\"hoveredElementName === model().name\"\n                  >\n                    <span class=\"material-symbols-outlined\">note_stack_add</span>\n                    <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into step section' }}</p>\n\n                    @if (dropOverlay()) {\n                      <div\n                        class=\"nvb-progress__drop-overlay\"\n                        (dragover)=\"onDragOver($event)\"\n                        (dragleave)=\"onDragLeave($event)\"\n                        (drop)=\"onDrop($event)\"\n                      ></div>\n                    }\n                  </div>\n                } @else if (activeStepDescription(); as description) {\n                  <div class=\"nvb-progress__description\">{{ description | dynamicText: model() }}</div>\n                }\n              </div>\n            }\n          </li>\n        } @empty {\n          <li class=\"nvb-progress__empty\">\n            {{ 'accordion.noItems' | uiT: 'No steps configured' }}\n          </li>\n        }\n      }\n    </ol>\n\n    @if (shouldRenderContent() && !isInlineContentMode()) {\n      <section\n        class=\"nvb-progress__content\"\n        [class.nvb-progress__content--empty]=\"!hasContentRows()\"\n        [class.nvb-progress__content--timeline]=\"isTimelineMode()\"\n        role=\"region\"\n        [attr.aria-label]=\"model().label || model().name\"\n        [attr.data-testid]=\"tid('content')\"\n      >\n        @if (dataSourceLoading()) {\n          <div class=\"nvb-progress__content-loading\" role=\"status\" aria-live=\"polite\">\n            <span class=\"nvb-progress__loading-line nvb-progress__loading-line--wide\" aria-hidden=\"true\"></span>\n            <span class=\"nvb-progress__loading-line\" aria-hidden=\"true\"></span>\n            <span class=\"nvb-sr-only\">Loading step content...</span>\n          </div>\n        } @else if (hasContentRows()) {\n          @if (rowsTemplate(); as templateRef) {\n            <ng-container\n              *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n            ></ng-container>\n          } @else {\n            <ng-content></ng-content>\n          }\n        } @else if (isEditor()) {\n          <div\n            class=\"nvb-progress__placeholder\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.data-testid]=\"tid('empty-builder')\"\n            [class.nvb-progress__placeholder--overlay]=\"hoveredElementName === model().name\"\n          >\n            <span class=\"material-symbols-outlined\">note_stack_add</span>\n            <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into step section' }}</p>\n\n            @if (dropOverlay()) {\n              <div\n                class=\"nvb-progress__drop-overlay\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event)\"\n              ></div>\n            }\n          </div>\n        } @else if (activeStepDescription(); as description) {\n          <div class=\"nvb-progress__description\">{{ description | dynamicText: model() }}</div>\n        }\n      </section>\n    }\n  </div>\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-progress-shell{width:100%;display:grid;gap:16px;padding:12px 16px;box-sizing:border-box}.nvb-progress-shell--loading{cursor:wait}.nvb-progress-shell--plain{gap:0;padding:0}.nvb-progress-shell--side{grid-template-columns:clamp(200px,28%,320px) minmax(0,1fr);gap:20px;align-items:stretch}@media(max-width:640px){.nvb-progress-shell--side{grid-template-columns:minmax(0,1fr)}}.nvb-progress{list-style:none;margin:0;padding:0;width:100%}.nvb-progress__item{position:relative}.nvb-progress--stepper{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.nvb-progress--stepper.nvb-progress--variant-default,.nvb-progress--horizontal.nvb-progress--variant-default{padding-top:6px}.nvb-progress--stepper>.nvb-progress__item{flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.nvb-progress--stepper .nvb-progress__trigger{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:0 8px 16px;text-align:center;cursor:pointer;color:inherit;font:inherit;overflow:visible}.nvb-progress--stepper .nvb-progress__trigger:disabled{cursor:not-allowed;opacity:.5}.nvb-progress--stepper .nvb-progress__trigger:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);border-radius:var(--nvb-radius-lg)}.nvb-progress--stepper .nvb-progress__marker{width:32px;height:32px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-500);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease}.nvb-progress--stepper .nvb-progress__marker span.material-symbols-outlined{font-size:16px}.nvb-progress--stepper .nvb-progress__body{display:flex;flex-direction:column;align-items:center;gap:3px}.nvb-progress--stepper .nvb-progress__label{font-size:13px;color:var(--nvb-color-neutral-700);font-weight:600;text-align:center;line-height:1.4}.nvb-progress--stepper .nvb-progress__value{font-size:12px;color:var(--nvb-color-neutral-500);text-align:center;line-height:1.4}.nvb-progress--stepper .nvb-progress__connector{position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--nvb-color-neutral-300);z-index:0;pointer-events:none;right:auto;border-radius:var(--nvb-radius-full);transition:background-color .18s ease}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__trigger{background:transparent}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__marker{border:2px solid var(--nvb-color-primary-500);background:var(--nvb-color-neutral-000);color:var(--nvb-color-primary-700);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__label{color:var(--nvb-color-primary-700)}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__trigger{background:transparent}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000)}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__connector{background:var(--nvb-color-primary-500)}.nvb-progress--stepper .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.5;cursor:not-allowed}.nvb-progress--timeline{display:flex;flex-direction:column;gap:0;background:transparent}.nvb-progress--timeline>.nvb-progress__item{position:relative}.nvb-progress--timeline .nvb-progress__trigger{position:static;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:2px 12px 28px;display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%;overflow:visible}.nvb-progress--timeline .nvb-progress__trigger:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 55%,transparent)}.nvb-progress--timeline .nvb-progress__trigger:disabled{cursor:not-allowed}.nvb-progress--timeline .nvb-progress__marker{width:16px;height:16px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-050, #f8fafc);color:transparent;font-size:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;margin-top:1px;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,width .18s ease,height .18s ease}.nvb-progress--timeline .nvb-progress__body{display:flex;flex-direction:column;gap:3px;min-width:0}.nvb-progress--timeline .nvb-progress__label{font-size:14px;color:var(--nvb-color-neutral-800);font-weight:600;text-align:left;line-height:1.4}.nvb-progress--timeline .nvb-progress__value{font-size:13px;color:var(--nvb-color-neutral-500);text-align:left;line-height:1.5}.nvb-progress--timeline .nvb-progress__connector{position:absolute;inset:22px auto 0 19px;width:2px;height:auto;background:var(--nvb-color-neutral-200);pointer-events:none;z-index:0;border-radius:var(--nvb-radius-full)}.nvb-progress--timeline .nvb-progress__item:not(.nvb-progress__item--completed):not(.nvb-progress__item--active) .nvb-progress__connector{background:repeating-linear-gradient(to bottom,var(--nvb-color-neutral-300) 0,var(--nvb-color-neutral-300) 4px,transparent 4px,transparent 9px)}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__trigger{background:transparent}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-success-500);background:var(--nvb-color-success-500)}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__connector{background:color-mix(in oklab,var(--nvb-color-success-500) 65%,var(--nvb-color-neutral-300))}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__trigger{background:transparent}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__marker{width:18px;height:18px;margin-top:0;border:3px solid var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__connector{top:24px}.nvb-progress--timeline .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.6;cursor:not-allowed}.nvb-progress--horizontal{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.nvb-progress--horizontal>.nvb-progress__item{flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.nvb-progress--horizontal .nvb-progress__trigger{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:0 8px 16px;text-align:center;cursor:pointer;color:inherit;font:inherit;overflow:visible}.nvb-progress--horizontal .nvb-progress__marker{width:32px;height:32px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-500);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.nvb-progress--horizontal .nvb-progress__body{display:flex;flex-direction:column;align-items:center;gap:3px}.nvb-progress--horizontal .nvb-progress__label{font-size:13px;color:var(--nvb-color-neutral-700);font-weight:600;text-align:center}.nvb-progress--horizontal .nvb-progress__value{font-size:12px;color:var(--nvb-color-neutral-500);text-align:center}.nvb-progress--horizontal .nvb-progress__connector{position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--nvb-color-neutral-300);z-index:0;pointer-events:none;border-radius:var(--nvb-radius-full)}.nvb-progress--horizontal .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000)}.nvb-progress--horizontal .nvb-progress__item--completed .nvb-progress__connector{background:var(--nvb-color-primary-500)}.nvb-progress--horizontal .nvb-progress__item--active .nvb-progress__marker{border:2px solid var(--nvb-color-primary-500);background:var(--nvb-color-neutral-000);color:var(--nvb-color-primary-700);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--horizontal .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.5;cursor:not-allowed}.nvb-progress--stepper.nvb-progress--variant-soft{flex-wrap:wrap;gap:8px;overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-soft>.nvb-progress__item{flex:1 1 160px;align-items:stretch}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:14px 16px;gap:12px;border:1px solid var(--nvb-color-neutral-300);border-radius:14px;background:var(--nvb-color-neutral-000);min-height:76px;box-shadow:0 1px 2px color-mix(in oklab,var(--nvb-color-neutral-900) 6%,transparent)}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__marker{width:36px;height:36px;box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__label{text-align:left}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__value{font-size:13px;text-align:left}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--active .nvb-progress__trigger{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 6%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--completed .nvb-progress__trigger{border-color:color-mix(in oklab,var(--nvb-color-success-500) 28%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 6%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-underline{flex-wrap:wrap;border-bottom:2px solid var(--nvb-color-neutral-200);overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-underline>.nvb-progress__item{flex:1 1 100px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:10px 12px 14px;border-radius:0;position:relative}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__trigger:after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:2px;border-radius:var(--nvb-radius-full);background:transparent;transition:background-color .2s ease}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__marker{width:24px;height:24px;font-size:11px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__label{font-size:13px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__trigger:after{background:var(--nvb-color-primary-500)}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__label{color:var(--nvb-color-primary-700)}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--completed .nvb-progress__trigger:after{background:color-mix(in oklab,var(--nvb-color-success-500) 70%,var(--nvb-color-neutral-300))}.nvb-progress--stepper.nvb-progress--variant-plain{gap:0;overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__trigger{padding:4px 8px}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__marker,.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__body{align-items:center}.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__marker,.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__connector{display:none}.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__trigger{grid-template-columns:1fr;padding:6px 12px 16px}.nvb-progress-shell--plain .nvb-progress__content{border:0;border-radius:0;background:transparent}.nvb-progress--stepper.nvb-progress--variant-accordion{flex-direction:column;flex-wrap:nowrap;overflow-x:visible;gap:6px}.nvb-progress--stepper.nvb-progress--variant-accordion>.nvb-progress__item{flex:0 0 auto;width:100%;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);overflow:hidden;background:var(--nvb-color-neutral-000);transition:border-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:12px 16px;gap:12px;border:0;border-radius:0;background:transparent;transition:background-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__label,.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__value{text-align:left}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 34%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active .nvb-progress__trigger{background:color-mix(in oklab,var(--nvb-color-primary-500) 5%,var(--nvb-color-surface-mix-target, white));border-bottom:1px solid color-mix(in oklab,var(--nvb-color-primary-500) 20%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--completed{border-color:color-mix(in oklab,var(--nvb-color-success-500) 28%,var(--nvb-color-surface-mix-target, white))}.nvb-progress__item-content{padding:12px 16px}.nvb-progress--timeline .nvb-progress__item-content{padding:4px 12px 24px 42px}.nvb-progress--stepper.nvb-progress--variant-side{flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow-x:visible;--nvb-progress-side-gap: 6px;gap:var(--nvb-progress-side-gap);border-right:1px solid var(--nvb-color-neutral-200);padding-right:16px;min-width:180px}.nvb-progress--stepper.nvb-progress--variant-side>.nvb-progress__item{flex:0 0 auto;width:100%;align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:8px;gap:10px;border:0;border-radius:var(--nvb-radius-md);width:100%;transition:background-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__trigger:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,transparent)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__label,.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__value{text-align:left}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__connector{position:absolute;left:23px;top:44px;bottom:calc(-1 * var(--nvb-progress-side-gap));width:2px;height:auto;background:var(--nvb-color-neutral-200);pointer-events:none;z-index:0;border-radius:var(--nvb-radius-full)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--active .nvb-progress__trigger{background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-radius-md)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--completed .nvb-progress__connector{background:color-mix(in oklab,var(--nvb-color-primary-500) 50%,var(--nvb-color-neutral-200))}.nvb-progress-shell--side .nvb-progress__content{border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);align-self:stretch}.nvb-progress__content{border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);padding:10px 12px 12px}.nvb-progress__content--empty{padding:0}.nvb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nvb-progress__item--loading{pointer-events:none}.nvb-progress__trigger--loading{cursor:wait}.nvb-progress__marker--loading{border-color:var(--nvb-color-neutral-200);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-progress-shimmer 1.35s ease-in-out infinite}.nvb-progress__loading-line{display:block;width:min(140px,100%);height:10px;border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-progress-shimmer 1.35s ease-in-out infinite}.nvb-progress__loading-line--label{height:12px;width:min(100px,80%)}.nvb-progress__loading-line--value{width:min(70px,60%)}.nvb-progress__loading-line--wide{width:min(520px,100%)}.nvb-progress__content-loading{display:grid;gap:10px;padding:12px}@keyframes nvb-progress-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-progress__placeholder{position:relative;min-height:120px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);margin:10px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-progress__placeholder span{font-size:30px}.nvb-progress__placeholder p{margin:0;font-size:13px}.nvb-progress__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-progress__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-progress__description{color:var(--nvb-color-neutral-600);font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word;padding:12px}.nvb-progress__empty{color:var(--nvb-color-neutral-500);font-size:12px;padding:12px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000)}\n'],dependencies:[{kind:"component",type:Te,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"component",type:F,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:A,name:"dynamicText"},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:pe,decorators:[{type:L,args:[{selector:"progress-flow-element",changeDetection:z.OnPush,imports:[Te,O,N,A,k,F],template:"<element-wrapper [model]=\"model()\">\n  @if (stepTemplateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"stepTemplateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"stepTemplateStyleKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-progress-shell\"\n    [ngClass]=\"shellClass()\"\n    [class.nvb-progress-shell--loading]=\"dataSourceLoading()\"\n  >\n    <ol\n      class=\"nvb-progress\"\n      [ngClass]=\"modeClass()\"\n      [attr.aria-label]=\"model().label || model().name\"\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\n      [attr.data-testid]=\"tid('root')\"\n    >\n      @if (dataSourceLoading()) {\n        @for (placeholder of loadingPlaceholderItems; track placeholder; let isLast = $last) {\n          <li class=\"nvb-progress__item nvb-progress__item--loading\" aria-hidden=\"true\">\n            <span class=\"nvb-progress__trigger nvb-progress__trigger--loading\">\n              <span class=\"nvb-progress__marker nvb-progress__marker--loading\"></span>\n              <span class=\"nvb-progress__body\">\n                <span class=\"nvb-progress__loading-line nvb-progress__loading-line--label\"></span>\n                <span class=\"nvb-progress__loading-line nvb-progress__loading-line--value\"></span>\n              </span>\n              @if (model().showConnector && !isLast) {\n                <span class=\"nvb-progress__connector\"></span>\n              }\n            </span>\n          </li>\n        }\n        <li class=\"nvb-sr-only\" role=\"status\" aria-live=\"polite\">Loading steps...</li>\n      } @else {\n        @for (\n          item of visibleItems();\n          track resolveItemIdentity(item, $index);\n          let itemIndex = $index;\n          let isLast = $last\n        ) {\n          <li class=\"nvb-progress__item\" [ngClass]=\"itemClass(item, itemIndex)\">\n            <button\n              type=\"button\"\n              class=\"nvb-progress__trigger\"\n              [disabled]=\"isStepDisabled(item)\"\n              [attr.aria-current]=\"isStepActive(item, itemIndex) ? 'step' : null\"\n              [attr.aria-expanded]=\"isInlineContentMode() ? (isStepActive(item, itemIndex) ? 'true' : 'false') : null\"\n              [attr.aria-label]=\"resolveItemLabel(item, itemIndex) | dynamicText: model()\"\n              [attr.data-testid]=\"tid('step', resolveItemIdentity(item, itemIndex))\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              <span class=\"nvb-progress__marker\">\n                @if (model().showNumbers) {\n                  <span>{{ itemIndex + 1 }}</span>\n                } @else {\n                  <span class=\"material-symbols-outlined\">fiber_manual_record</span>\n                }\n              </span>\n\n              <span class=\"nvb-progress__body\">\n                @if (hasStepTemplate()) {\n                  <span\n                    class=\"nvb-progress__template\"\n                    [attr.data-nvb-template-scope]=\"stepTemplateScopeId\"\n                    [innerHTML]=\"renderStepTemplate(item, itemIndex)\"\n                  ></span>\n                } @else {\n                  <span class=\"nvb-progress__label\">{{\n                    resolveItemLabel(item, itemIndex) | dynamicText: model()\n                  }}</span>\n                  @if (item.value) {\n                    <span class=\"nvb-progress__value\">{{ item.value | dynamicText: model() }}</span>\n                  }\n                }\n              </span>\n\n              @if (model().showConnector && !isLast) {\n                <span class=\"nvb-progress__connector\"></span>\n              }\n            </button>\n\n            @if (isInlineContentMode() && isStepActive(item, itemIndex) && shouldRenderContent()) {\n              <div class=\"nvb-progress__item-content\">\n                @if (dataSourceLoading()) {\n                  <div class=\"nvb-progress__content-loading\" role=\"status\" aria-live=\"polite\">\n                    <span class=\"nvb-progress__loading-line nvb-progress__loading-line--wide\" aria-hidden=\"true\"></span>\n                    <span class=\"nvb-progress__loading-line\" aria-hidden=\"true\"></span>\n                  </div>\n                } @else if (hasContentRows()) {\n                  @if (rowsTemplate(); as templateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n                    ></ng-container>\n                  } @else {\n                    <ng-content></ng-content>\n                  }\n                } @else if (isEditor()) {\n                  <div\n                    class=\"nvb-progress__placeholder\"\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    [attr.data-testid]=\"tid('empty-builder')\"\n                    [class.nvb-progress__placeholder--overlay]=\"hoveredElementName === model().name\"\n                  >\n                    <span class=\"material-symbols-outlined\">note_stack_add</span>\n                    <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into step section' }}</p>\n\n                    @if (dropOverlay()) {\n                      <div\n                        class=\"nvb-progress__drop-overlay\"\n                        (dragover)=\"onDragOver($event)\"\n                        (dragleave)=\"onDragLeave($event)\"\n                        (drop)=\"onDrop($event)\"\n                      ></div>\n                    }\n                  </div>\n                } @else if (activeStepDescription(); as description) {\n                  <div class=\"nvb-progress__description\">{{ description | dynamicText: model() }}</div>\n                }\n              </div>\n            }\n          </li>\n        } @empty {\n          <li class=\"nvb-progress__empty\">\n            {{ 'accordion.noItems' | uiT: 'No steps configured' }}\n          </li>\n        }\n      }\n    </ol>\n\n    @if (shouldRenderContent() && !isInlineContentMode()) {\n      <section\n        class=\"nvb-progress__content\"\n        [class.nvb-progress__content--empty]=\"!hasContentRows()\"\n        [class.nvb-progress__content--timeline]=\"isTimelineMode()\"\n        role=\"region\"\n        [attr.aria-label]=\"model().label || model().name\"\n        [attr.data-testid]=\"tid('content')\"\n      >\n        @if (dataSourceLoading()) {\n          <div class=\"nvb-progress__content-loading\" role=\"status\" aria-live=\"polite\">\n            <span class=\"nvb-progress__loading-line nvb-progress__loading-line--wide\" aria-hidden=\"true\"></span>\n            <span class=\"nvb-progress__loading-line\" aria-hidden=\"true\"></span>\n            <span class=\"nvb-sr-only\">Loading step content...</span>\n          </div>\n        } @else if (hasContentRows()) {\n          @if (rowsTemplate(); as templateRef) {\n            <ng-container\n              *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\n            ></ng-container>\n          } @else {\n            <ng-content></ng-content>\n          }\n        } @else if (isEditor()) {\n          <div\n            class=\"nvb-progress__placeholder\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.data-testid]=\"tid('empty-builder')\"\n            [class.nvb-progress__placeholder--overlay]=\"hoveredElementName === model().name\"\n          >\n            <span class=\"material-symbols-outlined\">note_stack_add</span>\n            <p>{{ 'tabs.emptyBuilder' | uiT: 'Drop content into step section' }}</p>\n\n            @if (dropOverlay()) {\n              <div\n                class=\"nvb-progress__drop-overlay\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event)\"\n              ></div>\n            }\n          </div>\n        } @else if (activeStepDescription(); as description) {\n          <div class=\"nvb-progress__description\">{{ description | dynamicText: model() }}</div>\n        }\n      </section>\n    }\n  </div>\n</element-wrapper>\n",styles:['@charset "UTF-8";:host{display:block;width:100%}.nvb-progress-shell{width:100%;display:grid;gap:16px;padding:12px 16px;box-sizing:border-box}.nvb-progress-shell--loading{cursor:wait}.nvb-progress-shell--plain{gap:0;padding:0}.nvb-progress-shell--side{grid-template-columns:clamp(200px,28%,320px) minmax(0,1fr);gap:20px;align-items:stretch}@media(max-width:640px){.nvb-progress-shell--side{grid-template-columns:minmax(0,1fr)}}.nvb-progress{list-style:none;margin:0;padding:0;width:100%}.nvb-progress__item{position:relative}.nvb-progress--stepper{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.nvb-progress--stepper.nvb-progress--variant-default,.nvb-progress--horizontal.nvb-progress--variant-default{padding-top:6px}.nvb-progress--stepper>.nvb-progress__item{flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.nvb-progress--stepper .nvb-progress__trigger{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:0 8px 16px;text-align:center;cursor:pointer;color:inherit;font:inherit;overflow:visible}.nvb-progress--stepper .nvb-progress__trigger:disabled{cursor:not-allowed;opacity:.5}.nvb-progress--stepper .nvb-progress__trigger:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring);border-radius:var(--nvb-radius-lg)}.nvb-progress--stepper .nvb-progress__marker{width:32px;height:32px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-500);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease}.nvb-progress--stepper .nvb-progress__marker span.material-symbols-outlined{font-size:16px}.nvb-progress--stepper .nvb-progress__body{display:flex;flex-direction:column;align-items:center;gap:3px}.nvb-progress--stepper .nvb-progress__label{font-size:13px;color:var(--nvb-color-neutral-700);font-weight:600;text-align:center;line-height:1.4}.nvb-progress--stepper .nvb-progress__value{font-size:12px;color:var(--nvb-color-neutral-500);text-align:center;line-height:1.4}.nvb-progress--stepper .nvb-progress__connector{position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--nvb-color-neutral-300);z-index:0;pointer-events:none;right:auto;border-radius:var(--nvb-radius-full);transition:background-color .18s ease}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__trigger{background:transparent}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__marker{border:2px solid var(--nvb-color-primary-500);background:var(--nvb-color-neutral-000);color:var(--nvb-color-primary-700);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--stepper .nvb-progress__item--active .nvb-progress__label{color:var(--nvb-color-primary-700)}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__trigger{background:transparent}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000)}.nvb-progress--stepper .nvb-progress__item--completed .nvb-progress__connector{background:var(--nvb-color-primary-500)}.nvb-progress--stepper .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.5;cursor:not-allowed}.nvb-progress--timeline{display:flex;flex-direction:column;gap:0;background:transparent}.nvb-progress--timeline>.nvb-progress__item{position:relative}.nvb-progress--timeline .nvb-progress__trigger{position:static;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:2px 12px 28px;display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%;overflow:visible}.nvb-progress--timeline .nvb-progress__trigger:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 55%,transparent)}.nvb-progress--timeline .nvb-progress__trigger:disabled{cursor:not-allowed}.nvb-progress--timeline .nvb-progress__marker{width:16px;height:16px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-050, #f8fafc);color:transparent;font-size:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;margin-top:1px;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,width .18s ease,height .18s ease}.nvb-progress--timeline .nvb-progress__body{display:flex;flex-direction:column;gap:3px;min-width:0}.nvb-progress--timeline .nvb-progress__label{font-size:14px;color:var(--nvb-color-neutral-800);font-weight:600;text-align:left;line-height:1.4}.nvb-progress--timeline .nvb-progress__value{font-size:13px;color:var(--nvb-color-neutral-500);text-align:left;line-height:1.5}.nvb-progress--timeline .nvb-progress__connector{position:absolute;inset:22px auto 0 19px;width:2px;height:auto;background:var(--nvb-color-neutral-200);pointer-events:none;z-index:0;border-radius:var(--nvb-radius-full)}.nvb-progress--timeline .nvb-progress__item:not(.nvb-progress__item--completed):not(.nvb-progress__item--active) .nvb-progress__connector{background:repeating-linear-gradient(to bottom,var(--nvb-color-neutral-300) 0,var(--nvb-color-neutral-300) 4px,transparent 4px,transparent 9px)}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__trigger{background:transparent}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-success-500);background:var(--nvb-color-success-500)}.nvb-progress--timeline .nvb-progress__item--completed .nvb-progress__connector{background:color-mix(in oklab,var(--nvb-color-success-500) 65%,var(--nvb-color-neutral-300))}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__trigger{background:transparent}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__marker{width:18px;height:18px;margin-top:0;border:3px solid var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--timeline .nvb-progress__item--active .nvb-progress__connector{top:24px}.nvb-progress--timeline .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.6;cursor:not-allowed}.nvb-progress--horizontal{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.nvb-progress--horizontal>.nvb-progress__item{flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.nvb-progress--horizontal .nvb-progress__trigger{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;border-radius:var(--nvb-radius-lg);background:transparent;padding:0 8px 16px;text-align:center;cursor:pointer;color:inherit;font:inherit;overflow:visible}.nvb-progress--horizontal .nvb-progress__marker{width:32px;height:32px;border-radius:var(--nvb-radius-full);border:2px solid var(--nvb-color-neutral-300);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-500);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.nvb-progress--horizontal .nvb-progress__body{display:flex;flex-direction:column;align-items:center;gap:3px}.nvb-progress--horizontal .nvb-progress__label{font-size:13px;color:var(--nvb-color-neutral-700);font-weight:600;text-align:center}.nvb-progress--horizontal .nvb-progress__value{font-size:12px;color:var(--nvb-color-neutral-500);text-align:center}.nvb-progress--horizontal .nvb-progress__connector{position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--nvb-color-neutral-300);z-index:0;pointer-events:none;border-radius:var(--nvb-radius-full)}.nvb-progress--horizontal .nvb-progress__item--completed .nvb-progress__marker{border-color:var(--nvb-color-primary-500);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000)}.nvb-progress--horizontal .nvb-progress__item--completed .nvb-progress__connector{background:var(--nvb-color-primary-500)}.nvb-progress--horizontal .nvb-progress__item--active .nvb-progress__marker{border:2px solid var(--nvb-color-primary-500);background:var(--nvb-color-neutral-000);color:var(--nvb-color-primary-700);box-shadow:0 0 0 4px color-mix(in oklab,var(--nvb-color-primary-500) 14%,transparent)}.nvb-progress--horizontal .nvb-progress__item--disabled .nvb-progress__trigger{opacity:.5;cursor:not-allowed}.nvb-progress--stepper.nvb-progress--variant-soft{flex-wrap:wrap;gap:8px;overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-soft>.nvb-progress__item{flex:1 1 160px;align-items:stretch}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:14px 16px;gap:12px;border:1px solid var(--nvb-color-neutral-300);border-radius:14px;background:var(--nvb-color-neutral-000);min-height:76px;box-shadow:0 1px 2px color-mix(in oklab,var(--nvb-color-neutral-900) 6%,transparent)}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__marker{width:36px;height:36px;box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__label{text-align:left}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__value{font-size:13px;text-align:left}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--active .nvb-progress__trigger{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 34%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-primary-500) 6%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-soft .nvb-progress__item--completed .nvb-progress__trigger{border-color:color-mix(in oklab,var(--nvb-color-success-500) 28%,var(--nvb-color-surface-mix-target, white));background:color-mix(in oklab,var(--nvb-color-success-500) 6%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-underline{flex-wrap:wrap;border-bottom:2px solid var(--nvb-color-neutral-200);overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-underline>.nvb-progress__item{flex:1 1 100px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:10px 12px 14px;border-radius:0;position:relative}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__trigger:after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:2px;border-radius:var(--nvb-radius-full);background:transparent;transition:background-color .2s ease}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__marker{width:24px;height:24px;font-size:11px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__label{font-size:13px}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__trigger:after{background:var(--nvb-color-primary-500)}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--active .nvb-progress__label{color:var(--nvb-color-primary-700)}.nvb-progress--stepper.nvb-progress--variant-underline .nvb-progress__item--completed .nvb-progress__trigger:after{background:color-mix(in oklab,var(--nvb-color-success-500) 70%,var(--nvb-color-neutral-300))}.nvb-progress--stepper.nvb-progress--variant-plain{gap:0;overflow-x:visible}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__trigger{padding:4px 8px}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__marker,.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-plain .nvb-progress__body{align-items:center}.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__marker,.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__connector{display:none}.nvb-progress--timeline.nvb-progress--variant-plain .nvb-progress__trigger{grid-template-columns:1fr;padding:6px 12px 16px}.nvb-progress-shell--plain .nvb-progress__content{border:0;border-radius:0;background:transparent}.nvb-progress--stepper.nvb-progress--variant-accordion{flex-direction:column;flex-wrap:nowrap;overflow-x:visible;gap:6px}.nvb-progress--stepper.nvb-progress--variant-accordion>.nvb-progress__item{flex:0 0 auto;width:100%;align-items:stretch;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);overflow:hidden;background:var(--nvb-color-neutral-000);transition:border-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:12px 16px;gap:12px;border:0;border-radius:0;background:transparent;transition:background-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__label,.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__value{text-align:left}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__connector{display:none}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 34%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active .nvb-progress__trigger{background:color-mix(in oklab,var(--nvb-color-primary-500) 5%,var(--nvb-color-surface-mix-target, white));border-bottom:1px solid color-mix(in oklab,var(--nvb-color-primary-500) 20%,var(--nvb-color-surface-mix-target, white))}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-accordion .nvb-progress__item--completed{border-color:color-mix(in oklab,var(--nvb-color-success-500) 28%,var(--nvb-color-surface-mix-target, white))}.nvb-progress__item-content{padding:12px 16px}.nvb-progress--timeline .nvb-progress__item-content{padding:4px 12px 24px 42px}.nvb-progress--stepper.nvb-progress--variant-side{flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow-x:visible;--nvb-progress-side-gap: 6px;gap:var(--nvb-progress-side-gap);border-right:1px solid var(--nvb-color-neutral-200);padding-right:16px;min-width:180px}.nvb-progress--stepper.nvb-progress--variant-side>.nvb-progress__item{flex:0 0 auto;width:100%;align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__trigger{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:8px;gap:10px;border:0;border-radius:var(--nvb-radius-md);width:100%;transition:background-color .16s ease}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__trigger:hover:not(:disabled){background:color-mix(in oklab,var(--nvb-color-neutral-100) 80%,transparent)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__body{align-items:flex-start}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__label,.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__value{text-align:left}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__connector{position:absolute;left:23px;top:44px;bottom:calc(-1 * var(--nvb-progress-side-gap));width:2px;height:auto;background:var(--nvb-color-neutral-200);pointer-events:none;z-index:0;border-radius:var(--nvb-radius-full)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--active .nvb-progress__trigger{background:color-mix(in oklab,var(--nvb-color-primary-500) 8%,var(--nvb-color-surface-mix-target, white));border-radius:var(--nvb-radius-md)}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--active .nvb-progress__marker{box-shadow:none}.nvb-progress--stepper.nvb-progress--variant-side .nvb-progress__item--completed .nvb-progress__connector{background:color-mix(in oklab,var(--nvb-color-primary-500) 50%,var(--nvb-color-neutral-200))}.nvb-progress-shell--side .nvb-progress__content{border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);align-self:stretch}.nvb-progress__content{border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);padding:10px 12px 12px}.nvb-progress__content--empty{padding:0}.nvb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nvb-progress__item--loading{pointer-events:none}.nvb-progress__trigger--loading{cursor:wait}.nvb-progress__marker--loading{border-color:var(--nvb-color-neutral-200);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-progress-shimmer 1.35s ease-in-out infinite}.nvb-progress__loading-line{display:block;width:min(140px,100%);height:10px;border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;animation:nvb-progress-shimmer 1.35s ease-in-out infinite}.nvb-progress__loading-line--label{height:12px;width:min(100px,80%)}.nvb-progress__loading-line--value{width:min(70px,60%)}.nvb-progress__loading-line--wide{width:min(520px,100%)}.nvb-progress__content-loading{display:grid;gap:10px;padding:12px}@keyframes nvb-progress-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-progress__placeholder{position:relative;min-height:120px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);margin:10px;background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-progress__placeholder span{font-size:30px}.nvb-progress__placeholder p{margin:0;font-size:13px}.nvb-progress__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-progress__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-progress__description{color:var(--nvb-color-neutral-600);font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word;padding:12px}.nvb-progress__empty{color:var(--nvb-color-neutral-500);font-size:12px;padding:12px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000)}\n']}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}]}});var Gn=Z({SplitterElement:()=>me});var me=class at{model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-splitter","splitter");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);rowsTemplate=g(null,...ngDevMode?[{debugName:"rowsTemplate"}]:[]);templateContext=g(null,...ngDevMode?[{debugName:"templateContext"}]:[]);dragAutoScrollService=p(V);containerRef;isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);hoveredPanelKey=b(null,...ngDevMode?[{debugName:"hoveredPanelKey"}]:[]);panelSizeMap=b({},...ngDevMode?[{debugName:"panelSizeMap"}]:[]);dataVersion=b(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);resizingHandleIndex=null;resizeStartPosition=0;resizeStartSizes=[];resizePanelKeys=[];onDragStartHandler=()=>{this.dropOverlay.set(true)};onDragEndHandler=()=>{this.dropOverlay.set(false);this.hoveredPanelKey.set(null)};onDropHandler=()=>{this.dropOverlay.set(false);this.hoveredPanelKey.set(null);this.dataVersion.update(e=>e+1)};onDataChangedHandler=()=>{this.dataVersion.update(e=>e+1);this.initializePanelRowsStorage();this.reconcilePanelSizes()};onWindowMouseMoveBound=e=>{this.onWindowMouseMove(e)};onWindowMouseUpBound=()=>{this.stopResize()};eventService=p(E);dataService=p(j);expressionService=p(Q);dragAndDropService=p(M);elementActionService=p(we);visiblePanels=f(()=>{this.dataVersion();return(Array.isArray(this.model()?.panels)?this.model().panels:[]).filter(e=>this.evaluateCondition(e?.visibleIf,true))},...ngDevMode?[{debugName:"visiblePanels"}]:[]);ngOnInit(){this.isEditor.set(R.isEditor());this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.initializePanelRowsStorage();this.loadPersistedPanelSizes();this.reconcilePanelSizes();this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onDrop.add(this.onDropHandler);this.dataService.onValueChanged.add(this.onDataChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataChangedHandler)}ngOnDestroy(){this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onDrop.remove(this.onDropHandler);this.dataService.onValueChanged.remove(this.onDataChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataChangedHandler);this.stopResize()}resolvePanelIdentity(e,t){const n=String(e?.value??"").trim();if(n)return n;return`panel${t+1}`}resolvePanelLabel(e,t){const n=String(e?.label??"").trim();if(n)return n;return`Panel ${t+1}`}orientationClass(){return{"nvb-splitter--vertical":this.model().orientation==="vertical","nvb-splitter--horizontal":this.model().orientation!=="vertical"}}handleStyle(){const e=`${this.model().gutterSize}px`;if(this.model().orientation==="vertical")return{height:e};return{width:e}}panelStyle(e,t){const n=this.resolvePanelIdentity(e,t);const r=this.panelSizeMap()[n];const o=Number.isFinite(r)?r:0;const a=`${this.normalizeMinPanelSize(this.model().minPanelSize)}%`;if(this.model().orientation==="vertical")return{"flex-basis":`${o}%`,"max-height":`${o}%`,"min-height":a};return{"flex-basis":`${o}%`,"max-width":`${o}%`,"min-width":a}}getPanelRows(e,t){const n=this.resolvePanelIdentity(e,t);const r=this.ensurePanelRowsStorage();if(!Array.isArray(r[n]))r[n]=[];return r[n]}buildRowsTemplateContext(e,t){const n={rows:this.getPanelRows(e,t),parentElement:this.model()};const r=this.templateContext();if(!r||typeof r!=="object")return n;return{...n,...r}}hasPanelRows(e,t){this.dataVersion();return P(this.getPanelRows(e,t))}onPanelDragOver(e,t,n){n.preventDefault();this.hoveredPanelKey.set(this.resolvePanelIdentity(e,t))}onPanelDragLeave(e,t,n){n.preventDefault();const r=this.resolvePanelIdentity(e,t);if(this.hoveredPanelKey()===r)this.hoveredPanelKey.set(null)}onPanelDrop(e,t,n){if(!this.isEditor()&&this.isInteractionLocked())return;n.preventDefault();const r=this.getPanelRows(e,t);if(r.length===0)r.push(new oe({columns:[]}));const o=r[0];const a=H(this.model()?.parentElement?.type)?this.model().parentElement:this.model();this.dragAndDropService.onColumnDrop(n,a,-1,o.columns,"right");const i=this.column();if(i)i.rows=r;this.hoveredPanelKey.set(null);this.dataVersion.update(s=>s+1)}startResize(e,t){if(this.isInteractionLocked()||this.model().allowResize===false)return;const n=this.visiblePanels();if(n.length<2)return;const r=this.containerRef?.nativeElement;if(!r)return;const o=this.model().orientation==="vertical"?r.clientHeight:r.clientWidth;if(!Number.isFinite(o)||o<=0)return;t.preventDefault();this.reconcilePanelSizes();const a=n.map((s,c)=>this.resolvePanelIdentity(s,c));const i=this.normalizeSizeList(a.map(s=>this.panelSizeMap()[s]??0));this.panelSizeMap.set(this.mapPanelSizes(a,i));this.resizingHandleIndex=e;this.resizeStartPosition=this.model().orientation==="vertical"?t.clientY:t.clientX;this.resizeStartSizes=i;this.resizePanelKeys=a;window.addEventListener("mousemove",this.onWindowMouseMoveBound);window.addEventListener("mouseup",this.onWindowMouseUpBound)}stopResize(){if(this.resizingHandleIndex===null)return;this.resizingHandleIndex=null;this.resizeStartPosition=0;this.resizeStartSizes=[];this.resizePanelKeys=[];window.removeEventListener("mousemove",this.onWindowMouseMoveBound);window.removeEventListener("mouseup",this.onWindowMouseUpBound);this.persistPanelSizesIfNeeded();this.runActions("change",this.panelSizeMap())}onWindowMouseMove(e){if(this.resizingHandleIndex===null)return;const t=this.containerRef?.nativeElement;if(!t)return;const n=this.model().orientation==="vertical"?t.clientHeight:t.clientWidth;if(!Number.isFinite(n)||n<=0)return;const r=((this.model().orientation==="vertical"?e.clientY:e.clientX)-this.resizeStartPosition)/n*100;const o=this.resizingHandleIndex;const a=o+1;if(o<0||a<0||o>=this.resizeStartSizes.length||a>=this.resizeStartSizes.length)return;const i=this.normalizeMinPanelSize(this.model().minPanelSize);const s=[...this.resizeStartSizes];const c=s[o]+s[a];let m=s[o]+r;let v=s[a]-r;if(m<i){m=i;v=c-m}if(v<i){v=i;m=c-v}if(m<0||v<0)return;s[o]=m;s[a]=v;const u=this.normalizeSizeList(s);this.panelSizeMap.set(this.mapPanelSizes(this.resizePanelKeys,u));this.runActions("input",this.panelSizeMap())}initializePanelRowsStorage(){const e=this.column();if(!e)return;const t=Array.isArray(this.model()?.panels)?this.model().panels:[];if(t.length===0)return;const n=this.ensurePanelRowsStorage();const r=Array.isArray(e.rows)?e.rows:[];if(!Object.values(n).some(a=>P(a))&&P(r)){const a=this.resolvePanelIdentity(t[0],0);n[a]=r}t.forEach((a,i)=>{const s=this.resolvePanelIdentity(a,i);if(!Array.isArray(n[s]))n[s]=[]});const o=this.visiblePanels();if(o.length>0)e.rows=n[this.resolvePanelIdentity(o[0],0)]??[]}ensurePanelRowsStorage(){const e=this.column();if(!e)return{};if(!e.tabRows||typeof e.tabRows!=="object")e.tabRows={};return e.tabRows}loadPersistedPanelSizes(){if(!this.model().stateful||typeof localStorage==="undefined")return;try{const e=localStorage.getItem(this.model().resolveStateKey());if(!e)return;const t=JSON.parse(e);if(!t||typeof t!=="object"||Array.isArray(t))return;const n={};Object.keys(t).forEach(r=>{const o=Number(t[r]);if(!Number.isFinite(o)||o<=0)return;n[r]=o});if(Object.keys(n).length>0)this.panelSizeMap.set(n)}catch{}}persistPanelSizesIfNeeded(){if(!this.model().stateful||typeof localStorage==="undefined")return;try{localStorage.setItem(this.model().resolveStateKey(),JSON.stringify(this.panelSizeMap()))}catch{}}reconcilePanelSizes(){const e=this.visiblePanels();if(e.length===0){this.panelSizeMap.set({});return}const t=e.map((a,i)=>this.resolvePanelIdentity(a,i));const n=this.panelSizeMap();const r=t.map(a=>{const i=Number(n[a]);return Number.isFinite(i)&&i>0?i:0});const o=r.some(a=>a>0)?this.normalizeSizeList(r):this.normalizeSizeList(Array(t.length).fill(1));this.panelSizeMap.set(this.mapPanelSizes(t,o))}mapPanelSizes(e,t){const n={};e.forEach((r,o)=>{const a=Number(t[o]);n[r]=Number.isFinite(a)?a:0});return n}normalizeSizeList(e){if(!Array.isArray(e)||e.length===0)return[];const t=e.map(r=>{const o=Number(r);return Number.isFinite(o)&&o>0?o:0});const n=t.reduce((r,o)=>r+o,0);if(!Number.isFinite(n)||n<=0){const r=100/t.length;return t.map(()=>r)}return t.map(r=>r/n*100)}evaluateCondition(e,t){const n=String(e??"").replace(/\{([^}]+)\}/g,(r,o)=>String(o??"").trim()).trim();if(!n)return t;try{const r=this.expressionService.applyContextToExpression(n,this.model());const o=this.expressionService.runPropertyConditionSync(this.dataService.getData()??{},r);return Boolean(o)}catch{return t}}runActions(e,t){if(this.isEditor())return;const n=String(this.model().name??"").trim();const r={value:t,item:null,row:null};if(n)r[n]=t;this.elementActionService.runActions(this.model(),this.model().events??[],e,r)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}normalizeMinPanelSize(e){const t=Number(e);if(!Number.isFinite(t))return 10;return Math.max(1,Math.min(45,Math.floor(t)))}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:at,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:at,isStandalone:true,selector:"splitter-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null},rowsTemplate:{classPropertyName:"rowsTemplate",publicName:"rowsTemplate",isSignal:true,isRequired:false,transformFunction:null},templateContext:{classPropertyName:"templateContext",publicName:"templateContext",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},viewQueries:[{propertyName:"containerRef",first:true,predicate:["container"],descendants:true}],ngImport:l,template:"<div class=\"nvb-splitter\" [ngClass]=\"orientationClass()\" #container [attr.data-testid]=\"tid('root')\">\n  @for (\n    panel of visiblePanels();\n    track resolvePanelIdentity(panel, $index);\n    let panelIndex = $index\n  ) {\n    <section\n      class=\"nvb-splitter__panel\"\n      [ngStyle]=\"panelStyle(panel, panelIndex)\"\n      [attr.data-testid]=\"tid('panel', resolvePanelIdentity(panel, panelIndex))\"\n    >\n      @if (model().showPanelHeaders) {\n        <header\n          class=\"nvb-splitter__panel-header\"\n          [attr.data-testid]=\"tid('panel-header', resolvePanelIdentity(panel, panelIndex))\"\n        >\n          {{ resolvePanelLabel(panel, panelIndex) | dynamicText: model() }}\n        </header>\n      }\n\n      <div\n        class=\"nvb-splitter__panel-content\"\n        [class.nvb-splitter__panel-content--empty]=\"!hasPanelRows(panel, panelIndex)\"\n        [attr.data-testid]=\"tid('panel-content', resolvePanelIdentity(panel, panelIndex))\"\n      >\n        @if (hasPanelRows(panel, panelIndex)) {\n          @if (rowsTemplate(); as templateRef) {\n            <ng-container\n              *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext(panel, panelIndex)\"\n            ></ng-container>\n          }\n        } @else if (isEditor()) {\n          <div\n            class=\"nvb-splitter__placeholder\"\n            [class.nvb-splitter__placeholder--overlay]=\"\n              hoveredPanelKey() === resolvePanelIdentity(panel, panelIndex)\n            \"\n            [attr.data-testid]=\"tid('empty-builder', resolvePanelIdentity(panel, panelIndex))\"\n          >\n            <span class=\"material-symbols-outlined\">note_stack_add</span>\n            <p>{{ 'splitter.emptyBuilder' | uiT: 'Drop content into splitter panel' }}</p>\n\n            @if (dropOverlay()) {\n              <div\n                class=\"nvb-splitter__drop-overlay\"\n                (dragover)=\"onPanelDragOver(panel, panelIndex, $event)\"\n                (dragleave)=\"onPanelDragLeave(panel, panelIndex, $event)\"\n                (drop)=\"onPanelDrop(panel, panelIndex, $event)\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (panelIndex < visiblePanels().length - 1) {\n      <div\n        class=\"nvb-splitter__handle\"\n        [ngStyle]=\"handleStyle()\"\n        [class.nvb-splitter__handle--disabled]=\"\n          isEditor() ? false : model().allowResize === false || model().disabled || model().readOnly\n        \"\n        (mousedown)=\"startResize(panelIndex, $event)\"\n        [attr.data-testid]=\"tid('handle', panelIndex)\"\n      ></div>\n    }\n  } @empty {\n    <div class=\"nvb-splitter__empty\">\n      {{ 'splitter.noPanels' | uiT: 'No panels configured' }}\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-splitter{width:100%;min-height:180px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);overflow:hidden}.nvb-splitter--horizontal{display:flex;flex-direction:row}.nvb-splitter--vertical{display:flex;flex-direction:column;min-height:260px}.nvb-splitter__panel{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--nvb-color-neutral-000);overflow:visible}.nvb-splitter__panel-header{border-bottom:1px solid var(--nvb-color-neutral-200);padding:8px 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);background:var(--nvb-color-neutral-050)}.nvb-splitter__panel-content{flex:1;min-height:0;overflow:visible;padding:10px 12px 12px}.nvb-splitter__panel-content--empty{padding:0}.nvb-splitter__placeholder{position:relative;min-height:120px;margin:10px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--nvb-color-neutral-600);background:var(--nvb-color-neutral-050)}.nvb-splitter__placeholder span{font-size:30px}.nvb-splitter__placeholder p{margin:0;font-size:12px;line-height:1.3}.nvb-splitter__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-splitter__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-splitter__handle{flex:0 0 auto;position:relative;background:var(--nvb-color-neutral-100);transition:background-color .12s ease}.nvb-splitter--horizontal .nvb-splitter__handle{cursor:col-resize;border-left:1px solid var(--nvb-color-neutral-200);border-right:1px solid var(--nvb-color-neutral-200)}.nvb-splitter--vertical .nvb-splitter__handle{cursor:row-resize;border-top:1px solid var(--nvb-color-neutral-200);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-splitter__handle:hover{background:var(--nvb-color-neutral-200)}.nvb-splitter__handle--disabled{cursor:default!important}.nvb-splitter__empty{padding:14px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n"],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:$,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"directive",type:N,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:k,name:"uiT"},{kind:"pipe",type:A,name:"dynamicText"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:me,decorators:[{type:L,args:[{selector:"splitter-element",changeDetection:z.OnPush,imports:[O,$,N,k,A],host:{...ee},template:"<div class=\"nvb-splitter\" [ngClass]=\"orientationClass()\" #container [attr.data-testid]=\"tid('root')\">\n  @for (\n    panel of visiblePanels();\n    track resolvePanelIdentity(panel, $index);\n    let panelIndex = $index\n  ) {\n    <section\n      class=\"nvb-splitter__panel\"\n      [ngStyle]=\"panelStyle(panel, panelIndex)\"\n      [attr.data-testid]=\"tid('panel', resolvePanelIdentity(panel, panelIndex))\"\n    >\n      @if (model().showPanelHeaders) {\n        <header\n          class=\"nvb-splitter__panel-header\"\n          [attr.data-testid]=\"tid('panel-header', resolvePanelIdentity(panel, panelIndex))\"\n        >\n          {{ resolvePanelLabel(panel, panelIndex) | dynamicText: model() }}\n        </header>\n      }\n\n      <div\n        class=\"nvb-splitter__panel-content\"\n        [class.nvb-splitter__panel-content--empty]=\"!hasPanelRows(panel, panelIndex)\"\n        [attr.data-testid]=\"tid('panel-content', resolvePanelIdentity(panel, panelIndex))\"\n      >\n        @if (hasPanelRows(panel, panelIndex)) {\n          @if (rowsTemplate(); as templateRef) {\n            <ng-container\n              *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext(panel, panelIndex)\"\n            ></ng-container>\n          }\n        } @else if (isEditor()) {\n          <div\n            class=\"nvb-splitter__placeholder\"\n            [class.nvb-splitter__placeholder--overlay]=\"\n              hoveredPanelKey() === resolvePanelIdentity(panel, panelIndex)\n            \"\n            [attr.data-testid]=\"tid('empty-builder', resolvePanelIdentity(panel, panelIndex))\"\n          >\n            <span class=\"material-symbols-outlined\">note_stack_add</span>\n            <p>{{ 'splitter.emptyBuilder' | uiT: 'Drop content into splitter panel' }}</p>\n\n            @if (dropOverlay()) {\n              <div\n                class=\"nvb-splitter__drop-overlay\"\n                (dragover)=\"onPanelDragOver(panel, panelIndex, $event)\"\n                (dragleave)=\"onPanelDragLeave(panel, panelIndex, $event)\"\n                (drop)=\"onPanelDrop(panel, panelIndex, $event)\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (panelIndex < visiblePanels().length - 1) {\n      <div\n        class=\"nvb-splitter__handle\"\n        [ngStyle]=\"handleStyle()\"\n        [class.nvb-splitter__handle--disabled]=\"\n          isEditor() ? false : model().allowResize === false || model().disabled || model().readOnly\n        \"\n        (mousedown)=\"startResize(panelIndex, $event)\"\n        [attr.data-testid]=\"tid('handle', panelIndex)\"\n      ></div>\n    }\n  } @empty {\n    <div class=\"nvb-splitter__empty\">\n      {{ 'splitter.noPanels' | uiT: 'No panels configured' }}\n    </div>\n  }\n</div>\n",styles:[":host{display:block;width:100%}.nvb-splitter{width:100%;min-height:180px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);overflow:hidden}.nvb-splitter--horizontal{display:flex;flex-direction:row}.nvb-splitter--vertical{display:flex;flex-direction:column;min-height:260px}.nvb-splitter__panel{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--nvb-color-neutral-000);overflow:visible}.nvb-splitter__panel-header{border-bottom:1px solid var(--nvb-color-neutral-200);padding:8px 10px;font-size:12px;font-weight:600;color:var(--nvb-color-neutral-600);background:var(--nvb-color-neutral-050)}.nvb-splitter__panel-content{flex:1;min-height:0;overflow:visible;padding:10px 12px 12px}.nvb-splitter__panel-content--empty{padding:0}.nvb-splitter__placeholder{position:relative;min-height:120px;margin:10px;border:1px dashed var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--nvb-color-neutral-600);background:var(--nvb-color-neutral-050)}.nvb-splitter__placeholder span{font-size:30px}.nvb-splitter__placeholder p{margin:0;font-size:12px;line-height:1.3}.nvb-splitter__placeholder--overlay{background:var(--nvb-color-primary-050)}.nvb-splitter__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-splitter__handle{flex:0 0 auto;position:relative;background:var(--nvb-color-neutral-100);transition:background-color .12s ease}.nvb-splitter--horizontal .nvb-splitter__handle{cursor:col-resize;border-left:1px solid var(--nvb-color-neutral-200);border-right:1px solid var(--nvb-color-neutral-200)}.nvb-splitter--vertical .nvb-splitter__handle{cursor:row-resize;border-top:1px solid var(--nvb-color-neutral-200);border-bottom:1px solid var(--nvb-color-neutral-200)}.nvb-splitter__handle:hover{background:var(--nvb-color-neutral-200)}.nvb-splitter__handle--disabled{cursor:default!important}.nvb-splitter__empty{padding:14px 12px;font-size:12px;color:var(--nvb-color-neutral-500)}\n"]}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}],rowsTemplate:[{type:l.Input,args:[{isSignal:true,alias:"rowsTemplate",required:false}]}],templateContext:[{type:l.Input,args:[{isSignal:true,alias:"templateContext",required:false}]}],containerRef:[{type:In,args:["container"]}]}});function Ie(d){const e=String(d??"").trim();if(!e)return null;if(/^-?\d+(\.\d+)?$/.test(e))return`${e}px`;return e}function Re(d){const e=String(d??"").trim().toLowerCase();if(!e)return false;return e.endsWith("%")||e.startsWith("calc(")||e.startsWith("min(")||e.startsWith("max(")||e.startsWith("clamp(")}function Be(d,e,t,n){const r=Ie(d);const o=Ie(e);const a=Ie(t);if(n.isMobile)return a||o||r;if(n.isTablet)return o||r;return r}function $e(d){if(!d)return null;if(Re(d))return d;return`min(${d}, 100%)`}function Rt(d){const e=Boolean(d.isVerticalFlexLayout);const t=Boolean(d.fitContent);const n=Be(d.width,d.tabletWidth,d.mobileWidth,d);if(!n){if(t&&!e)return{width:"fit-content",flex:"0 0 auto","max-width":"100%","min-width":"0"};return{width:e?"100%":null,flex:e?"0 0 auto":d.fillWhenUnset===false?null:"1 1 0","max-width":null,"min-width":"0"}}const r=Re(n);return{width:$e(n),flex:e?"0 0 auto":r?`0 0 ${n}`:`0 1 ${n}`,"max-width":n,"min-width":"0"}}const qn=new Set(["row","item","panel","index","value","rowCount"]);function ue(d,e){return String(d?.[e]??"").trim()}function Wn(d){if(!d.includes("{"))return d;return d.replace(/\{([^}]+)\}/g,(e,t)=>{const n=String(t??"").trim();if(!n)return'""';const r=n.split(".")[0];if(qn.has(r))return n;return`getVal("${n.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`})}function ve(d,e,t,n){const r={...d,rowCount:e.length};if(t!==void 0)Object.assign(r,{row:t,item:t,panel:t,value:t,index:n});return r}function be(d,e,t){if(!e)return false;try{return Boolean(d.runPropertyConditionSync(t,Wn(e)))}catch{return false}}var Me=class Ae{dragAndDropService;templateScopeId=`nvb-dynamic-panel-header-template-${Math.random().toString(36).slice(2,11)}`;templateScopeSelector=`[data-nvb-template-scope="${this.templateScopeId}"]`;model=g.required(...ngDevMode?[{debugName:"model"}]:[]);tid=G(this.model,"nvb-dynamic-panel","dynamic-panel");column=g(...ngDevMode?[void 0,{debugName:"column"}]:[]);dragAutoScrollService=p(V);recursiveData=g(null,...ngDevMode?[{debugName:"recursiveData"}]:[]);isMobileView=g(false,...ngDevMode?[{debugName:"isMobileView"}]:[]);builderLayerDepth=g(1,...ngDevMode?[{debugName:"builderLayerDepth"}]:[]);data=b([],...ngDevMode?[{debugName:"data"}]:[]);dataSourceLoaded=b(true,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);dropOverlay=b(false,...ngDevMode?[{debugName:"dropOverlay"}]:[]);focusedElementName=b(null,...ngDevMode?[{debugName:"focusedElementName"}]:[]);renderVersion=b(0,...ngDevMode?[{debugName:"renderVersion"}]:[]);hoveredElementName=null;onDataSourceLoadedHandler=null;onElementFocusHandler=null;onElementChangingHandler=null;onDataMutatedHandler=null;onDragStartHandler=null;onDragEndHandler=null;onDropHandler=null;valueChangedHandler=()=>{this.bumpRenderVersion()};propertyChangedHandler=()=>{this.bumpRenderVersion()};structureService=p(xe);componentRegistryService=p(ke);dataService=p(j);modelService=p(Pe);rendererService=p(vt);previewRendererService=p(bt);loadRowDataSource(e){if(!R.isEditor())this.previewRendererService.loadDataSourceFor(e)}templateEngineService=p(ae);elementFocusService=p(K);expressionService=p(Q);validatorService=p(Ne);eventService=p(E);confirmDialogService=p(gt);uiTranslationService=p(ye);ngxViewBuilderApiService=p(Se);normalizedHeaderTemplate=f(()=>{this.renderVersion();return this.normalizeTemplate(this.templateEngineService.resolveTemplateContentByName(this.resolveHeaderTemplateName(),this.resolveHeaderTemplateMarkupFallback()))},...ngDevMode?[{debugName:"normalizedHeaderTemplate"}]:[]);hasHeaderContent=f(()=>{if(Boolean(this.model()["hideHeader"]))return false;const e=String(this.model()?.label??"").trim();const t=String(this.model()?.description??"").trim();return e.length>0||t.length>0||this.normalizedHeaderTemplate()!==null},...ngDevMode?[{debugName:"hasHeaderContent"}]:[]);renderedHeaderTemplate=f(()=>{this.renderVersion();const e=this.normalizedHeaderTemplate();if(!e)return{html:"",cssText:""};return this.templateEngineService.renderTemplateWithCss(e,this.buildHeaderTemplateRuntimeContext())},...ngDevMode?[{debugName:"renderedHeaderTemplate"}]:[]);headerTemplateHtml=f(()=>this.renderedHeaderTemplate().html,...ngDevMode?[{debugName:"headerTemplateHtml"}]:[]);headerTemplateCss=f(()=>{const e=this.normalizedHeaderTemplate();if(!e)return"";return this.templateEngineService.resolveTemplateCss(e,this.templateScopeSelector)},...ngDevMode?[{debugName:"headerTemplateCss"}]:[]);styleOutletKey=f(()=>{return`dynamic-panel:${String(this.model()?.name??"").trim()||this.templateScopeId}:header-template-css`},...ngDevMode?[{debugName:"styleOutletKey"}]:[]);constructor(e){this.dragAndDropService=e;this.onElementChangingHandler=t=>{if(t.sender?.parentElement&&t.sender?.parentElement.name===this.model().name)this.loadPanelData()};this.structureService.onElementChanging.add(this.onElementChangingHandler);this.onDataMutatedHandler=t=>{this.reloadIfPanelPathChanged(t?.dataPath);this.bumpRenderVersion()};this.dataService.onDataMutated.add(this.onDataMutatedHandler);this.onDragStartHandler=()=>{this.dropOverlay.set(true)};this.eventService.onDragStart.add(this.onDragStartHandler);this.onDragEndHandler=()=>{this.dropOverlay.set(false)};this.eventService.onDragEnd.add(this.onDragEndHandler);this.onDropHandler=()=>{this.dropOverlay.set(false);this.bumpRenderVersion()};this.eventService.onDrop.add(this.onDropHandler)}ngOnInit(){this.dropOverlay.set(this.dragAutoScrollService.isDragging());this.dataSourceLoaded.set(this.resolveInitialDataSourceLoadedState());this.onDataSourceLoadedHandler=()=>{this.markDataSourceLoaded();this.loadPanelData()};this.model()["afterDataSourceLoad"]?.add(this.onDataSourceLoadedHandler);this.loadPanelData();this.isEditor.set(R.isEditor());this.dataService.onValueChanged.add(this.valueChangedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler);this.onElementFocusHandler=e=>{this.focusedElementName.set(this.resolveFocusKey(e?.payload))};this.eventService.onElementFocus.add(this.onElementFocusHandler);this.bumpRenderVersion()}ngOnDestroy(){if(this.cellReloadTimer!==null){clearTimeout(this.cellReloadTimer);this.cellReloadTimer=null}if(this.onDataSourceLoadedHandler){this.model()["afterDataSourceLoad"]?.remove(this.onDataSourceLoadedHandler);this.onDataSourceLoadedHandler=null}if(this.onElementFocusHandler){this.eventService.onElementFocus.remove(this.onElementFocusHandler);this.onElementFocusHandler=null}if(this.onElementChangingHandler){this.structureService.onElementChanging.remove(this.onElementChangingHandler);this.onElementChangingHandler=null}if(this.onDataMutatedHandler){this.dataService.onDataMutated.remove(this.onDataMutatedHandler);this.onDataMutatedHandler=null}this.dataService.onValueChanged.remove(this.valueChangedHandler);this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler);if(this.onDragStartHandler){this.eventService.onDragStart.remove(this.onDragStartHandler);this.onDragStartHandler=null}if(this.onDragEndHandler){this.eventService.onDragEnd.remove(this.onDragEndHandler);this.onDragEndHandler=null}if(this.onDropHandler){this.eventService.onDrop.remove(this.onDropHandler);this.onDropHandler=null}}onFocus(e){if(!this.isEditor())return;this.elementFocusService.setFocus(this.model());this.focusedElementName.set(this.resolveFocusKey(this.model()))}resolveFocusKey(e){return X(e)}onDragOver(e){e.preventDefault();e.stopPropagation();ge.clearActiveDragOverlay();this.hoveredElementName=this.model().name}onDragLeav(e){e.preventDefault();e.stopPropagation();this.hoveredElementName=null}onDrop(e){if(!this.isEditor()&&this.isInteractionLocked())return;this.column().rows=[];e.preventDefault();e.stopPropagation();this.dragAndDropService.onRowDrop(e,this.model(),0,this.column().rows,"top");this.hoveredElementName=null;this.bumpRenderVersion()}hasTemplateRows(){this.renderVersion();return P(this.column()?.rows)}async onHeaderTemplateClick(e){await this.templateEngineService.handleTemplateClickEvent(e,this.buildHeaderTemplateRuntimeContext(),this.model())}isObjectMode(){return Oe(this.model()?.type)}rowPath(e,t){return Ot(e,t,this.model()?.type)}loadPanelData(){if(this.isObjectMode()&&!this.isEditor()){const c=this.model().dataPath;const m=c?this.dataService.getValue(c):void 0;const v=y=>y&&typeof y==="object"&&!Array.isArray(y)?y:null;const u=v(m)??v(this.model().value)??{};if(this.hasDataSource()&&!this.dataSourceLoaded())this.markDataSourceLoaded();this.model().value=u;this.data.set([u]);if(this.model().template&&typeof this.model().template==="object")this.syncRowModels([u]);return}const e=this.model().dataPath;const t=this.model().template;const n=t&&typeof t==="object";const r=c=>{if(n)this.syncRowModels(c)};if(this.recursiveData()){const c=Array.isArray(this.recursiveData())?this.recursiveData():[];if(this.hasDataSource()&&!this.dataSourceLoaded())this.markDataSourceLoaded();const m=this.normalizePanelRows(c,this.data());this.model().value=m;this.data.set(m);r(m);return}const o=this.dataService.getValue(e);if(Array.isArray(o)){if(this.hasDataSource()&&!this.dataSourceLoaded())this.markDataSourceLoaded();const c=this.normalizePanelRows(o,this.data());this.model().value=c;this.data.set(c);r(c);return}const a=this.model().value;const i=Array.isArray(a)?a:[];if(this.hasDataSource()&&!this.dataSourceLoaded()&&(Array.isArray(a)||R.isEditor()))this.markDataSourceLoaded();const s=this.normalizePanelRows(i,this.data());this.model().value=s;this.data.set(s);r(s)}normalizePanelRows(e,t){if(!Array.isArray(e))return[];return e.map((n,r)=>{if(n!==null&&typeof n==="object")return n;const o=t[r];if(o!==null&&typeof o==="object")return o;return{}})}async deleteRow(e){if(this.isInteractionLocked()||!this.canDeleteRow(this.data()[e],e))return;if(!await this.ensureDeleteConfirmed())return;const t=this.model().dataPath;if(!t)return;this.removeFlatMapBranch(`${t}[${e}]`);const n=this.dataService.getValue(t);const r=Array.isArray(n)?[...n]:Array.isArray(this.model().value)?[...this.model().value]:[];if(e<0||e>=r.length)return;const o=r[e]??null;r.splice(e,1);this.updatePathsAfterDelete(t,e);this.dataService.setValue(t,r).then(()=>{this.loadPanelData();this.rendererService.applyDependencies();this.rendererService.applyExpressions();this.validatorService.evaluateAllValidators();this.ngxViewBuilderApiService.notifyDynamicPanelItemRemoved({elementName:this.model().name,elementDataPath:t,elementType:this.model().type,element:this.model(),rowIndex:e,row:o,rows:r,total:r.length})})}onDelete(){if(this.isInteractionLocked())return;this.structureService.removeFromElement(this.model().name);this.structureService.removeFromPage(this.model().name);this.eventService.onDrop.fire({payload:null})}addRow(){if(this.isInteractionLocked()||!this.canAddRows())return;const e={};const t=this.model().template;this.createDefaultObject(t,e);const n=this.model().dataPath;const r=this.dataService.getValue(n);const o=Array.isArray(r)?[...r]:Array.isArray(this.model().value)?[...this.model().value]:[];o.push(e);this.dataService.setValue(n,o).then(()=>{this.createNewModels(o);this.loadPanelData();this.rendererService.applyDependencies();this.rendererService.applyExpressions();this.validatorService.evaluateAllValidators();this.ngxViewBuilderApiService.notifyDynamicPanelItemAdded({elementName:this.model().name,elementDataPath:n,elementType:this.model().type,element:this.model(),rowIndex:o.length-1,row:e,rows:o,total:o.length})})}createDefaultObject(e,t){Object.keys(e).forEach(n=>{const r=e[n];if(H(r.type)||r.type==="dynamicTable"){t[r.name]=Oe(r.type)?{}:[];return}t[r.name]=this.hasMeaningfulValue(r.defaultValue)?r.defaultValue:void 0})}createNewModels(e){const t=e.length-1;const n=this.model().dataPath;const r=this.model().template;this.createModelsRecursive(r,n,t,this.model().schemaPath)}createModelsRecursive(e,t,n,r){Object.keys(e).forEach(o=>{const a=e[o];const i=`${this.rowPath(t,n)}.${a.name}`;const s=`${r}.template.${o}`;const c=this.modelService.createModel(a.type,{...a,dataPath:i,schemaPath:s,dependsOn:[],index:n,parentElement:this.model(),isTemplateElement:true,templateElementParentDataPath:this.model().dataPath,value:a.type==="dynamicPanel"||a.type==="dynamicTable"?[]:this.hasMeaningfulValue(a.defaultValue)?a.defaultValue:void 0});this.structureService.flatModelMap[i]=c;this.rendererService.applyElementDependencies(c);this.expressionService.evaluateStartingElement(c);this.loadRowDataSource(c)})}syncRowModels(e){const t=String(this.model()?.dataPath??"").trim();const n=this.model().template;if(!t||!n||typeof n!=="object")return;const r=Object.entries(n);this.collectExistingRowIndexes(t).forEach(o=>{if(o<e.length)return;this.removeFlatMapBranch(`${t}[${o}]`)});e.forEach((o,a)=>{const i=new Set;r.forEach(([s,c],m)=>{const v=String(c?.name??s).trim();if(!v)return;i.add(v);const u=`${this.rowPath(t,a)}.${v}`;const y=`${this.model().schemaPath}.template.${s}`;const _=this.structureService.flatModelMap[u];const T=this.resolveTemplateValue(o,v,s,c,m);const I=this.hasResolvableTemplateValue(o,v,s,c,m);const he=c.type==="dynamicPanel"||c.type==="dynamicTable";const ct=Oe(c.type)?T&&typeof T==="object"&&!Array.isArray(T)?T:{}:he?Array.isArray(T)?T:!I&&Array.isArray(_?.value)?_.value:[]:T;if(_&&String(_.type??"").trim()===String(c.type??"").trim()){_.value=ct;_.index=a;_.parentElement=this.model();_.dataPath=u;_.schemaPath=y;_.isTemplateElement=true;_.templateElementParentDataPath=this.model().dataPath;mt(_,this.model(),a,e.length);return}const fe=this.modelService.createModel(c.type,{...c,dataPath:u,schemaPath:y,dependsOn:[],index:a,parentElement:this.model(),isTemplateElement:true,templateElementParentDataPath:this.model().dataPath,value:ct});this.structureService.flatModelMap[u]=fe;mt(fe,this.model(),a,e.length);this.rendererService.applyElementDependencies(fe);this.expressionService.evaluateStartingElement(fe);this.loadRowDataSource(fe)});this.removeStaleRowTemplateModels(t,a,i)})}resolveTemplateValue(e,t,n,r,o){const a=e??{};if(Object.prototype.hasOwnProperty.call(a,t))return a[t];if(n&&Object.prototype.hasOwnProperty.call(a,n))return a[n];const i=String(r?.label??"").trim();if(i&&Object.prototype.hasOwnProperty.call(a,i))return a[i];if(Array.isArray(e))return e[o];const s=Object.entries(a);if(o<0||o>=s.length)return;return s[o][1]}hasResolvableTemplateValue(e,t,n,r,o){const a=e??{};if(Object.prototype.hasOwnProperty.call(a,t))return true;if(n&&Object.prototype.hasOwnProperty.call(a,n))return true;const i=String(r?.label??"").trim();if(i&&Object.prototype.hasOwnProperty.call(a,i))return true;if(Array.isArray(e))return o>=0&&o<e.length;return false}collectExistingRowIndexes(e){if(this.isObjectMode()){const o=`${e}.`;return Object.keys(this.structureService.flatModelMap).some(a=>a.startsWith(o))?[0]:[]}const t=this.escapeRegex(e);const n=new RegExp(`^${t}\\[(\\d+)\\]`);const r=new Set;Object.keys(this.structureService.flatModelMap).forEach(o=>{const a=o.match(n);if(!a)return;r.add(Number(a[1]))});return Array.from(r.values())}removeStaleRowTemplateModels(e,t,n){const r=`${this.rowPath(e,t)}.`;Object.keys(this.structureService.flatModelMap).forEach(o=>{if(!o.startsWith(r))return;const a=o.slice(r.length).match(/^([^[.\]]+)/)?.[1]??"";if(!a||n.has(a))return;delete this.structureService.flatModelMap[o]})}removeFlatMapBranch(e){Object.keys(this.structureService.flatModelMap).forEach(t=>{if(t===e||t.startsWith(`${e}.`)||t.startsWith(`${e}[`))delete this.structureService.flatModelMap[t]})}hasMeaningfulValue(e){if(e===void 0||e===null)return false;if(typeof e==="string")return e.trim().length>0;return true}getElement(e){const t=String(e??"").trim();if(!t)return null;const n=this.model()?.template?.[t];if(n)return n;const r=this.findTemplateElementDeep(this.model()?.template,t);if(r)return r;return this.structureService.getElement(t)??null}getColumnElementTrackKey(e){const t=String(e?.elementRef??"").trim();if(!t)return"";return`${t}:${String(this.getElement(t)?.type??"").trim()}`}getElementModel(e,t){const n=this.model().dataPath;const r=this.getElement(t);if(!r)return null;const o=`${this.rowPath(n,e)}.${r.name}`;return this.structureService.flatModelMap[o]||null}findTemplateElementDeep(e,t){if(!e||typeof e!=="object"||!t)return null;if(e[t])return e[t];for(const n of Object.values(e)){const r=n?.template&&typeof n.template==="object"?n.template:null;if(!r)continue;const o=this.findTemplateElementDeep(r,t);if(o)return o}return null}getElementComponent(e){return this.componentRegistryService.getElementComponent(e)}updatePathsAfterDelete(e,t){const n=this.structureService.flatModelMap;const r=`${e}[`;const o=[];for(const a in n){if(!a.startsWith(r))continue;const i=n[a];const s=a.match(new RegExp(`^${this.escapeRegex(e)}\\[(\\d+)\\]`));if(!s)continue;const c=parseInt(s[1],10);if(c===t)continue;let m=a;let v=false;if(c>t){const u=c-1;m=a.replace(`${e}[${c}]`,`${e}[${u}]`);v=true;i.dataPath=m;if(typeof i.templateElementParentDataPath==="string")i.templateElementParentDataPath=i.templateElementParentDataPath.replace(`${e}[${c}]`,`${e}[${u}]`);if(typeof i.index==="number")i.index=u}if(Array.isArray(i.dependsOn)&&i.dependsOn.length>0){const u=new Set;for(const y of i.dependsOn){if(typeof y!=="string")continue;const _=y.match(new RegExp(`(${this.escapeRegex(e)}\\[)(\\d+)(\\])`));if(!_){u.add(y);continue}const T=parseInt(_[2],10);if(T===t)continue;if(T>t){const I=T-1;const he=y.replace(`${e}[${T}]`,`${e}[${I}]`);u.add(he)}else u.add(y)}i.dependsOn=Array.from(u)}if(v)o.push({oldPath:a,newPath:m,model:i})}for(const{oldPath:a,newPath:i,model:s}of o){delete n[a];n[i]=s}}escapeRegex(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}panelStyle(){const e=this.normalizeCssSize(this.model()?.["panelBorderWidth"]);const t=this.normalizeCssColor(this.model()?.["panelBorderColor"]);const n=this.normalizeCssSize(this.model()?.["panelPadding"]);const r=this.normalizeCssSize(this.model()?.["mobilePadding"]);return{width:"100%",padding:this.isMobileView()||this.isRealMobileViewport()?r||n:n,"border-radius":this.normalizeCssSize(this.model()?.["panelRadius"]),"box-shadow":this.normalizeCssShadow(this.model()?.["panelShadow"]),"background-color":this.normalizeCssColor(this.model()?.["panelBackgroundColor"]),"border-width":e,"border-style":e?"solid":null,"border-color":t}}bodyStyle(){const e=this.isGridLayout();return{display:e?"grid":"flex","grid-template-columns":e?this.buildGridTemplateColumns():null,"justify-content":this.normalizeJustify(this.model()?.["contentJustify"]),"align-items":this.normalizeAlign(this.model()?.["contentAlign"]),"align-content":e?"start":null,gap:this.normalizeCssSize(this.model()?.["contentGap"])}}previewRowStyle(e){const t=e??this.model();const n=this.normalizeContentDisplay(t?.["contentDisplay"]);const r=n==="grid";return{display:n,"flex-direction":r?null:this.normalizeFlexDirection(t?.["flexDirection"]),"flex-wrap":r?null:"wrap","justify-content":this.normalizeJustify(t?.["contentJustify"]),"align-items":this.normalizeAlign(t?.["contentAlign"]),gap:this.normalizeCssSize(t?.["contentGap"]),"margin-top":this.normalizeCssSize(t?.["contentGap"])?"0px":null,"grid-template-columns":r?this.normalizeCssTemplate(t?.["gridTemplateColumns"]):null,"grid-auto-rows":r?this.normalizeCssTemplate(t?.["gridAutoRows"]):null}}resolvePreviewColumnStyle(e,t){const n=e??this.model();const r=this.normalizeContentDisplay(n?.["contentDisplay"])==="flex"&&this.normalizeFlexDirection(n?.["flexDirection"])==="column";return Rt({width:t?.width,tabletWidth:t?.["tabletWidth"],mobileWidth:t?.["mobileWidth"],fitContent:Boolean(t?.fitContent),isTablet:!this.isMobileView()&&this.isRealTabletViewport(),isMobile:this.isMobileView()||this.isRealMobileViewport(),isVerticalFlexLayout:r})}normalizeCssColor(e){return String(e??"").trim()||null}normalizeCssShadow(e){return String(e??"").trim()||null}normalizeJustify(e){return String(e??"").trim()||null}normalizeAlign(e){return String(e??"").trim()||null}normalizeContentDisplay(e){return String(e??"").trim().toLowerCase()==="grid"?"grid":"flex"}normalizeFlexDirection(e){return String(e??"").trim().toLowerCase()==="column"?"column":"row"}normalizeCssTemplate(e){return String(e??"").trim()||null}normalizeCssSize(e){const t=String(e??"").trim();if(!t)return null;if(/^-?\d+(\.\d+)?$/.test(t))return`${t}px`;return t}isGridLayout(){return this.normalizeContentDisplay(this.model()["contentDisplay"])==="grid"}buildGridTemplateColumns(){const e=this.resolveResponsiveGridColumnCount();const t=this.normalizeCssSize(this.model()["gridMinColumnWidth"]);if(t)return`repeat(${e}, minmax(min(100%, ${t}), 1fr))`;return`repeat(${e}, minmax(0, 1fr))`}resolveResponsiveGridColumnCount(){const e=Number(this.model()["gridColumnCount"]);const t=Number.isFinite(e)&&e>0?Math.floor(e):2;if(this.isMobileView()||this.isRealMobileViewport())return 1;if(this.isRealTabletViewport())return Math.min(t,2);return t}reloadIfPanelPathChanged(e){const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=String(e??"").trim();if(!n)return;if(n!==t&&!n.startsWith(`${t}[`))return;if(Pt(n,t)!==null&&this.structureService.flatModelMap?.[n]){this.scheduleCellReload();return}this.loadPanelData()}cellReloadTimer=null;scheduleCellReload(){if(this.cellReloadTimer!==null)return;this.cellReloadTimer=setTimeout(()=>{this.cellReloadTimer=null;this.loadPanelData()},0)}hasDataSource(){return String(this.model()?.dataSource?.name??"").trim().length>0}resolveInitialDataSourceLoadedState(){if(!this.hasDataSource())return true;if(Boolean(this.model()["dataSourceLoaded"]))return true;if(R.isEditor())return true;return this.hasPersistedRowsSnapshot()}hasPersistedRowsSnapshot(){const e=String(this.model()?.dataPath??"").trim();if(e){const t=this.dataService.getValue(e);if(Array.isArray(t))return true}return Array.isArray(this.model()?.value)}markDataSourceLoaded(){this.dataSourceLoaded.set(true);this.model()["dataSourceLoaded"]=true}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}resolveMaxRows(){const e=Number(this.model()["maxRows"]);if(!Number.isFinite(e))return null;const t=Math.floor(e);return t>0?t:null}hasReachedMaxRows(){const e=this.resolveMaxRows();if(e===null)return false;return this.data().length>=e}canAddRows(){if(this.isInteractionLocked()||this.isObjectMode())return false;if(Boolean(this.model()["disallowAddRows"]))return false;if(this.isAddRowBlockedByLogic())return false;return!this.hasReachedMaxRows()}isAddRowControlVisible(){if(this.isInteractionLocked()||this.isObjectMode())return false;return!Boolean(this.model()["disallowAddRows"])}canDeleteRows(){if(this.isInteractionLocked()||this.isObjectMode())return false;return!Boolean(this.model()["disallowDeleteRows"])}canDeleteRow(e,t){if(!this.canDeleteRows())return false;return!be(this.expressionService,ue(this.model(),"disallowDeleteRowsIf"),ve(this.dataService.getData(),this.data(),e??{},t))}isAddRowBlockedByLogic(){return be(this.expressionService,ue(this.model(),"disallowAddRowsIf"),ve(this.dataService.getData(),this.data()))}resolveAddRowButtonText(){const e=String(this.model()["addRowButtonText"]??"").trim();if(e)return e;return this.uiTranslationService.translate("dynamicPanel.addRow","Add")}resolveRemoveRowButtonText(){const e=String(this.model()["removeRowButtonText"]??"").trim();if(e)return e;return this.uiTranslationService.translate("dynamicPanel.deleteRow","Delete")}resolveEmptyMessage(){const e=String(this.model()["emptyMessage"]??"").trim();if(e)return e;return this.uiTranslationService.translate("dynamicPanel.empty","Panel is empty, add a row")}buildHeaderTemplateRuntimeContext(){const e=this.model();const t=Array.isArray(this.data())?this.data():[];const n=Array.isArray(e?.value)?e.value:t;const r={...this.dataService.getData()??{},value:n,item:{},rows:t,items:t,count:t.length,element:e,panel:e,label:e?.label??"",description:e?.description??"",canAddRows:this.canAddRows(),canDeleteRows:this.canDeleteRows()};const o=String(e?.name??"").trim();if(o)r[o]=n;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveHeaderTemplateFieldMap())}resolveHeaderTemplateFieldMap(){const e=this.model()?.["headerTemplateFieldMap"];return e&&typeof e==="object"&&!Array.isArray(e)?e:null}resolveHeaderTemplateName(){const e=this.model();return String(e?.["headerTemplateName"]??e?.["headerTemplateRef"]??"").trim()}resolveHeaderTemplateMarkupFallback(){const e=this.model();return String(e?.["headerTemplate"]??e?.["headerTemplateHtml"]??e?.["headerTemplateMarkup"]??"").trim()}normalizeTemplate(e){if(typeof e!=="string")return null;const t=e.trim();if(!t)return null;const n=t.toLowerCase();if(n==="null"||n==="undefined")return null;return t}bumpRenderVersion(){this.renderVersion.update(e=>e+1)}async ensureDeleteConfirmed(){if(!Boolean(this.model()["confirmRowDeletion"]))return true;return this.confirmDialogService.open({title:this.resolveDeleteConfirmText("confirmDeleteTitle",this.uiTranslationService.translate("dynamicPanel.deleteTitle","Delete row")),message:this.resolveDeleteConfirmText("confirmDeleteMessage",this.uiTranslationService.translate("confirm.message","Are you sure you want to continue?")),confirmLabel:this.resolveDeleteConfirmText("confirmDeleteConfirmLabel",this.uiTranslationService.translate("confirm.confirm","Continue")),cancelLabel:this.resolveDeleteConfirmText("confirmDeleteCancelLabel",this.uiTranslationService.translate("confirm.cancel","Cancel"))})}resolveDeleteConfirmText(e,t){return String(this.model()[e]??"").trim()||t}isRealMobileViewport(){if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return _e()}isRealTabletViewport(){if(this.isRealMobileViewport())return false;if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return ht()}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ae,deps:[{token:M}],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:Ae,isStandalone:true,selector:"dynamic-panel",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null},column:{classPropertyName:"column",publicName:"column",isSignal:true,isRequired:false,transformFunction:null},recursiveData:{classPropertyName:"recursiveData",publicName:"recursiveData",isSignal:true,isRequired:false,transformFunction:null},isMobileView:{classPropertyName:"isMobileView",publicName:"isMobileView",isSignal:true,isRequired:false,transformFunction:null},builderLayerDepth:{classPropertyName:"builderLayerDepth",publicName:"builderLayerDepth",isSignal:true,isRequired:false,transformFunction:null}},host:{properties:{"attr.data-nvb-element-name":"model()?.name || null","attr.data-nvb-data-path":"model()?.dataPath || null","attr.data-nvb-element-type":"model()?.type || null","attr.data-testid":"(model()?.dataPath || model()?.name) ? 'nvb-element-' + (model()?.dataPath || model()?.name) : null"}},ngImport:l,template:"@let columnsExist = hasTemplateRows();\n\n@if (headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n<div\n  class=\"nvb-panel\"\n  [attr.aria-label]=\"model().label || model().name\"\n  [attr.data-testid]=\"tid('root')\"\n  [ngStyle]=\"panelStyle()\"\n>\n  @if (hasHeaderContent()) {\n    <header\n      class=\"nvb-panel__header\"\n      [class.nvb-panel__header--templated]=\"!!headerTemplateHtml()\"\n      [attr.data-testid]=\"tid('header')\"\n    >\n      @if (model()?.label) {\n        <h4 class=\"nvb-panel__header-heading\">\n          {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n        </h4>\n      }\n      @if (model()?.description) {\n        <p class=\"nvb-panel__header-description\">\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </p>\n      }\n      @if (headerTemplateHtml()) {\n        <div [attr.data-testid]=\"tid('header-template')\"\n          class=\"nvb-panel__header-template\"\n          [attr.data-nvb-template-scope]=\"templateScopeId\"\n          [innerHTML]=\"headerTemplateHtml()\"\n          (click)=\"onHeaderTemplateClick($event)\"\n        ></div>\n      }\n    </header>\n  }\n\n  <div class=\"nvb-panel__body\" [ngStyle]=\"bodyStyle()\" [attr.data-testid]=\"tid('body')\">\n    @if (hasDataSource() && !dataSourceLoaded()) {\n      <div class=\"nvb-dynamic-panel-skeleton\" [attr.data-testid]=\"tid('loading')\">\n        @for (_row of [0, 1, 2]; track _row) {\n          <div\n            class=\"nvb-dynamic-panel-skeleton__row\"\n            [attr.data-testid]=\"tid('loading-row', _row)\"\n          ></div>\n        }\n      </div>\n    } @else {\n      @if (columnsExist) {\n        @if (isEditor()) {\n          <div class=\"nvb-panel__content nvb-panel__content--builder\" [attr.data-testid]=\"tid('builder-content')\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                rowsTemplate;\n                context: {\n                  rows: column().rows,\n                  parentElement: model(),\n                  builderLayerDepth: builderLayerDepth(),\n                }\n              \"\n            ></ng-container>\n          </div>\n        } @else if (data()?.length > 0) {\n          @for (value of data(); track value; let rowIndex = $index) {\n            <div class=\"nvb-panel-item\" [attr.data-testid]=\"tid('row', rowIndex)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowsPreviewTemplate;\n                  context: {\n                    rows: column().rows,\n                    value: value,\n                    rowIndex: rowIndex,\n                    parentElement: model(),\n                  }\n                \"\n              ></ng-container>\n\n              @if (!isEditor() && canDeleteRow(value, rowIndex)) {\n                <div class=\"nvb-delete-warapper\">\n                  <button\n                    type=\"button\"\n                    class=\"nvb-remove-button\"\n                    (click)=\"deleteRow(rowIndex)\"\n                    [title]=\"resolveRemoveRowButtonText()\"\n                    [attr.aria-label]=\"resolveRemoveRowButtonText()\"\n                    [attr.data-testid]=\"tid('delete-row', rowIndex)\"\n                  >\n                    <nvb-icon name=\"do_not_disturb_on\" class=\"nvb-remove-button__icon\"></nvb-icon>\n                    {{ resolveRemoveRowButtonText() | dynamicText: model() }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"nvb-empty-panel\" [attr.data-testid]=\"tid('empty')\">\n            <p class=\"nvb-empty-panel__text\">\n              {{ resolveEmptyMessage() | dynamicText: model() }}\n            </p>\n          </div>\n        }\n      } @else {\n        <div\n          class=\"nvb-empty-panel\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [class.nvb-empty-panel--overlay]=\"hoveredElementName === model().name\"\n          [attr.data-testid]=\"\n            !columnsExist && !isEditor()\n              ? tid('empty-template')\n              : tid('empty-builder')\n          \"\n        >\n          @if (!columnsExist && !isEditor()) {\n            <nvb-icon name=\"draft\" class=\"nvb-empty-panel__icon\"></nvb-icon>\n            <p class=\"nvb-empty-panel__text\">{{ 'dynamicPanel.emptyPanel' | uiT: 'Panel is empty' }}</p>\n          } @else {\n            <nvb-icon name=\"note_stack_add\" class=\"nvb-empty-panel__icon\"></nvb-icon>\n            <p class=\"nvb-empty-panel__text\">\n              {{\n                'dynamicPanel.emptyBuilder'\n                  | uiT: 'Add elements from the left menu to build content'\n              }}\n            </p>\n          }\n          @if (dropOverlay() && isEditor()) {\n            <div\n              class=\"nvb-drop-overlay\"\n              (dragover)=\"onDragOver($event)\"\n              (dragleave)=\"onDragLeav($event)\"\n              (drop)=\"onDrop($event)\"\n            ></div>\n          }\n        </div>\n      }\n    }\n\n    @if (!isEditor() && columnsExist && dataSourceLoaded() && isAddRowControlVisible()) {\n      <div class=\"nvb-add-warapper\">\n        <button\n          type=\"button\"\n          class=\"nvb-control__add-row-button nvb-control__add-row-button--compact\"\n          (click)=\"addRow()\"\n          [disabled]=\"!canAddRows()\"\n          [attr.aria-label]=\"resolveAddRowButtonText() | dynamicText: model()\"\n          [attr.data-testid]=\"tid('add-row')\"\n        >\n          <nvb-icon name=\"add_circle\"></nvb-icon>\n          {{ resolveAddRowButtonText() | dynamicText: model() }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #rowsTemplate\n  let-rows=\"rows\"\n  let-parentElement=\"parentElement\"\n  let-builderLayerDepth=\"builderLayerDepth\"\n>\n  @for (row of rows; track $index; let rowIndex = $index) {\n    <row\n      [model]=\"row\"\n      [rows]=\"rows\"\n      [index]=\"rowIndex\"\n      [isTemplateElement]=\"true\"\n      [parentElement]=\"parentElement || model()\"\n    >\n      @for (\n        column of row.columns;\n        track getColumnElementTrackKey(column);\n        let columnIndex = $index\n      ) {\n        @let element = getElement(column.elementRef);\n\n        @if (element) {\n          <column\n            [model]=\"element\"\n            [index]=\"columnIndex\"\n            [columns]=\"row.columns\"\n            [parentElement]=\"parentElement || model()\"\n            [builderLayerDepth]=\"builderLayerDepth || 1\"\n          >\n            @if (element.type === 'panel') {\n              <panel-element [model]=\"element\" [column]=\"column\" [isMobileView]=\"isMobileView()\">\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </panel-element>\n            } @else if (element.type === 'dynamicPanel' || element.type === 'objectPanel') {\n              <dynamic-panel\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [builderLayerDepth]=\"(builderLayerDepth || 1) + 1\"\n              />\n            } @else if (element.type === 'tabs') {\n              <tabs-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </tabs-element>\n            } @else if (element.type === 'progressFlow') {\n              <progress-flow-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{\n                  parentElement: element,\n                  builderLayerDepth: (builderLayerDepth || 1) + 1,\n                }\"\n              />\n            } @else if (element.type === 'splitter') {\n              <splitter-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{ builderLayerDepth: (builderLayerDepth || 1) + 1 }\"\n              />\n            } @else if (element.type === 'dialog') {\n              <dialog-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{ builderLayerDepth: (builderLayerDepth || 1) + 1 }\"\n              />\n            } @else if (element.type === 'emptyBlock') {\n              <empty-block-element\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </empty-block-element>\n            } @else {\n              <ng-container\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\n              ></ng-container>\n            }\n          </column>\n        }\n      }\n    </row>\n  }\n</ng-template>\n\n<ng-template\n  #rowsPreviewTemplate\n  let-rows=\"rows\"\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-parentElement=\"parentElement\"\n>\n  @for (row of rows; track $index) {\n    <div class=\"nvb-row\" [ngStyle]=\"previewRowStyle(parentElement)\">\n      @for (\n        column of row.columns;\n        track getColumnElementTrackKey(column);\n        let columnIndex = $index\n      ) {\n        @let element = getElement(column.elementRef);\n\n        @let elementModel = getElementModel(rowIndex, column.elementRef);\n\n        @if (element) {\n          <!-- `element` is the shared template entry, `elementModel` this row's own\n               instance - visibility is a per-row condition, so it has to come from\n               the row. -->\n          <div\n            class=\"nvb-column\"\n            [class.nvb-column--hidden]=\"(elementModel ?? element).hidden\"\n            [ngStyle]=\"resolvePreviewColumnStyle(parentElement, element)\"\n          >\n            @if (element.type === 'panel') {\n              @if (elementModel) {\n                <panel-element\n                  [model]=\"elementModel\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                >\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: elementModel,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </panel-element>\n              } @else {\n                <panel-element [model]=\"element\" [column]=\"column\" [isMobileView]=\"isMobileView()\">\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: element,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </panel-element>\n              }\n            } @else if (element.type === 'dynamicPanel' || element.type === 'objectPanel') {\n              @if (elementModel) {\n                <dynamic-panel\n                  [model]=\"elementModel\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                />\n              }\n            } @else if (element.type === 'tabs') {\n              @if (elementModel) {\n                <tabs-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                >\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: elementModel,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </tabs-element>\n              }\n            } @else if (element.type === 'progressFlow') {\n              @if (elementModel) {\n                <progress-flow-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'splitter') {\n              @if (elementModel) {\n                <splitter-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'dialog') {\n              @if (elementModel) {\n                <dialog-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'emptyBlock') {\n              <empty-block-element\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsPreviewTemplate;\n                      context: {\n                        rows: column.rows,\n                        value: value,\n                        rowIndex: rowIndex,\n                        parentElement: element,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </empty-block-element>\n            } @else {\n              @if (elementModel) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    getElementComponent(elementModel.type);\n                    inputs: { model: elementModel }\n                  \"\n                ></ng-container>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #layoutTemplate let-element>\n  <ng-container\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\n  ></ng-container>\n</ng-template>\n",styles:[".nvb-panel{box-sizing:border-box;min-width:0;max-width:100%;border:1px solid var(--nvb-card-border-color);border-style:solid;border-radius:var(--nvb-card-radius);display:flex;flex-direction:column;overflow:hidden;background:var(--nvb-card-bg);color:var(--nvb-color-neutral-800);box-shadow:var(--nvb-card-shadow)}.nvb-panel__header{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--nvb-color-neutral-200);min-width:0;background:var(--nvb-color-neutral-000)}.nvb-panel__header--templated{padding:0}.nvb-panel__header-heading{margin:0;font-size:var(--nvb-text-subtitle2);line-height:22px;color:var(--nvb-color-neutral-900)}.nvb-panel__header-description{margin:0;color:color-mix(in oklab,var(--nvb-color-neutral-600) 86%,var(--nvb-color-surface-mix-target, white));font-size:var(--nvb-text-body1);line-height:20px}.nvb-panel__header-template{width:100%;min-width:0}.nvb-panel--focused{outline:0;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 54%,var(--nvb-color-neutral-300));box-shadow:var(--nvb-focus-ring)}.nvb-panel__content{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;z-index:1;padding:0;overflow:visible}.nvb-panel__content--builder{padding:6px 8px 10px}.nvb-panel__delete{position:absolute;right:-2px;bottom:-20px;background-color:var(--nvb-color-primary-500);border-bottom-right-radius:var(--nvb-radius-sm);border-bottom-left-radius:var(--nvb-radius-sm)}.nvb-panel__body{display:flex;flex-direction:column;padding:0}.nvb-empty-panel{box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));padding:clamp(16px,5vw,40px);display:flex;position:relative;justify-content:center;align-items:center;flex-direction:column;gap:8px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-200);text-align:center;margin:10px 12px}.nvb-empty-panel__icon{font-size:clamp(40px,10vw,60px);color:var(--nvb-color-neutral-600)}.nvb-empty-panel__text{color:var(--nvb-color-neutral-600);font-size:var(--nvb-text-body1);line-height:20px;margin:0;overflow-wrap:anywhere}.nvb-empty-panel--overlay{border-color:var(--nvb-color-primary-500);background-color:color-mix(in oklab,var(--nvb-color-primary-050) 68%,var(--nvb-color-neutral-000));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 42%,transparent)}.nvb-drop-overlay{position:absolute;z-index:var(--nvb-builder-z-inner-drop-overlay, 50);width:100%;height:90%;top:50%;left:50%;transform:translate(-50%,-50%)}.nvb-preview{width:100%;display:flex;height:100%;flex-direction:column;min-width:0}.nvb-preview__header{padding:10px;border-bottom:1px solid var(--nvb-color-neutral-600)}.nvb-preview__body{height:100%;display:flex;justify-content:start;min-height:0;overflow:auto;padding-bottom:20px}:host{width:100%}.nvb-view{display:flex;justify-content:start;align-items:center;flex-direction:column;gap:10px;width:100%;min-width:0}.nvb-row{display:flex;flex-wrap:wrap;width:100%;min-width:0;position:relative;align-items:start;gap:12px}.nvb-column{min-width:0;max-width:100%;box-sizing:border-box;padding:6px;position:relative;gap:12px}.nvb-column--hidden{display:none}.nvb-control__add-row-button{justify-content:start}.nvb-control__add-row-button.nvb-control__add-row-button--compact{border-radius:var(--nvb-radius-sm)}.nvb-panel-item{border-bottom:1px solid var(--nvb-color-neutral-200);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;box-sizing:border-box}.nvb-panel-item:last-of-type{border-bottom:0}.nvb-remove-button{display:flex;gap:2px;font-size:14px;color:var(--nvb-color-risk-600);cursor:pointer}.nvb-remove-button:hover{color:var(--nvb-color-risk-700)}.nvb-remove-button .nvb-icon-svg{font-size:18px}.nvb-delete-warapper{display:flex;justify-content:end;align-items:center;padding-right:5px}.nvb-add-warapper{display:flex;justify-content:start;align-items:center;padding:0;margin-top:8px}.nvb-dynamic-panel-skeleton{width:100%;display:grid;gap:8px;padding:14px 14px 4px}.nvb-dynamic-panel-skeleton__row{height:78px;border-radius:var(--nvb-control-radius);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-200) 90%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)));background-size:210% 100%;animation:dynamic-panel-loading-shimmer 1.05s ease-in-out infinite}@keyframes dynamic-panel-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"],dependencies:[{kind:"component",type:l.forwardRef(()=>Ae),selector:"dynamic-panel",inputs:["model","column","recursiveData","isMobileView","builderLayerDepth"]},{kind:"directive",type:l.forwardRef(()=>N),selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"directive",type:l.forwardRef(()=>De),selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:l.forwardRef(()=>$),selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:l.forwardRef(()=>ge),selector:"column",inputs:["model","index","columns","parentElement","builderLayerDepth"]},{kind:"component",type:l.forwardRef(()=>Ee),selector:"row",inputs:["model","rows","index","isTemplateElement","rowLength","parentPath","parentElement"]},{kind:"component",type:l.forwardRef(()=>se),selector:"panel-element",inputs:["model","column","isMobileView","rows"]},{kind:"component",type:l.forwardRef(()=>ce),selector:"empty-block-element",inputs:["model","column","isMobileView","rowsTemplate","templateContext","rows"]},{kind:"component",type:l.forwardRef(()=>ne),selector:"tabs-element",inputs:["model","column","rowsTemplate","templateContext","isMobileView"]},{kind:"component",type:l.forwardRef(()=>pe),selector:"progress-flow-element",inputs:["model","column","rowsTemplate","templateContext","isMobileView"]},{kind:"component",type:l.forwardRef(()=>me),selector:"splitter-element",inputs:["model","column","isMobileView","rowsTemplate","templateContext"]},{kind:"component",type:l.forwardRef(()=>de),selector:"dialog-element",inputs:["model","column","rowsTemplate","templateContext","isMobileView"]},{kind:"component",type:l.forwardRef(()=>W),selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"component",type:l.forwardRef(()=>F),selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]},{kind:"pipe",type:l.forwardRef(()=>k),name:"uiT"},{kind:"pipe",type:l.forwardRef(()=>A),name:"dynamicText"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Me,decorators:[{type:L,args:[{selector:"dynamic-panel",changeDetection:z.OnPush,imports:[N,De,$,ge,Ee,se,ce,ne,pe,me,de,Mn(()=>Me),An,Fe,k,A,W,F],host:{...ee},template:"@let columnsExist = hasTemplateRows();\n\n@if (headerTemplateCss()) {\n  <nvb-style-outlet\n    [cssText]=\"headerTemplateCss()\"\n    [renderInPlace]=\"true\"\n    [styleKey]=\"styleOutletKey()\"\n  ></nvb-style-outlet>\n}\n\n<div\n  class=\"nvb-panel\"\n  [attr.aria-label]=\"model().label || model().name\"\n  [attr.data-testid]=\"tid('root')\"\n  [ngStyle]=\"panelStyle()\"\n>\n  @if (hasHeaderContent()) {\n    <header\n      class=\"nvb-panel__header\"\n      [class.nvb-panel__header--templated]=\"!!headerTemplateHtml()\"\n      [attr.data-testid]=\"tid('header')\"\n    >\n      @if (model()?.label) {\n        <h4 class=\"nvb-panel__header-heading\">\n          {{ $safeNavigationMigration(model()?.label) | dynamicText: model() }}\n        </h4>\n      }\n      @if (model()?.description) {\n        <p class=\"nvb-panel__header-description\">\n          {{ $safeNavigationMigration(model()?.description) | dynamicText: model() }}\n        </p>\n      }\n      @if (headerTemplateHtml()) {\n        <div [attr.data-testid]=\"tid('header-template')\"\n          class=\"nvb-panel__header-template\"\n          [attr.data-nvb-template-scope]=\"templateScopeId\"\n          [innerHTML]=\"headerTemplateHtml()\"\n          (click)=\"onHeaderTemplateClick($event)\"\n        ></div>\n      }\n    </header>\n  }\n\n  <div class=\"nvb-panel__body\" [ngStyle]=\"bodyStyle()\" [attr.data-testid]=\"tid('body')\">\n    @if (hasDataSource() && !dataSourceLoaded()) {\n      <div class=\"nvb-dynamic-panel-skeleton\" [attr.data-testid]=\"tid('loading')\">\n        @for (_row of [0, 1, 2]; track _row) {\n          <div\n            class=\"nvb-dynamic-panel-skeleton__row\"\n            [attr.data-testid]=\"tid('loading-row', _row)\"\n          ></div>\n        }\n      </div>\n    } @else {\n      @if (columnsExist) {\n        @if (isEditor()) {\n          <div class=\"nvb-panel__content nvb-panel__content--builder\" [attr.data-testid]=\"tid('builder-content')\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                rowsTemplate;\n                context: {\n                  rows: column().rows,\n                  parentElement: model(),\n                  builderLayerDepth: builderLayerDepth(),\n                }\n              \"\n            ></ng-container>\n          </div>\n        } @else if (data()?.length > 0) {\n          @for (value of data(); track value; let rowIndex = $index) {\n            <div class=\"nvb-panel-item\" [attr.data-testid]=\"tid('row', rowIndex)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowsPreviewTemplate;\n                  context: {\n                    rows: column().rows,\n                    value: value,\n                    rowIndex: rowIndex,\n                    parentElement: model(),\n                  }\n                \"\n              ></ng-container>\n\n              @if (!isEditor() && canDeleteRow(value, rowIndex)) {\n                <div class=\"nvb-delete-warapper\">\n                  <button\n                    type=\"button\"\n                    class=\"nvb-remove-button\"\n                    (click)=\"deleteRow(rowIndex)\"\n                    [title]=\"resolveRemoveRowButtonText()\"\n                    [attr.aria-label]=\"resolveRemoveRowButtonText()\"\n                    [attr.data-testid]=\"tid('delete-row', rowIndex)\"\n                  >\n                    <nvb-icon name=\"do_not_disturb_on\" class=\"nvb-remove-button__icon\"></nvb-icon>\n                    {{ resolveRemoveRowButtonText() | dynamicText: model() }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"nvb-empty-panel\" [attr.data-testid]=\"tid('empty')\">\n            <p class=\"nvb-empty-panel__text\">\n              {{ resolveEmptyMessage() | dynamicText: model() }}\n            </p>\n          </div>\n        }\n      } @else {\n        <div\n          class=\"nvb-empty-panel\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [class.nvb-empty-panel--overlay]=\"hoveredElementName === model().name\"\n          [attr.data-testid]=\"\n            !columnsExist && !isEditor()\n              ? tid('empty-template')\n              : tid('empty-builder')\n          \"\n        >\n          @if (!columnsExist && !isEditor()) {\n            <nvb-icon name=\"draft\" class=\"nvb-empty-panel__icon\"></nvb-icon>\n            <p class=\"nvb-empty-panel__text\">{{ 'dynamicPanel.emptyPanel' | uiT: 'Panel is empty' }}</p>\n          } @else {\n            <nvb-icon name=\"note_stack_add\" class=\"nvb-empty-panel__icon\"></nvb-icon>\n            <p class=\"nvb-empty-panel__text\">\n              {{\n                'dynamicPanel.emptyBuilder'\n                  | uiT: 'Add elements from the left menu to build content'\n              }}\n            </p>\n          }\n          @if (dropOverlay() && isEditor()) {\n            <div\n              class=\"nvb-drop-overlay\"\n              (dragover)=\"onDragOver($event)\"\n              (dragleave)=\"onDragLeav($event)\"\n              (drop)=\"onDrop($event)\"\n            ></div>\n          }\n        </div>\n      }\n    }\n\n    @if (!isEditor() && columnsExist && dataSourceLoaded() && isAddRowControlVisible()) {\n      <div class=\"nvb-add-warapper\">\n        <button\n          type=\"button\"\n          class=\"nvb-control__add-row-button nvb-control__add-row-button--compact\"\n          (click)=\"addRow()\"\n          [disabled]=\"!canAddRows()\"\n          [attr.aria-label]=\"resolveAddRowButtonText() | dynamicText: model()\"\n          [attr.data-testid]=\"tid('add-row')\"\n        >\n          <nvb-icon name=\"add_circle\"></nvb-icon>\n          {{ resolveAddRowButtonText() | dynamicText: model() }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #rowsTemplate\n  let-rows=\"rows\"\n  let-parentElement=\"parentElement\"\n  let-builderLayerDepth=\"builderLayerDepth\"\n>\n  @for (row of rows; track $index; let rowIndex = $index) {\n    <row\n      [model]=\"row\"\n      [rows]=\"rows\"\n      [index]=\"rowIndex\"\n      [isTemplateElement]=\"true\"\n      [parentElement]=\"parentElement || model()\"\n    >\n      @for (\n        column of row.columns;\n        track getColumnElementTrackKey(column);\n        let columnIndex = $index\n      ) {\n        @let element = getElement(column.elementRef);\n\n        @if (element) {\n          <column\n            [model]=\"element\"\n            [index]=\"columnIndex\"\n            [columns]=\"row.columns\"\n            [parentElement]=\"parentElement || model()\"\n            [builderLayerDepth]=\"builderLayerDepth || 1\"\n          >\n            @if (element.type === 'panel') {\n              <panel-element [model]=\"element\" [column]=\"column\" [isMobileView]=\"isMobileView()\">\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </panel-element>\n            } @else if (element.type === 'dynamicPanel' || element.type === 'objectPanel') {\n              <dynamic-panel\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [builderLayerDepth]=\"(builderLayerDepth || 1) + 1\"\n              />\n            } @else if (element.type === 'tabs') {\n              <tabs-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </tabs-element>\n            } @else if (element.type === 'progressFlow') {\n              <progress-flow-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{\n                  parentElement: element,\n                  builderLayerDepth: (builderLayerDepth || 1) + 1,\n                }\"\n              />\n            } @else if (element.type === 'splitter') {\n              <splitter-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{ builderLayerDepth: (builderLayerDepth || 1) + 1 }\"\n              />\n            } @else if (element.type === 'dialog') {\n              <dialog-element\n                [model]=\"$any(element)\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n                [rowsTemplate]=\"rowsTemplate\"\n                [templateContext]=\"{ builderLayerDepth: (builderLayerDepth || 1) + 1 }\"\n              />\n            } @else if (element.type === 'emptyBlock') {\n              <empty-block-element\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsTemplate;\n                      context: {\n                        rows: column.rows,\n                        parentElement: element,\n                        builderLayerDepth: (builderLayerDepth || 1) + 1,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </empty-block-element>\n            } @else {\n              <ng-container\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\n              ></ng-container>\n            }\n          </column>\n        }\n      }\n    </row>\n  }\n</ng-template>\n\n<ng-template\n  #rowsPreviewTemplate\n  let-rows=\"rows\"\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-parentElement=\"parentElement\"\n>\n  @for (row of rows; track $index) {\n    <div class=\"nvb-row\" [ngStyle]=\"previewRowStyle(parentElement)\">\n      @for (\n        column of row.columns;\n        track getColumnElementTrackKey(column);\n        let columnIndex = $index\n      ) {\n        @let element = getElement(column.elementRef);\n\n        @let elementModel = getElementModel(rowIndex, column.elementRef);\n\n        @if (element) {\n          <!-- `element` is the shared template entry, `elementModel` this row's own\n               instance - visibility is a per-row condition, so it has to come from\n               the row. -->\n          <div\n            class=\"nvb-column\"\n            [class.nvb-column--hidden]=\"(elementModel ?? element).hidden\"\n            [ngStyle]=\"resolvePreviewColumnStyle(parentElement, element)\"\n          >\n            @if (element.type === 'panel') {\n              @if (elementModel) {\n                <panel-element\n                  [model]=\"elementModel\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                >\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: elementModel,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </panel-element>\n              } @else {\n                <panel-element [model]=\"element\" [column]=\"column\" [isMobileView]=\"isMobileView()\">\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: element,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </panel-element>\n              }\n            } @else if (element.type === 'dynamicPanel' || element.type === 'objectPanel') {\n              @if (elementModel) {\n                <dynamic-panel\n                  [model]=\"elementModel\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                />\n              }\n            } @else if (element.type === 'tabs') {\n              @if (elementModel) {\n                <tabs-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                >\n                  @if (column.rows && column.rows.length > 0) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        rowsPreviewTemplate;\n                        context: {\n                          rows: column.rows,\n                          value: value,\n                          rowIndex: rowIndex,\n                          parentElement: elementModel,\n                        }\n                      \"\n                    ></ng-container>\n                  }\n                </tabs-element>\n              }\n            } @else if (element.type === 'progressFlow') {\n              @if (elementModel) {\n                <progress-flow-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'splitter') {\n              @if (elementModel) {\n                <splitter-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'dialog') {\n              @if (elementModel) {\n                <dialog-element\n                  [model]=\"$any(elementModel)\"\n                  [column]=\"column\"\n                  [isMobileView]=\"isMobileView()\"\n                  [rowsTemplate]=\"rowsPreviewTemplate\"\n                  [templateContext]=\"{ value: value, rowIndex: rowIndex }\"\n                />\n              }\n            } @else if (element.type === 'emptyBlock') {\n              <empty-block-element\n                [model]=\"element\"\n                [column]=\"column\"\n                [isMobileView]=\"isMobileView()\"\n              >\n                @if (column.rows && column.rows.length > 0) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowsPreviewTemplate;\n                      context: {\n                        rows: column.rows,\n                        value: value,\n                        rowIndex: rowIndex,\n                        parentElement: element,\n                      }\n                    \"\n                  ></ng-container>\n                }\n              </empty-block-element>\n            } @else {\n              @if (elementModel) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    getElementComponent(elementModel.type);\n                    inputs: { model: elementModel }\n                  \"\n                ></ng-container>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #layoutTemplate let-element>\n  <ng-container\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\n  ></ng-container>\n</ng-template>\n",styles:[".nvb-panel{box-sizing:border-box;min-width:0;max-width:100%;border:1px solid var(--nvb-card-border-color);border-style:solid;border-radius:var(--nvb-card-radius);display:flex;flex-direction:column;overflow:hidden;background:var(--nvb-card-bg);color:var(--nvb-color-neutral-800);box-shadow:var(--nvb-card-shadow)}.nvb-panel__header{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--nvb-color-neutral-200);min-width:0;background:var(--nvb-color-neutral-000)}.nvb-panel__header--templated{padding:0}.nvb-panel__header-heading{margin:0;font-size:var(--nvb-text-subtitle2);line-height:22px;color:var(--nvb-color-neutral-900)}.nvb-panel__header-description{margin:0;color:color-mix(in oklab,var(--nvb-color-neutral-600) 86%,var(--nvb-color-surface-mix-target, white));font-size:var(--nvb-text-body1);line-height:20px}.nvb-panel__header-template{width:100%;min-width:0}.nvb-panel--focused{outline:0;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 54%,var(--nvb-color-neutral-300));box-shadow:var(--nvb-focus-ring)}.nvb-panel__content{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;z-index:1;padding:0;overflow:visible}.nvb-panel__content--builder{padding:6px 8px 10px}.nvb-panel__delete{position:absolute;right:-2px;bottom:-20px;background-color:var(--nvb-color-primary-500);border-bottom-right-radius:var(--nvb-radius-sm);border-bottom-left-radius:var(--nvb-radius-sm)}.nvb-panel__body{display:flex;flex-direction:column;padding:0}.nvb-empty-panel{box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:color-mix(in oklab,var(--nvb-color-neutral-050) 78%,var(--nvb-color-neutral-000));padding:clamp(16px,5vw,40px);display:flex;position:relative;justify-content:center;align-items:center;flex-direction:column;gap:8px;border-radius:var(--nvb-control-radius);border:1px solid var(--nvb-color-neutral-200);text-align:center;margin:10px 12px}.nvb-empty-panel__icon{font-size:clamp(40px,10vw,60px);color:var(--nvb-color-neutral-600)}.nvb-empty-panel__text{color:var(--nvb-color-neutral-600);font-size:var(--nvb-text-body1);line-height:20px;margin:0;overflow-wrap:anywhere}.nvb-empty-panel--overlay{border-color:var(--nvb-color-primary-500);background-color:color-mix(in oklab,var(--nvb-color-primary-050) 68%,var(--nvb-color-neutral-000));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 42%,transparent)}.nvb-drop-overlay{position:absolute;z-index:var(--nvb-builder-z-inner-drop-overlay, 50);width:100%;height:90%;top:50%;left:50%;transform:translate(-50%,-50%)}.nvb-preview{width:100%;display:flex;height:100%;flex-direction:column;min-width:0}.nvb-preview__header{padding:10px;border-bottom:1px solid var(--nvb-color-neutral-600)}.nvb-preview__body{height:100%;display:flex;justify-content:start;min-height:0;overflow:auto;padding-bottom:20px}:host{width:100%}.nvb-view{display:flex;justify-content:start;align-items:center;flex-direction:column;gap:10px;width:100%;min-width:0}.nvb-row{display:flex;flex-wrap:wrap;width:100%;min-width:0;position:relative;align-items:start;gap:12px}.nvb-column{min-width:0;max-width:100%;box-sizing:border-box;padding:6px;position:relative;gap:12px}.nvb-column--hidden{display:none}.nvb-control__add-row-button{justify-content:start}.nvb-control__add-row-button.nvb-control__add-row-button--compact{border-radius:var(--nvb-radius-sm)}.nvb-panel-item{border-bottom:1px solid var(--nvb-color-neutral-200);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;box-sizing:border-box}.nvb-panel-item:last-of-type{border-bottom:0}.nvb-remove-button{display:flex;gap:2px;font-size:14px;color:var(--nvb-color-risk-600);cursor:pointer}.nvb-remove-button:hover{color:var(--nvb-color-risk-700)}.nvb-remove-button .nvb-icon-svg{font-size:18px}.nvb-delete-warapper{display:flex;justify-content:end;align-items:center;padding-right:5px}.nvb-add-warapper{display:flex;justify-content:start;align-items:center;padding:0;margin-top:8px}.nvb-dynamic-panel-skeleton{width:100%;display:grid;gap:8px;padding:14px 14px 4px}.nvb-dynamic-panel-skeleton__row{height:78px;border-radius:var(--nvb-control-radius);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-200) 90%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)));background-size:210% 100%;animation:dynamic-panel-loading-shimmer 1.05s ease-in-out infinite}@keyframes dynamic-panel-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"]}]}],ctorParameters:()=>[{type:M}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}],column:[{type:l.Input,args:[{isSignal:true,alias:"column",required:false}]}],recursiveData:[{type:l.Input,args:[{isSignal:true,alias:"recursiveData",required:false}]}],isMobileView:[{type:l.Input,args:[{isSignal:true,alias:"isMobileView",required:false}]}],builderLayerDepth:[{type:l.Input,args:[{isSignal:true,alias:"builderLayerDepth",required:false}]}]}});var je=class it{model=g(...ngDevMode?[void 0,{debugName:"model"}]:[]);tid=G(this.model,"nvb-dynamic-table-column","dynamic-table-column");focusedElementName=b(null,...ngDevMode?[{debugName:"focusedElementName"}]:[]);isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);propertyVersion=b(0,...ngDevMode?[{debugName:"propertyVersion"}]:[]);eventService=p(E);elementFocusService=p(K);onElementFocusHandler=e=>{this.focusedElementName.set(this.resolveFocusKey(e.payload))};onAfterPropertyChangedHandler=()=>{this.propertyVersion.update(e=>e+1)};ngOnInit(){this.eventService.onElementFocus.add(this.onElementFocusHandler);this.eventService.afterPropertyChanged.add(this.onAfterPropertyChangedHandler);this.isEditor.set(R.isEditor())}ngOnDestroy(){this.eventService.onElementFocus.remove(this.onElementFocusHandler);this.eventService.afterPropertyChanged.remove(this.onAfterPropertyChangedHandler)}isRequired(){this.propertyVersion();return Boolean(this.model()?.required)}isHidden(){this.propertyVersion();return Boolean(this.model()?.hidden)}focusColumn(){if(!this.isEditor())return;this.elementFocusService.setFocus(this.model())}onMouseDown(e){if(!this.isEditor())return;e.stopPropagation();this.focusColumn()}onContextMenu(e){if(!this.isEditor())return;e.preventDefault();e.stopPropagation();const t=this.model();if(!t)return;this.focusColumn();this.eventService.onElementContextMenuRequested.fire({payload:{ownerName:String(t.parentElement?.name??"").trim(),model:t,clientX:e.clientX,clientY:e.clientY}})}resolveFocusKey(e){return X(e)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:it,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:it,isStandalone:true,selector:"dynamic-table-column",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null}},ngImport:l,template:"@let elementFocused = focusedElementName() === resolveFocusKey(model());\n\n<div\n  class=\"nvb-header-cell\"\n  [class.nvb-focused]=\"elementFocused && isEditor()\"\n  [class.nvb-header-cell--hidden]=\"isEditor() && isHidden()\"\n  [tabIndex]=\"isEditor() ? 0 : -1\"\n  [attr.title]=\"isEditor() ? model()?.name || null : null\"\n  [attr.aria-label]=\"model()?.label || model()?.name\"\n  [attr.data-testid]=\"tid('root')\"\n  (mousedown)=\"onMouseDown($event)\"\n  (focus)=\"focusColumn()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <span> {{ model().label | dynamicText: model() }}</span>\n  @if (isRequired()) {\n    <span class=\"nvb-header-cell-required\">*</span>\n  }\n</div>\n",styles:[".nvb-header-cell,.nvb-body-cell{vertical-align:middle;word-wrap:break-word;color:var(--nvb-color-neutral-600);padding:5px}.nvb-header-cell{padding:6px 10px}.nvb-header-cell-required{color:var(--nvb-color-risk-600)}.nvb-focused{outline:2px solid var(--nvb-color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--nvb-color-primary-050) 75%,var(--nvb-color-surface-mix-target, white))}.nvb-header-cell--hidden{opacity:.4}\n"],dependencies:[{kind:"pipe",type:A,name:"dynamicText"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:je,decorators:[{type:L,args:[{selector:"dynamic-table-column",changeDetection:z.OnPush,imports:[A],template:"@let elementFocused = focusedElementName() === resolveFocusKey(model());\n\n<div\n  class=\"nvb-header-cell\"\n  [class.nvb-focused]=\"elementFocused && isEditor()\"\n  [class.nvb-header-cell--hidden]=\"isEditor() && isHidden()\"\n  [tabIndex]=\"isEditor() ? 0 : -1\"\n  [attr.title]=\"isEditor() ? model()?.name || null : null\"\n  [attr.aria-label]=\"model()?.label || model()?.name\"\n  [attr.data-testid]=\"tid('root')\"\n  (mousedown)=\"onMouseDown($event)\"\n  (focus)=\"focusColumn()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <span> {{ model().label | dynamicText: model() }}</span>\n  @if (isRequired()) {\n    <span class=\"nvb-header-cell-required\">*</span>\n  }\n</div>\n",styles:[".nvb-header-cell,.nvb-body-cell{vertical-align:middle;word-wrap:break-word;color:var(--nvb-color-neutral-600);padding:5px}.nvb-header-cell{padding:6px 10px}.nvb-header-cell-required{color:var(--nvb-color-risk-600)}.nvb-focused{outline:2px solid var(--nvb-color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--nvb-color-primary-050) 75%,var(--nvb-color-surface-mix-target, white))}.nvb-header-cell--hidden{opacity:.4}\n"]}]}],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:false}]}]}});var Kn=Z({DynamicTableElement:()=>Ge});var Ge=class lt{model=g.required(...ngDevMode?[{debugName:"model"}]:[]);columns=b([],...ngDevMode?[{debugName:"columns"}]:[]);tableData=b([],...ngDevMode?[{debugName:"tableData"}]:[]);visibleRows=b([],...ngDevMode?[{debugName:"visibleRows"}]:[]);dataSourceLoaded=b(true,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditor=b(false,...ngDevMode?[{debugName:"isEditor"}]:[]);tableTotalsCache=new Map;cellToneCache=new Map;onDataSourceLoadedHandler=null;onElementChangingHandler=null;onDataMutatedHandler=null;onValueChangedHandler=null;onPropertyChangedHandler=e=>{const t=e?.payload;if(!t)return;if(t.propertyKey!=="disabled"&&t.propertyKey!=="readOnly")return;this.reapplyRowsInteractionState();this.cdr.markForCheck()};structureService=p(xe);dataService=p(j);eventService=p(E);cdr=p(En);modelService=p(Pe);rendererService=p(vt);previewRendererService=p(bt);loadRowDataSource(e){if(!R.isEditor())this.previewRendererService.loadDataSourceFor(e)}componentRegistryService=p(ke);expressionService=p(Q);validatorService=p(Ne);inputMaskService=p(on);localeFormatService=p(Nt);confirmDialogService=p(gt);uiTranslationService=p(ye);ngxViewBuilderApiService=p(Se);constructor(){this.onElementChangingHandler=e=>{if(e.sender?.parentElement&&e.sender?.parentElement.name===this.model().name){if(String(e.key??"").trim()==="type")this.rebuildColumnTypeModels(e.sender);this.loadTableData()}};this.structureService.onElementChanging.add(this.onElementChangingHandler);this.onDataMutatedHandler=e=>{this.clearCellToneCache();this.reloadIfTablePathChanged(e?.dataPath)};this.dataService.onDataMutated.add(this.onDataMutatedHandler);this.onValueChangedHandler=()=>{this.clearCellToneCache();this.reapplyRowsInteractionState();this.cdr.markForCheck();if(!this.hasHideRowCondition())return;this.refreshVisibleRows()};this.dataService.onValueChanged.add(this.onValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onPropertyChangedHandler)}ngOnInit(){this.dataSourceLoaded.set(this.resolveInitialDataSourceLoadedState());this.onDataSourceLoadedHandler=()=>{this.markDataSourceLoaded();this.loadTableData()};this.model().afterDataSourceLoad?.add(this.onDataSourceLoadedHandler);this.loadTableData();this.isEditor.set(R.isEditor())}ngOnDestroy(){if(this.onDataSourceLoadedHandler){this.model().afterDataSourceLoad?.remove(this.onDataSourceLoadedHandler);this.onDataSourceLoadedHandler=null}if(this.onElementChangingHandler){this.structureService.onElementChanging.remove(this.onElementChangingHandler);this.onElementChangingHandler=null}if(this.onDataMutatedHandler){this.dataService.onDataMutated.remove(this.onDataMutatedHandler);this.onDataMutatedHandler=null}if(this.onValueChangedHandler){this.dataService.onValueChanged.remove(this.onValueChangedHandler);this.onValueChangedHandler=null}this.eventService.afterPropertyChanged.remove(this.onPropertyChangedHandler)}loadTableData(){const e=this.model().dataPath;this.columns.set(this.model().columns||[]);const t=this.dataService.getValue(e);let n=[];if(Array.isArray(t))n=t;else{const o=this.model().value;n=Array.isArray(o)?o:[]}if(this.hasDataSource()&&!this.dataSourceLoaded()&&(Array.isArray(t)||Array.isArray(this.model().value)||R.isEditor()))this.markDataSourceLoaded();const r=this.normalizeTableRows(n,this.tableData());this.clearCellToneCache();this.model().value=r;this.tableData.set(r);this.visibleRows.set(this.buildVisibleRows(r));this.syncRowModels(r);this.syncTotalsToData()}normalizeTableRows(e,t){if(!Array.isArray(e))return[];return e.map((n,r)=>{if(n!==null&&typeof n==="object")return n;const o=t[r];if(o!==null&&typeof o==="object")return o;return{}})}refreshVisibleRows(){this.visibleRows.set(this.buildVisibleRows(this.tableData()))}buildVisibleRows(e){if(!Array.isArray(e)||e.length===0)return[];return e.map((t,n)=>({row:t,sourceIndex:n})).filter(t=>!this.shouldHideRow(t.row,t.sourceIndex))}hasHideRowCondition(){return String(this.model()["hideRowIf"]??"").trim().length>0}shouldHideRow(e,t){return be(this.expressionService,ue(this.model(),"hideRowIf"),ve(this.dataService.getData(),this.tableData(),e,t))}isAddRowBlockedByLogic(){return be(this.expressionService,ue(this.model(),"disallowAddRowsIf"),ve(this.dataService.getData(),this.tableData()))}canDeleteRow(e,t){if(!this.canDeleteRows())return false;return!be(this.expressionService,ue(this.model(),"disallowDeleteRowsIf"),ve(this.dataService.getData(),this.tableData(),e??{},t))}resolveMaxRows(){const e=Number(this.model()["maxRows"]);if(!Number.isFinite(e))return null;const t=Math.floor(e);return t>0?t:null}hasReachedMaxRows(){const e=this.resolveMaxRows();if(e===null)return false;return this.tableData().length>=e}canAddRow(){if(this.isInteractionLocked())return false;if(Boolean(this.model()["disallowAddRows"]))return false;if(this.isAddRowBlockedByLogic())return false;return!this.hasReachedMaxRows()}isAddRowControlVisible(){if(this.isInteractionLocked())return false;return!Boolean(this.model()["disallowAddRows"])}canDeleteRows(){if(this.isInteractionLocked())return false;return!Boolean(this.model()["disallowDeleteRows"])}resolveAddRowButtonText(){const e=String(this.model()["addRowButtonText"]??"").trim();if(e)return e;return this.uiTranslationService.translate("dynamicTable.addRow","Add")}resolveEmptyMessage(){const e=String(this.model()["emptyMessage"]??"").trim();if(e)return e;return this.uiTranslationService.translate("dynamicTable.empty","No rows yet")}async ensureDeleteConfirmed(){if(!Boolean(this.model()["confirmRowDeletion"]))return true;return this.confirmDialogService.open({title:this.resolveDeleteConfirmText("confirmDeleteTitle",this.uiTranslationService.translate("dynamicTable.deleteRowTitle","Delete row")),message:this.resolveDeleteConfirmText("confirmDeleteMessage",this.uiTranslationService.translate("confirm.message","Are you sure you want to continue?")),confirmLabel:this.resolveDeleteConfirmText("confirmDeleteConfirmLabel",this.uiTranslationService.translate("confirm.confirm","Continue")),cancelLabel:this.resolveDeleteConfirmText("confirmDeleteCancelLabel",this.uiTranslationService.translate("confirm.cancel","Cancel"))})}resolveDeleteConfirmText(e,t){return String(this.model()[e]??"").trim()||t}async deleteRow(e){if(this.isInteractionLocked()||!this.canDeleteRow(this.tableData()[e],e))return;if(!await this.ensureDeleteConfirmed())return;const t=this.model().dataPath;if(!t)return;this.removeFlatMapBranch(`${t}[${e}]`);const n=this.dataService.getValue(t);const r=Array.isArray(n)?[...n]:Array.isArray(this.model().value)?[...this.model().value]:[];if(e<0||e>=r.length)return;const o=r[e]??null;r.splice(e,1);this.updatePathsAfterDelete(t,e);this.dataService.setValue(t,r).then(()=>{this.loadTableData();this.rendererService.applyDependencies();this.rendererService.applyExpressions();this.validatorService.evaluateAllValidators();this.ngxViewBuilderApiService.notifyDynamicTableRowRemoved({elementName:this.model().name,elementDataPath:t,elementType:this.model().type,element:this.model(),rowIndex:e,row:o,rows:r,total:r.length})})}addRow(){if(this.isInteractionLocked()||!this.canAddRow())return;const e={};this.model().columns?.forEach(o=>{if(o.type==="dynamicPanel"||o.type==="dynamicTable")e[o.name]=[];else e[o.name]=this.hasMeaningfulValue(o.defaultValue)?o.defaultValue:void 0});const t=this.model().dataPath;const n=this.dataService.getValue(t);const r=Array.isArray(n)?[...n]:Array.isArray(this.model().value)?[...this.model().value]:[];r.push(e);this.dataService.setValue(t,r).then(()=>{this.createNewModels(r);this.loadTableData();this.rendererService.applyDependencies();this.rendererService.applyExpressions();this.validatorService.evaluateAllValidators();this.ngxViewBuilderApiService.notifyDynamicTableRowAdded({elementName:this.model().name,elementDataPath:t,elementType:this.model().type,element:this.model(),rowIndex:r.length-1,row:e,rows:r,total:r.length})})}createNewModels(e){const t=e.length-1;const n=this.model().dataPath;this.model().columns?.forEach((r,o)=>{const a=`${n}[${t}].${r.name}`;const i=`${this.model().schemaPath}.columns[${o}]`;const s=this.modelService.createModel(r.type,{...r,dataPath:a,schemaPath:i,dependsOn:[],index:t,parentElement:this.model(),isTemplateElement:this.model()?.isTemplateElement,templateElementParentDataPath:this.model()?.isTemplateElement?this.model().templateElementParentDataPath:null,value:r.type==="dynamicPanel"||r.type==="dynamicTable"?[]:this.hasMeaningfulValue(r.defaultValue)?r.defaultValue:void 0});this.structureService.flatModelMap[a]=s;this.applyParentInteractionStateToRowColumn(s);this.rendererService.applyElementDependencies(s);this.expressionService.evaluateStartingElement(s);this.loadRowDataSource(s)})}syncRowModels(e){const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=Array.isArray(this.model()?.columns)?this.model().columns:[];this.collectExistingRowIndexes(t).forEach(r=>{if(r<e.length)return;this.removeFlatMapBranch(`${t}[${r}]`)});e.forEach((r,o)=>{const a=new Set;n.forEach((i,s)=>{const c=String(i?.name??"").trim();if(!c)return;a.add(c);const m=`${t}[${o}].${c}`;const v=`${this.model().schemaPath}.columns[${s}]`;const u=this.structureService.flatModelMap[m];const y=this.resolveRowValue(r,c,i,s);const _=this.hasResolvableRowValue(r,c,i,s);const T=i.type==="dynamicPanel"||i.type==="dynamicTable"?Array.isArray(y)?y:!_&&Array.isArray(u?.value)?u.value:[]:y;if(u&&String(u.type??"").trim()===String(i.type??"").trim()){u.value=T;u.index=o;u.parentElement=this.model();u.dataPath=m;u.schemaPath=v;this.applyParentInteractionStateToRowColumn(u);return}const I=this.modelService.createModel(i.type,{...i,dataPath:m,schemaPath:v,dependsOn:[],index:o,parentElement:this.model(),isTemplateElement:this.model()?.isTemplateElement,templateElementParentDataPath:this.model()?.isTemplateElement?this.model().templateElementParentDataPath:null,value:T});this.structureService.flatModelMap[m]=I;this.applyParentInteractionStateToRowColumn(I);this.rendererService.applyElementDependencies(I);this.expressionService.evaluateStartingElement(I);this.loadRowDataSource(I)});this.removeStaleRowColumnModels(t,o,a)})}resolveRowValue(e,t,n,r){const o=e??{};if(Object.prototype.hasOwnProperty.call(o,t))return o[t];const a=String(n?.label??"").trim();if(a&&Object.prototype.hasOwnProperty.call(o,a))return o[a];if(Array.isArray(e))return e[r];const i=Object.entries(o);if(r<0||r>=i.length)return;return i[r][1]}hasResolvableRowValue(e,t,n,r){const o=e??{};if(Object.prototype.hasOwnProperty.call(o,t))return true;const a=String(n?.label??"").trim();if(a&&Object.prototype.hasOwnProperty.call(o,a))return true;if(Array.isArray(e))return r>=0&&r<e.length;return false}reapplyRowsInteractionState(){const e=String(this.model()?.dataPath??"").trim();const t=Array.isArray(this.model()?.columns)?this.model().columns:[];if(!e||t.length===0)return;this.collectExistingRowIndexes(e).forEach(n=>{t.forEach(r=>{const o=String(r?.name??"").trim();if(!o)return;const a=`${e}[${n}].${o}`;const i=this.structureService.flatModelMap[a];if(i)this.applyParentInteractionStateToRowColumn(i)})})}applyParentInteractionStateToRowColumn(e){if(!e)return;const t=Gt(this.model());const n=t.readOnly;const r=t.disabled;if(typeof e["__pfBaseReadOnly"]!=="boolean")e["__pfBaseReadOnly"]=Boolean(e.readOnly);if(typeof e["__pfBaseDisabled"]!=="boolean")e["__pfBaseDisabled"]=Boolean(e.disabled);const o=Boolean(e.readOnly);const a=Boolean(e.disabled);e.readOnly=Boolean(e["__pfBaseReadOnly"])||Boolean(e["__pfLogicReadOnly"])||n;e.disabled=Boolean(e["__pfBaseDisabled"])||Boolean(e["__pfLogicDisabled"])||r;e["__pfInteractionReadonly"]=Boolean(e.readOnly);e["__pfInteractionDisabled"]=Boolean(e.disabled);e["__pfInteractionLocked"]=Boolean(e.readOnly)||Boolean(e.disabled);if(o!==Boolean(e.readOnly))this.notifyRowElementPropertyChanged(e,"readOnly",e.readOnly);if(a!==Boolean(e.disabled))this.notifyRowElementPropertyChanged(e,"disabled",e.disabled)}notifyRowElementPropertyChanged(e,t,n){const r=String(e?.dataPath??"").trim();if(!r)return;this.eventService.afterPropertyChanged.fire({payload:{elementNameOrPath:r,propertyKey:t,value:n}})}collectExistingRowIndexes(e){const t=this.escapeRegex(e);const n=new RegExp(`^${t}\\[(\\d+)\\]`);const r=new Set;Object.keys(this.structureService.flatModelMap).forEach(o=>{const a=o.match(n);if(!a)return;r.add(Number(a[1]))});return Array.from(r.values())}removeStaleRowColumnModels(e,t,n){const r=`${e}[${t}].`;Object.keys(this.structureService.flatModelMap).forEach(o=>{if(!o.startsWith(r))return;const a=o.slice(r.length).match(/^([^[.\]]+)/)?.[1]??"";if(!a||n.has(a))return;delete this.structureService.flatModelMap[o]})}removeFlatMapBranch(e){Object.keys(this.structureService.flatModelMap).forEach(t=>{if(t===e||t.startsWith(`${e}.`)||t.startsWith(`${e}[`))delete this.structureService.flatModelMap[t]})}hasMeaningfulValue(e){if(e===void 0||e===null)return false;if(typeof e==="string")return e.trim().length>0;return true}getElementComponent(e){return this.componentRegistryService.getElementComponent(e)}getElementModel(e,t){const n=`${this.model().dataPath}[${e}].${t.name}`;return this.structureService.flatModelMap[n]||null}resolveCellTone(e,t,n){const r=String(n?.name??"").trim();if(!r)return null;const o=`${t}:${r}`;if(this.cellToneCache.has(o))return this.cellToneCache.get(o)??null;const a=this.computeCellTone(e,t,n);this.cellToneCache.set(o,a);return a}computeCellTone(e,t,n){const r=this.resolveColumnStatusRules(n);if(r.length===0)return null;const o=this.resolveCellStatusValue(e,n);const a=this.resolveCellStatusRuleContext(e,t,n,o);for(const i of r){if(!this.matchesCellStatusRule(i,a))continue;return this.normalizeStatusTone(i?.tone)}return null}resolveColumnStatusRules(e){const t=e["statusRules"];return Array.isArray(t)?t:[]}resolveCellStatusValue(e,t){const n=String(t?.name??"").trim();const r=(Array.isArray(this.model()?.columns)?this.model().columns:[]).findIndex(o=>o===t||String(o?.name??"").trim()===n);return this.resolveRowValue(e,n,t,r)}resolveCellStatusRuleContext(e,t,n,r){return{...this.dataService.getData()??{},row:e,item:e,panel:e,value:r,cellValue:r,index:t,rowIndex:t,column:n,parentRow:this.resolveParentRowContext()}}resolveParentRowContext(){const e=String(this.model()?.templateElementParentDataPath??"").trim();if(!e)return{};const t=this.dataService.getValue(e);if(!t||typeof t!=="object"||Array.isArray(t))return{};return t}matchesCellStatusRule(e,t){const n=String(e?.condition??"").trim();if(!n)return true;const r=n.replace(/\{([^}]+)\}/g,(o,a)=>String(a??"").trim());try{return Boolean(this.expressionService.runPropertyConditionSync(t,r))}catch{return false}}clearCellToneCache(){this.cellToneCache.clear()}normalizeStatusTone(e){const t=String(e??"").trim().toLowerCase();if(t==="success")return"success";if(t==="warning"||t==="warn")return"warning";if(t==="risk"||t==="danger"||t==="error")return"risk";if(t==="info")return"info";if(t==="primary")return"primary";return"neutral"}updatePathsAfterDelete(e,t){const n=this.structureService.flatModelMap;const r=`${e}[`;const o=this.escapeRegex(e);const a=[];for(const i in n){if(!i.startsWith(r))continue;const s=n[i];const c=i.match(new RegExp(`^${o}\\[(\\d+)\\]`));if(!c)continue;const m=parseInt(c[1],10);if(m===t)continue;let v=i;let u=false;if(m>t){const y=m-1;v=i.replace(`${e}[${m}]`,`${e}[${y}]`);u=true;s.dataPath=v;if(typeof s.templateElementParentDataPath==="string")s.templateElementParentDataPath=s.templateElementParentDataPath.replace(`${e}[${m}]`,`${e}[${y}]`);if(typeof s.index==="number")s.index=y}if(Array.isArray(s.dependsOn)&&s.dependsOn.length>0){const y=new Set;for(const _ of s.dependsOn){if(typeof _!=="string")continue;const T=_.match(new RegExp(`(${o}\\[)(\\d+)(\\])`));if(!T){y.add(_);continue}const I=parseInt(T[2],10);if(I===t)continue;if(I>t){const he=I-1;y.add(_.replace(`${e}[${I}]`,`${e}[${he}]`))}else y.add(_)}s.dependsOn=Array.from(y)}if(u)a.push({oldPath:i,newPath:v,model:s})}for(const{oldPath:i,newPath:s,model:c}of a){delete n[i];n[s]=c}}rebuildColumnTypeModels(e){const t=String(this.model()?.dataPath??"").trim();const n=String(e?.name??"").trim();if(!t||!n)return;const r=this.tableData();const o=this.model().columns.findIndex(a=>a.name===n);if(o<0)return;r.forEach((a,i)=>{const s=`${t}[${i}].${n}`;const c=this.dataService.getValue(s);const m=this.modelService.createModel(String(e.type??""),{...e,dataPath:s,schemaPath:`${this.model().schemaPath}.columns[${o}]`,dependsOn:[],index:i,parentElement:this.model(),value:c});this.structureService.flatModelMap[s]=m})}escapeRegex(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}reloadIfTablePathChanged(e){const t=String(this.model()?.dataPath??"").trim();if(!t)return;const n=String(e??"").trim();if(!n)return;if(n===t||n.startsWith(`${t}[`))this.loadTableData()}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return Boolean(e.disabled)||Boolean(e.readOnly)}hasDataSource(){return String(this.model()?.dataSource?.name??"").trim().length>0}resolveInitialDataSourceLoadedState(){if(!this.hasDataSource())return true;if(Boolean(this.model()["dataSourceLoaded"]))return true;if(R.isEditor())return true;return this.hasPersistedRowsSnapshot()}hasPersistedRowsSnapshot(){const e=String(this.model()?.dataPath??"").trim();if(e){const t=this.dataService.getValue(e);if(Array.isArray(t))return true}return Array.isArray(this.model()?.value)}markDataSourceLoaded(){this.dataSourceLoaded.set(true);this.model()["dataSourceLoaded"]=true}visibleColumnsCount(){return this.getVisibleColumns().length}getVisibleColumns(){if(this.isEditor())return this.columns();return this.columns().filter(e=>!e.hidden)}instanceTestId=f(()=>{const e=this.model();return String(e?.dataPath??"").trim()||String(e?.name??"").trim()||"dynamic-table"},...ngDevMode?[{debugName:"instanceTestId"}]:[]);tid(e,...t){const n=t.map(r=>String(r??"").trim()).filter(r=>r.length>0);return[`nvb-dynamic-table-${e}`,this.instanceTestId(),...n].join("-")}resolveHeaderCellTestId(e,t){return this.tid("header-cell",this.resolveColumnTestToken(e,t))}resolveBodyRowTestId(e){return this.tid("row",e)}resolveBodyCellTestId(e,t,n){return this.tid("cell",e,this.resolveColumnTestToken(t,n))}resolveFooterCellTestId(e,t){return this.tid("footer-cell",this.resolveColumnTestToken(e,t))}showActionsColumn(){return!this.isEditor()&&this.visibleRows().length>0&&this.canDeleteRows()}getEmptyStateColspan(){const e=this.visibleColumnsCount();const t=this.showActionsColumn()?1:0;return Math.max(1,e+t)}hasHeaderGroupingRow(){return this.getHeaderGroups().some(e=>e.label.length>0)}getHeaderGroups(){const e=this.getVisibleColumns();if(e.length===0)return[];const t=[];let n="";let r=0;const o=()=>{if(r>0)t.push({label:n,colspan:r});n="";r=0};e.forEach(a=>{const i=this.resolveHeaderGroupLabel(a);if(!i){o();t.push({label:"",colspan:1});return}if(!n){n=i;r=1;return}if(n===i){r+=1;return}o();n=i;r=1});o();return t}hasTotalsFooter(){return this.getVisibleColumns().some(e=>this.columnUsesTotals(e))}getFooterCellText(e){if(!this.columnUsesTotals(e))return"";const t=this.calculateColumnTotal(e);const n=this.formatTotalValue(e,t);const r=String(e["totalTemplate"]??"").trim()||this.uiTranslationService.translate("dynamicTable.totalTemplateDefault","Total: {total}");if(!r.includes("{total}"))return`${r} ${n}`.trim();return r.replace(/\{total\}/gi,n)}columnUsesTotals(e){return Boolean(e["useTotals"])}columnPublishesTotal(e){return this.columnUsesTotals(e)||Boolean(e["totalToData"])}resolveHeaderGroupLabel(e){return String(e["headerGroup"]??"").trim()}resolveColumnTestToken(e,t){const n=String(e?.name??"").trim();if(n)return this.slugify(n);const r=String(e?.label??"").trim();if(r)return this.slugify(r);return`col-${t}`}slugify(e){return String(e??"").trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"item"}calculateColumnTotal(e){const t=String(e?.name??"").trim();if(!t)return 0;const n=this.resolveColumnNumericLocale(e);return this.tableData().reduce((r,o)=>{const a=o?.[t];return r+this.normalizeNumericValue(a,n)},0)}formatTotalValue(e,t){const n=Number.isFinite(t)?t:0;const r=this.formatTotalWithLocale(e,n);const o=String(e["totalMaskType"]??"none").trim();if(!o||o==="none")return r;const a=this.stringifyTotalValue(n);const i=String(e["totalMaskPattern"]??"").trim();return this.inputMaskService.applyMask(a,o,i)||r}normalizeNumericValue(e,t){if(typeof e==="number")return Number.isFinite(e)?e:0;const n=this.localeFormatService.parseNumber(e,t);if(n!==null)return Number.isFinite(n)?n:0;if(typeof e!=="string")return 0;const r=e.trim();if(!r)return 0;const o=r.replace(/[^0-9,.\-]/g,"");if(!o)return 0;const a=o.includes(".");const i=o.includes(",");const s=(o.match(/\./g)||[]).length;const c=(o.match(/,/g)||[]).length;let m=o;if(a&&i)m=o.lastIndexOf(",")>o.lastIndexOf(".")?o.replace(/\./g,"").replace(",","."):o.replace(/,/g,"");else if(i&&!a){if(c===1){const u=o.split(",");m=u[0].length>3&&u[1].length===3?o.replace(",",""):o.replace(",",".")}else m=o.replace(/,/g,"")}else if(a&&!i){if(s===1){const u=o.split(".");m=u[0].length>3&&u[1].length===3?o.replace(".",""):o}else m=o.replace(/\./g,"")}const v=Number(m);return Number.isFinite(v)?v:0}stringifyTotalValue(e){if(!Number.isFinite(e))return"0";if(Number.isInteger(e))return String(e);const t=Number(e.toFixed(12));return String(t).replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}formatTotalWithLocale(e,t){const n=this.resolveTotalLocale(e);const r=this.resolveTotalUseGrouping(e);const o=this.resolveTotalFractionDigits(e["totalFractionDigits"]);const a=this.resolveVisualFractionDigits(e,"visualFormatMinFractionDigits");const i=this.resolveVisualFractionDigits(e,"visualFormatMaxFractionDigits");if(o===null){let s=a;let c=i;if(s!==null&&c!==null&&s>c)s=c;return this.localeFormatService.formatNumber(t,{locale:n,useGrouping:r,minimumFractionDigits:s===null?void 0:s,maximumFractionDigits:c===null?void 0:c})}return this.localeFormatService.formatNumber(t,{locale:n,useGrouping:r,minimumFractionDigits:o,maximumFractionDigits:o})}resolveTotalLocale(e){const t=String(e["totalLocale"]??"").trim();if(t)return t;if(!this.isVisualNumberFormattingEnabled(e))return"";return String(e["visualFormatLocale"]??"").trim()}resolveTotalUseGrouping(e){const t=e["totalUseGrouping"];if(t!==void 0&&t!==null)return Boolean(t);if(!this.isVisualNumberFormattingEnabled(e))return false;const n=e["visualFormatUseGrouping"];return n===void 0||n===null?true:Boolean(n)}resolveVisualFractionDigits(e,t){if(!this.isVisualNumberFormattingEnabled(e))return null;return this.resolveTotalFractionDigits(e[t])}resolveColumnNumericLocale(e){if(this.isVisualNumberFormattingEnabled(e))return String(e["visualFormatLocale"]??"").trim();return String(e["totalLocale"]??"").trim()}isVisualNumberFormattingEnabled(e){if(String(e["type"]??"").trim()!=="number")return false;return Boolean(e["visualFormatEnabled"])}resolveTotalFractionDigits(e){const t=Number(e);if(!Number.isFinite(t))return null;return Math.max(0,Math.min(20,Math.floor(t)))}async syncTotalsToData(){const e=String(this.model()?.dataPath??this.model()?.name??"").trim();if(!e)return;const t=(Array.isArray(this.model()?.columns)?this.model().columns:[]).filter(c=>this.columnPublishesTotal(c));const n=new Map;t.forEach(c=>{const m=String(c?.name??"").trim();if(!m)return;const v=this.buildTotalDataKey(e,m);const u=this.calculateColumnTotal(c);n.set(v,Number.isFinite(u)?u:0)});const r={};let o=false;n.forEach((c,m)=>{if(this.tableTotalsCache.get(m)===c)return;r[m]=c;o=true});const a=Object.keys(this.dataService.getData()??{}).filter(c=>c.startsWith(`${e}.`)&&c.endsWith("-total"));const i=new Set(Array.from(n.keys()));const s=a.filter(c=>!i.has(c));if(!o&&s.length===0)return;if(Object.keys(r).length>0)await this.dataService.setElementValue(r);s.forEach(c=>{this.dataService.removeValue(c)});this.tableTotalsCache=n;this.rendererService.applyDependencies();this.rendererService.applyExpressions();this.validatorService.evaluateAllValidators()}buildTotalDataKey(e,t){return`${e}.${t}-total`}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:lt,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:lt,isStandalone:true,selector:"lib-dynamic-table-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:l,template:"@let hasData = visibleRows().length > 0;\n\n<element-wrapper [model]=\"model()\">\n  @if (hasDataSource() && !dataSourceLoaded()) {\n    <div class=\"nvb-dynamic-table-skeleton\" [attr.data-testid]=\"tid('loading')\">\n      @for (_row of [0, 1, 2, 3]; track _row) {\n        <div\n          class=\"nvb-dynamic-table-skeleton__row\"\n          [attr.data-testid]=\"tid('loading-row', _row)\"\n        ></div>\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-dynamic-table-surface\" [attr.data-testid]=\"tid('surface')\">\n      <table [attr.aria-label]=\"model().label || model().name\" [attr.data-testid]=\"tid('root')\">\n        <caption class=\"nvb-sr-only\">{{ model().label || model().name }}</caption>\n        <thead>\n          @if (hasHeaderGroupingRow()) {\n            <tr class=\"nvb-group-header-row\" [attr.data-testid]=\"tid('group-header-row')\">\n              @for (group of getHeaderGroups(); track $index; let groupIndex = $index) {\n                <td\n                  class=\"nvb-group-header-cell\"\n                  [attr.colspan]=\"group.colspan\"\n                  [class.nvb-group-header-cell--empty]=\"!group.label\"\n                  [attr.data-testid]=\"tid('group-header-cell', groupIndex)\"\n                >\n                  @if (group.label) {\n                    <span>{{ group.label }}</span>\n                  }\n                </td>\n              }\n              @if (showActionsColumn()) {\n                <td\n                  class=\"nvb-group-header-cell nvb-group-header-cell--actions\"\n                  [attr.data-testid]=\"tid('group-header-actions')\"\n                ></td>\n              }\n            </tr>\n          }\n\n          <tr [attr.data-testid]=\"tid('header-row')\">\n            @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n              <td\n                [style.width.px]=\"column.width\"\n                [attr.data-testid]=\"resolveHeaderCellTestId(column, columnIndex)\"\n              >\n                <dynamic-table-column [model]=\"column\" />\n              </td>\n            }\n            @if (showActionsColumn()) {\n              <td class=\"nvb-header-last-column\" [attr.data-testid]=\"tid('header-actions')\"></td>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (hasData) {\n            @for (rowView of visibleRows(); track rowView.row) {\n              @let rowIndex = rowView.sourceIndex;\n              <tr [attr.data-testid]=\"resolveBodyRowTestId(rowIndex)\">\n                @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n                  <td\n                    class=\"nvb-dynamic-table-body-cell\"\n                    [class.nvb-dynamic-table-body-cell--hidden]=\"isEditor() && column.hidden\"\n                    [attr.data-tone]=\"resolveCellTone(rowView.row, rowIndex, column)\"\n                    [attr.data-testid]=\"resolveBodyCellTestId(rowIndex, column, columnIndex)\"\n                  >\n                    @let element = getElementModel(rowIndex, column);\n                    @if (element) {\n                      <ng-container\n                        *ngComponentOutlet=\"\n                          getElementComponent(element.type);\n                          inputs: { model: element }\n                        \"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n                @if (showActionsColumn()) {\n                  <td class=\"nvb-delete-column\">\n                    @if (canDeleteRow(rowView.row, rowIndex)) {\n                      <button\n                        type=\"button\"\n                        class=\"nvb-remove-button\"\n                        (click)=\"deleteRow(rowIndex)\"\n                        [title]=\"'dynamicTable.deleteRowTitle' | uiT: 'Delete row'\"\n                        [attr.aria-label]=\"'dynamicTable.deleteRowTitle' | uiT: 'Delete row'\"\n                        [attr.data-testid]=\"tid('delete-row', rowIndex)\"\n                      >\n                        <nvb-icon name=\"delete\" class=\"nvb-remove-button__icon\"></nvb-icon>\n                      </button>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"getEmptyStateColspan()\"\n                class=\"nvb-empty-table\"\n                [attr.data-testid]=\"tid('empty')\"\n              >\n                {{ resolveEmptyMessage() }}\n              </td>\n            </tr>\n          }\n        </tbody>\n\n        @if (hasData && hasTotalsFooter()) {\n          <tfoot>\n            <tr class=\"nvb-totals-row\" [attr.data-testid]=\"tid('footer-row')\">\n              @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n                <td\n                  class=\"nvb-totals-cell\"\n                  [attr.data-testid]=\"resolveFooterCellTestId(column, columnIndex)\"\n                >\n                  {{ getFooterCellText(column) }}\n                </td>\n              }\n              @if (showActionsColumn()) {\n                <td\n                  class=\"nvb-totals-cell nvb-totals-cell--actions\"\n                  [attr.data-testid]=\"tid('footer-actions')\"\n                ></td>\n              }\n            </tr>\n          </tfoot>\n        }\n      </table>\n    </div>\n\n    @if (!isEditor() && isAddRowControlVisible()) {\n      <button\n        type=\"button\"\n        class=\"nvb-control__add-row-button nvb-control__add-row-button--compact\"\n        (click)=\"addRow()\"\n        [disabled]=\"!canAddRow()\"\n        [attr.aria-label]=\"resolveAddRowButtonText()\"\n        [attr.data-testid]=\"tid('add-row')\"\n      >\n        <nvb-icon name=\"add_circle\"></nvb-icon>\n        {{ resolveAddRowButtonText() }}\n      </button>\n    }\n  }\n</element-wrapper>\n",styles:[":host{--nvb-dynamic-table-border: color-mix( in oklab, var(--nvb-color-neutral-300) 78%, var(--nvb-color-surface-mix-target, white) );--nvb-dynamic-table-radius: var( --nvb-table-radius, var(--nvb-card-radius, var(--nvb-radius-md, var(--nvb-radius-sm))) );--nvb-dynamic-table-header-bg: var(--nvb-color-neutral-100);--nvb-dynamic-table-row-height: 34px}.nvb-dynamic-table-surface{--nvb-input-height: var(--nvb-dynamic-table-row-height)}.nvb-dynamic-table-surface{margin-top:2px;border:1px solid var(--nvb-dynamic-table-border);border-radius:var(--nvb-dynamic-table-radius);background:var(--nvb-color-neutral-000, white);overflow:hidden}table{width:100%;border-collapse:collapse}table td{border:0;border-right:1px solid var(--nvb-dynamic-table-border);border-bottom:1px solid var(--nvb-dynamic-table-border);vertical-align:middle;padding:0}table tr>td:last-child{border-right:0}table tbody:last-child tr:last-child>td,table tfoot tr:last-child>td{border-bottom:0}table tbody td{height:var(--nvb-dynamic-table-row-height)}.nvb-dynamic-table-body-cell{transition:background-color .16s ease}.nvb-dynamic-table-body-cell--hidden{opacity:.4}.nvb-dynamic-table-body-cell[data-tone=neutral]{background:color-mix(in oklab,var(--nvb-color-neutral-100) 84%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=success]{background:color-mix(in oklab,var(--nvb-color-success-500) 11%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=warning]{background:color-mix(in oklab,var(--nvb-color-warning-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=risk]{background:color-mix(in oklab,var(--nvb-color-risk-500) 11%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=info],.nvb-dynamic-table-body-cell[data-tone=primary]{background:color-mix(in oklab,var(--nvb-color-primary-500) 10%,var(--nvb-color-surface-mix-target, white))}table thead td{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;padding:0;white-space:nowrap}.nvb-group-header-row .nvb-group-header-cell{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-700);font-size:12px;font-weight:600;text-align:center;padding:6px 5px}.nvb-group-header-row .nvb-group-header-cell--empty{background:var(--nvb-dynamic-table-header-bg)}.nvb-group-header-row .nvb-group-header-cell--actions,.nvb-totals-cell--actions{width:1%;white-space:nowrap}.nvb-totals-row .nvb-totals-cell{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-700);font-size:13px;padding:6px 8px}.nvb-delete-column{width:1%;white-space:nowrap;text-align:center;padding:0}.nvb-remove-button{display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:transparent;border:none;cursor:pointer;color:var(--nvb-color-neutral-600)}.nvb-remove-button:hover{color:var(--nvb-color-risk-600)}.nvb-remove-button__icon{font-size:18px}.nvb-control__add-row-button{justify-content:center;margin-top:8px}.nvb-control__add-row-button.nvb-control__add-row-button--compact{border-radius:var(--nvb-radius-sm)}.nvb-empty-table{font-size:14px;color:var(--nvb-color-neutral-500);text-align:center;padding:5px}.nvb-header-last-column{border-left:none}.nvb-dynamic-table-skeleton{width:100%;display:grid;gap:8px;padding:6px 0}.nvb-dynamic-table-skeleton__row{height:32px;border-radius:var(--nvb-radius-md);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-200) 90%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)));background-size:210% 100%;animation:dynamic-table-loading-shimmer 1.05s ease-in-out infinite}:host ::ng-deep td .nvb-control__column-input,:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td .nvb-select-button,:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td textarea.nvb-control__column-input,:host ::ng-deep td textarea.nvb-control__text-input{border-radius:0}:host ::ng-deep td>*{display:block;height:100%}:host ::ng-deep td>*>element-wrapper,:host ::ng-deep td>*>element-wrapper .nvb-field,:host ::ng-deep td>*>element-wrapper .nvb-field__content{height:100%}:host ::ng-deep td>*>element-wrapper .nvb-field__content{width:100%}:host ::ng-deep td .nvb-select-container,:host ::ng-deep td .nvb-multi-select-container,:host ::ng-deep td .nvb-datepicker,:host ::ng-deep td .nvb-select__control{height:100%}:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td .nvb-select-button,:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td .nvb-select__control,:host ::ng-deep td .nvb-datepicker__control{border:none;min-height:100%;height:100%;box-shadow:none;background-color:transparent;box-sizing:border-box}:host ::ng-deep td .nvb-control__column-input,:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td textarea.nvb-control__column-input{border:none;background-color:transparent;min-height:100%;height:100%;box-shadow:none;box-sizing:border-box;padding-top:0;padding-bottom:0}:host ::ng-deep td textarea.nvb-control__text-input,:host ::ng-deep td textarea.nvb-control__attribute-input{border:none;background-color:transparent;box-shadow:none}:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td .nvb-input-wrapper.nvb-control__column-input,:host ::ng-deep td .nvb-input-wrapper.nvb-control__text-input{min-height:100%;height:100%;padding-top:0;padding-bottom:0}:host ::ng-deep td .nvb-select-value{min-height:0;line-height:1.2}:host ::ng-deep td .nvb-control__column-input:focus,:host ::ng-deep td .nvb-control__text-input:focus,:host ::ng-deep td .nvb-control__attribute-input:focus,:host ::ng-deep td .nvb-control__column-input:focus-visible,:host ::ng-deep td .nvb-control__text-input:focus-visible,:host ::ng-deep td .nvb-control__attribute-input:focus-visible,:host ::ng-deep td textarea.nvb-control__column-input:focus,:host ::ng-deep td textarea.nvb-control__column-input:focus-visible{border:none;outline:none;box-shadow:none}@keyframes dynamic-table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}thead tr:first-child td:first-child ::ng-deep .nvb-header-cell{border-top-left-radius:calc(var(--nvb-dynamic-table-radius) - 1px)}thead tr:first-child td:last-child ::ng-deep .nvb-header-cell{border-top-right-radius:calc(var(--nvb-dynamic-table-radius) - 1px)}\n"],dependencies:[{kind:"component",type:Te,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:De,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule"],exportAs:["ngComponentOutlet"]},{kind:"component",type:je,selector:"dynamic-table-column",inputs:["model"]},{kind:"component",type:W,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.OnPush})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:Ge,decorators:[{type:L,args:[{selector:"lib-dynamic-table-element",changeDetection:z.OnPush,imports:[Te,De,je,k,W],standalone:true,template:"@let hasData = visibleRows().length > 0;\n\n<element-wrapper [model]=\"model()\">\n  @if (hasDataSource() && !dataSourceLoaded()) {\n    <div class=\"nvb-dynamic-table-skeleton\" [attr.data-testid]=\"tid('loading')\">\n      @for (_row of [0, 1, 2, 3]; track _row) {\n        <div\n          class=\"nvb-dynamic-table-skeleton__row\"\n          [attr.data-testid]=\"tid('loading-row', _row)\"\n        ></div>\n      }\n    </div>\n  } @else {\n    <div class=\"nvb-dynamic-table-surface\" [attr.data-testid]=\"tid('surface')\">\n      <table [attr.aria-label]=\"model().label || model().name\" [attr.data-testid]=\"tid('root')\">\n        <caption class=\"nvb-sr-only\">{{ model().label || model().name }}</caption>\n        <thead>\n          @if (hasHeaderGroupingRow()) {\n            <tr class=\"nvb-group-header-row\" [attr.data-testid]=\"tid('group-header-row')\">\n              @for (group of getHeaderGroups(); track $index; let groupIndex = $index) {\n                <td\n                  class=\"nvb-group-header-cell\"\n                  [attr.colspan]=\"group.colspan\"\n                  [class.nvb-group-header-cell--empty]=\"!group.label\"\n                  [attr.data-testid]=\"tid('group-header-cell', groupIndex)\"\n                >\n                  @if (group.label) {\n                    <span>{{ group.label }}</span>\n                  }\n                </td>\n              }\n              @if (showActionsColumn()) {\n                <td\n                  class=\"nvb-group-header-cell nvb-group-header-cell--actions\"\n                  [attr.data-testid]=\"tid('group-header-actions')\"\n                ></td>\n              }\n            </tr>\n          }\n\n          <tr [attr.data-testid]=\"tid('header-row')\">\n            @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n              <td\n                [style.width.px]=\"column.width\"\n                [attr.data-testid]=\"resolveHeaderCellTestId(column, columnIndex)\"\n              >\n                <dynamic-table-column [model]=\"column\" />\n              </td>\n            }\n            @if (showActionsColumn()) {\n              <td class=\"nvb-header-last-column\" [attr.data-testid]=\"tid('header-actions')\"></td>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (hasData) {\n            @for (rowView of visibleRows(); track rowView.row) {\n              @let rowIndex = rowView.sourceIndex;\n              <tr [attr.data-testid]=\"resolveBodyRowTestId(rowIndex)\">\n                @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n                  <td\n                    class=\"nvb-dynamic-table-body-cell\"\n                    [class.nvb-dynamic-table-body-cell--hidden]=\"isEditor() && column.hidden\"\n                    [attr.data-tone]=\"resolveCellTone(rowView.row, rowIndex, column)\"\n                    [attr.data-testid]=\"resolveBodyCellTestId(rowIndex, column, columnIndex)\"\n                  >\n                    @let element = getElementModel(rowIndex, column);\n                    @if (element) {\n                      <ng-container\n                        *ngComponentOutlet=\"\n                          getElementComponent(element.type);\n                          inputs: { model: element }\n                        \"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n                @if (showActionsColumn()) {\n                  <td class=\"nvb-delete-column\">\n                    @if (canDeleteRow(rowView.row, rowIndex)) {\n                      <button\n                        type=\"button\"\n                        class=\"nvb-remove-button\"\n                        (click)=\"deleteRow(rowIndex)\"\n                        [title]=\"'dynamicTable.deleteRowTitle' | uiT: 'Delete row'\"\n                        [attr.aria-label]=\"'dynamicTable.deleteRowTitle' | uiT: 'Delete row'\"\n                        [attr.data-testid]=\"tid('delete-row', rowIndex)\"\n                      >\n                        <nvb-icon name=\"delete\" class=\"nvb-remove-button__icon\"></nvb-icon>\n                      </button>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"getEmptyStateColspan()\"\n                class=\"nvb-empty-table\"\n                [attr.data-testid]=\"tid('empty')\"\n              >\n                {{ resolveEmptyMessage() }}\n              </td>\n            </tr>\n          }\n        </tbody>\n\n        @if (hasData && hasTotalsFooter()) {\n          <tfoot>\n            <tr class=\"nvb-totals-row\" [attr.data-testid]=\"tid('footer-row')\">\n              @for (column of getVisibleColumns(); track column.name ?? $index; let columnIndex = $index) {\n                <td\n                  class=\"nvb-totals-cell\"\n                  [attr.data-testid]=\"resolveFooterCellTestId(column, columnIndex)\"\n                >\n                  {{ getFooterCellText(column) }}\n                </td>\n              }\n              @if (showActionsColumn()) {\n                <td\n                  class=\"nvb-totals-cell nvb-totals-cell--actions\"\n                  [attr.data-testid]=\"tid('footer-actions')\"\n                ></td>\n              }\n            </tr>\n          </tfoot>\n        }\n      </table>\n    </div>\n\n    @if (!isEditor() && isAddRowControlVisible()) {\n      <button\n        type=\"button\"\n        class=\"nvb-control__add-row-button nvb-control__add-row-button--compact\"\n        (click)=\"addRow()\"\n        [disabled]=\"!canAddRow()\"\n        [attr.aria-label]=\"resolveAddRowButtonText()\"\n        [attr.data-testid]=\"tid('add-row')\"\n      >\n        <nvb-icon name=\"add_circle\"></nvb-icon>\n        {{ resolveAddRowButtonText() }}\n      </button>\n    }\n  }\n</element-wrapper>\n",styles:[":host{--nvb-dynamic-table-border: color-mix( in oklab, var(--nvb-color-neutral-300) 78%, var(--nvb-color-surface-mix-target, white) );--nvb-dynamic-table-radius: var( --nvb-table-radius, var(--nvb-card-radius, var(--nvb-radius-md, var(--nvb-radius-sm))) );--nvb-dynamic-table-header-bg: var(--nvb-color-neutral-100);--nvb-dynamic-table-row-height: 34px}.nvb-dynamic-table-surface{--nvb-input-height: var(--nvb-dynamic-table-row-height)}.nvb-dynamic-table-surface{margin-top:2px;border:1px solid var(--nvb-dynamic-table-border);border-radius:var(--nvb-dynamic-table-radius);background:var(--nvb-color-neutral-000, white);overflow:hidden}table{width:100%;border-collapse:collapse}table td{border:0;border-right:1px solid var(--nvb-dynamic-table-border);border-bottom:1px solid var(--nvb-dynamic-table-border);vertical-align:middle;padding:0}table tr>td:last-child{border-right:0}table tbody:last-child tr:last-child>td,table tfoot tr:last-child>td{border-bottom:0}table tbody td{height:var(--nvb-dynamic-table-row-height)}.nvb-dynamic-table-body-cell{transition:background-color .16s ease}.nvb-dynamic-table-body-cell--hidden{opacity:.4}.nvb-dynamic-table-body-cell[data-tone=neutral]{background:color-mix(in oklab,var(--nvb-color-neutral-100) 84%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=success]{background:color-mix(in oklab,var(--nvb-color-success-500) 11%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=warning]{background:color-mix(in oklab,var(--nvb-color-warning-500) 14%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=risk]{background:color-mix(in oklab,var(--nvb-color-risk-500) 11%,var(--nvb-color-surface-mix-target, white))}.nvb-dynamic-table-body-cell[data-tone=info],.nvb-dynamic-table-body-cell[data-tone=primary]{background:color-mix(in oklab,var(--nvb-color-primary-500) 10%,var(--nvb-color-surface-mix-target, white))}table thead td{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;padding:0;white-space:nowrap}.nvb-group-header-row .nvb-group-header-cell{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-700);font-size:12px;font-weight:600;text-align:center;padding:6px 5px}.nvb-group-header-row .nvb-group-header-cell--empty{background:var(--nvb-dynamic-table-header-bg)}.nvb-group-header-row .nvb-group-header-cell--actions,.nvb-totals-cell--actions{width:1%;white-space:nowrap}.nvb-totals-row .nvb-totals-cell{background:var(--nvb-dynamic-table-header-bg);color:var(--nvb-color-neutral-700);font-size:13px;padding:6px 8px}.nvb-delete-column{width:1%;white-space:nowrap;text-align:center;padding:0}.nvb-remove-button{display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:transparent;border:none;cursor:pointer;color:var(--nvb-color-neutral-600)}.nvb-remove-button:hover{color:var(--nvb-color-risk-600)}.nvb-remove-button__icon{font-size:18px}.nvb-control__add-row-button{justify-content:center;margin-top:8px}.nvb-control__add-row-button.nvb-control__add-row-button--compact{border-radius:var(--nvb-radius-sm)}.nvb-empty-table{font-size:14px;color:var(--nvb-color-neutral-500);text-align:center;padding:5px}.nvb-header-last-column{border-left:none}.nvb-dynamic-table-skeleton{width:100%;display:grid;gap:8px;padding:6px 0}.nvb-dynamic-table-skeleton__row{height:32px;border-radius:var(--nvb-radius-md);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-200) 90%,var(--nvb-color-surface-mix-target, white)),color-mix(in oklab,var(--nvb-color-neutral-100) 88%,var(--nvb-color-surface-mix-target, white)));background-size:210% 100%;animation:dynamic-table-loading-shimmer 1.05s ease-in-out infinite}:host ::ng-deep td .nvb-control__column-input,:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td .nvb-select-button,:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td textarea.nvb-control__column-input,:host ::ng-deep td textarea.nvb-control__text-input{border-radius:0}:host ::ng-deep td>*{display:block;height:100%}:host ::ng-deep td>*>element-wrapper,:host ::ng-deep td>*>element-wrapper .nvb-field,:host ::ng-deep td>*>element-wrapper .nvb-field__content{height:100%}:host ::ng-deep td>*>element-wrapper .nvb-field__content{width:100%}:host ::ng-deep td .nvb-select-container,:host ::ng-deep td .nvb-multi-select-container,:host ::ng-deep td .nvb-datepicker,:host ::ng-deep td .nvb-select__control{height:100%}:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td .nvb-select-button,:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td .nvb-select__control,:host ::ng-deep td .nvb-datepicker__control{border:none;min-height:100%;height:100%;box-shadow:none;background-color:transparent;box-sizing:border-box}:host ::ng-deep td .nvb-control__column-input,:host ::ng-deep td .nvb-control__text-input,:host ::ng-deep td .nvb-control__attribute-input,:host ::ng-deep td textarea.nvb-control__column-input{border:none;background-color:transparent;min-height:100%;height:100%;box-shadow:none;box-sizing:border-box;padding-top:0;padding-bottom:0}:host ::ng-deep td textarea.nvb-control__text-input,:host ::ng-deep td textarea.nvb-control__attribute-input{border:none;background-color:transparent;box-shadow:none}:host ::ng-deep td .nvb-input-wrapper,:host ::ng-deep td .nvb-input-wrapper.nvb-control__column-input,:host ::ng-deep td .nvb-input-wrapper.nvb-control__text-input{min-height:100%;height:100%;padding-top:0;padding-bottom:0}:host ::ng-deep td .nvb-select-value{min-height:0;line-height:1.2}:host ::ng-deep td .nvb-control__column-input:focus,:host ::ng-deep td .nvb-control__text-input:focus,:host ::ng-deep td .nvb-control__attribute-input:focus,:host ::ng-deep td .nvb-control__column-input:focus-visible,:host ::ng-deep td .nvb-control__text-input:focus-visible,:host ::ng-deep td .nvb-control__attribute-input:focus-visible,:host ::ng-deep td textarea.nvb-control__column-input:focus,:host ::ng-deep td textarea.nvb-control__column-input:focus-visible{border:none;outline:none;box-shadow:none}@keyframes dynamic-table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}thead tr:first-child td:first-child ::ng-deep .nvb-header-cell{border-top-left-radius:calc(var(--nvb-dynamic-table-radius) - 1px)}thead tr:first-child td:last-child ::ng-deep .nvb-header-cell{border-top-right-radius:calc(var(--nvb-dynamic-table-radius) - 1px)}\n"]}]}],ctorParameters:()=>[],propDecorators:{model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});var x;(function(d){d["TEXT_AD"]="text_ad";d["RICH_TEXT"]="format_shapes";d["HTML"]="html";d["PIN"]="pin";d["INPUT"]="input";d["PHONE"]="call";d["SELECT"]="dns";d["AUTOCOMPLETE"]="manage_search";d["DATEPICKER"]="event";d["SPACE_DASHBOARD"]="space_dashboard";d["DATA_OBJECT"]="data_object";d["SPLITTER"]="splitscreen";d["CHECK_BOX"]="check_box";d["SLIDER"]="tune";d["TOGGLE_BUTTON"]="toggle_on";d["TOGGLE_SWITCH"]="toggle_off";d["DROPDOWN"]="dropdown";d["RADIO_BUTTON_CHECKED"]="radio_button_checked";d["TABLE_VIEW"]="table_view";d["GRID_ON"]="grid_on";d["SMART_BUTTON"]="smart_button";d["FLOAT_PORTRAIT_2"]="float_portrait_2";d["AUTO_AWESOME_MOSAIC"]="auto_awesome_mosaic";d["TABS"]="tabs";d["DIALOG"]="web_asset";d["LIST_GRID"]="view_module";d["MESSAGE_CARD"]="notification_important";d["TOAST"]="notifications_active";d["BADGE"]="sell";d["STATS_CARD"]="monitoring";d["ACCORDION"]="unfold_more";d["PROGRESS_FLOW"]="timeline";d["PROGRESS_BAR"]="azm";d["TABS_PRO"]="tab";d["CHART"]="bar_chart";d["FILE_UPLOAD"]="upload_file";d["IMAGE"]="image";d["VIDEO"]="smart_display";d["IFRAME"]="iframe";d["ROUTER_OUTLET"]="alt_route";d["AVATAR"]="account_circle";d["ICON"]="emoji_symbols";d["DIVIDER"]="horizontal_rule";d["SPACER"]="space_bar";d["BREADCRUMBS"]="format_list_bulleted";d["PAGE_TITLE"]="title";d["NUMBER_STEPPER"]="step";d["TIME_PICKER"]="timeIcon";d["STYLUS_NOTE"]="stylus_note";d["LIST_BOX"]="checklist"})(x||(x={}));const Mt=[{label:"Number input",icon:x.PIN,type:w.NUMBER,order:0,groupCode:h.SINGLE_LINE_INPUT,component:vn},{label:"Slider",icon:x.SLIDER,type:w.SLIDER,order:50,groupCode:h.CHOICE_INPUT,component:wn},{label:"Number stepper",icon:x.NUMBER_STEPPER,type:w.NUMBER_STEPPER,order:825,groupCode:h.CHOICE_INPUT,component:Wt},{label:"Text input",icon:x.INPUT,type:w.TEXT,order:100,groupCode:h.SINGLE_LINE_INPUT,component:Tn},{label:"Long text input",icon:x.TEXT_AD,type:w.TEXTAREA,order:150,groupCode:h.SINGLE_LINE_INPUT,component:Dn},{label:"Phone input",icon:x.PHONE,type:w.PHONE_INPUT,order:200,groupCode:h.SINGLE_LINE_INPUT,component:bn},{label:"Rich text editor",icon:x.RICH_TEXT,type:w.RICH_TEXT,order:250,groupCode:h.CONTENT,component:wt},{label:"HTML",icon:x.HTML,type:w.CUSTOM_HTML,order:260,groupCode:h.CONTENT,component:yt},{label:"HTML viewer",icon:x.HTML,type:w.RICH_TEXT_VIEWER,order:265,groupCode:h.CONTENT,component:wt},{label:"Date picker",icon:x.DATEPICKER,type:w.DATEPICKER,order:300,groupCode:h.CHOICE_INPUT,component:tn},{label:"Date range",icon:x.DATEPICKER,type:w.DATE_RANGE,order:310,groupCode:h.CHOICE_INPUT,component:nn},{label:"Button",icon:x.SMART_BUTTON,type:w.BUTTON,order:360,groupCode:h.ACTIONS,component:Zt},{label:"Select button",icon:x.SMART_BUTTON,type:w.SELECT_BUTTON,order:365,groupCode:h.CHOICE_INPUT,component:yn},{label:"Radio input",icon:x.RADIO_BUTTON_CHECKED,type:w.RADIO,order:450,groupCode:h.CHOICE_INPUT,component:hn},{label:"Checkbox group",icon:x.CHECK_BOX,type:w.CHECKBOX,order:500,groupCode:h.CHOICE_INPUT,component:en},{label:"Single checkbox",icon:x.CHECK_BOX,type:w.SINGLE_CHECKBOX,order:505,groupCode:h.CHOICE_INPUT,component:xn},{label:"Toggle switch",icon:x.TOGGLE_SWITCH,type:w.TOGGLE_SWITCH,order:510,groupCode:h.CHOICE_INPUT,component:xt},{label:"Dynamic table",icon:x.TABLE_VIEW,type:w.DYNAMIC_TABLE,order:520,groupCode:h.TABLES,component:Ge},{label:"Table",icon:x.GRID_ON,type:w.TABLE,order:550,groupCode:h.TABLES,component:qt},{label:"List / Grid",icon:x.LIST_GRID,type:w.LIST_GRID,order:575,groupCode:h.TABLES,component:pn},{label:"Panel",icon:x.SPACE_DASHBOARD,type:w.PANEL,order:600,groupCode:h.CONTAINERS},{label:"Object panel",icon:x.DATA_OBJECT,type:w.OBJECT_PANEL,order:605,groupCode:h.CONTAINERS},{label:"Splitter",icon:x.SPLITTER,type:w.SPLITTER,order:610,groupCode:h.CONTAINERS,component:me},{label:"Empty block",icon:x.AUTO_AWESOME_MOSAIC,type:w.EMPTY_BLOCK,order:625,groupCode:h.CONTAINERS,component:ce},{label:"Dynamic panel",icon:x.SPACE_DASHBOARD,type:w.DYNAMIC_PANEL,order:650,groupCode:h.CONTAINERS,component:Me},{label:"Tabs",icon:x.TABS,type:w.TABS,order:675,groupCode:h.CONTAINERS,component:ne},{label:"Dialog",icon:x.DIALOG,type:w.DIALOG,order:690,groupCode:h.CONTAINERS,component:de},{label:"Dropdown",icon:x.SELECT,type:w.SELECT,order:750,groupCode:h.CHOICE_INPUT,component:fn},{label:"Autocomplete",icon:x.AUTOCOMPLETE,type:w.AUTOCOMPLETE,order:775,groupCode:h.CHOICE_INPUT,component:Yt},{label:"Multi-choice menu",icon:x.CHECK_BOX,type:w.MULTI_SELECT,order:800,groupCode:h.CHOICE_INPUT,component:un},{label:"Message card",icon:x.MESSAGE_CARD,type:w.MESSAGE_CARD,order:820,groupCode:h.CONTENT,component:mn},{label:"Status badge",icon:x.BADGE,type:w.BADGE,order:835,groupCode:h.CONTENT,component:Jt},{label:"Stats card",icon:x.STATS_CARD,type:w.STATS_CARD,order:850,groupCode:h.CONTENT,component:Sn},{label:"Progress bar",icon:x.PROGRESS_BAR,type:w.PROGRESS_BAR,order:855,groupCode:h.CONTENT,component:gn},{label:"Accordion",icon:x.ACCORDION,type:w.ACCORDION,order:860,groupCode:h.CONTAINERS,component:Ce},{label:"Stepper / Timeline",icon:x.PROGRESS_FLOW,type:w.PROGRESS_FLOW,order:870,groupCode:h.CONTAINERS,component:pe},{label:"Chart",icon:x.CHART,type:w.CHART,order:890,groupCode:h.CONTENT,component:Qt},{label:"File upload",icon:x.FILE_UPLOAD,type:w.FILE_UPLOAD,order:900,groupCode:h.CHOICE_INPUT,component:an},{label:"Image",icon:x.IMAGE,type:w.IMAGE,order:910,groupCode:h.CONTENT,component:dn},{label:"Video / YouTube",icon:x.VIDEO,type:w.VIDEO,order:915,groupCode:h.CONTENT,component:cn},{label:"IFrame",icon:x.IFRAME,type:w.IFRAME,order:920,groupCode:h.CONTENT,component:ln},{label:"Router outlet",icon:x.ROUTER_OUTLET,type:w.ROUTER_OUTLET,order:925,groupCode:h.CONTENT,component:sn},{label:"Divider",icon:x.DIVIDER,type:w.DIVIDER,order:940,groupCode:h.CONTENT,component:rn},{label:"Spacer",icon:x.SPACER,type:w.SPACER,order:950,groupCode:h.CONTENT,component:_n},{label:"Page title",icon:x.PAGE_TITLE,type:w.PAGE_TITLE,order:970,groupCode:h.CONTENT,component:Cn},{label:"Time picker",icon:x.TIME_PICKER,type:w.TIME_PICKER,order:30,groupCode:h.CHOICE_INPUT,component:Kt},{label:"Signature pad",icon:x.STYLUS_NOTE,type:w.SIGNATURE_PAD,order:975,groupCode:h.CONTENT,component:Ut},{label:"List box",icon:x.LIST_BOX,type:w.LIST_BOX,order:810,groupCode:h.CHOICE_INPUT,component:Xt}];var re=class st{iconSvgService=p(Ve);groups=new Map;elementsByType=new Map;defaultTypeCodes=new Set;onRegistryChanged=new zt;constructor(){this.resetToDefaults(false)}resetToDefaults(e=true){this.groups.clear();this.elementsByType.clear();this.defaultTypeCodes.clear();Pn.forEach((t,n)=>{const r=this.normalizeGroup(t,n*100);if(!r)return;this.groups.set(r.code,r)});Mt.forEach((t,n)=>{const r=this.normalizeElement(t,n*100);if(!r)return;this.elementsByType.set(r.type,r);this.defaultTypeCodes.add(r.type)});if(e)this.onRegistryChanged.fire(void 0)}registerElementGroup(e){if(!this.registerElementGroupInternal(e))return;this.onRegistryChanged.fire(void 0)}registerElementGroups(e){if(!Array.isArray(e)||e.length===0)return;let t=false;e.forEach(n=>{t=this.registerElementGroupInternal(n)||t});if(t)this.onRegistryChanged.fire(void 0)}registerElement(e){if(!this.registerElementInternal(e))return;this.onRegistryChanged.fire(void 0)}registerElements(e){if(!Array.isArray(e)||e.length===0)return;let t=false;e.forEach(n=>{t=this.registerElementInternal(n)||t});if(t)this.onRegistryChanged.fire(void 0)}getElementsByGroup(e){const t=String(e??"").trim();if(!t)return[];return this.sortElements(Array.from(this.elementsByType.values()).filter(n=>n.groupCode===t))}getElementGroups(){return this.sortGroups(Array.from(this.groups.values())).filter(e=>this.getElementsByGroup(e.code).length>0)}getCustomElements(){return this.sortElements(Array.from(this.elementsByType.values()).filter(e=>this.isCustomElement(e.type)))}getCustomElementGroups(){const e=new Set(this.getCustomElements().map(t=>String(t.groupCode??"").trim()));return this.sortGroups(Array.from(this.groups.values())).filter(t=>e.has(t.code))}getAllElements(){return this.sortElements(Array.from(this.elementsByType.values()))}getElementGroupByCode(e){const t=String(e??"").trim();if(!t)return null;return this.groups.get(t)??null}getElementByType(e){const t=String(e??"").trim();if(!t)return null;return this.elementsByType.get(t)??null}getElementIcon(e,t="help"){return String(this.getElementByType(e)?.icon??"").trim()||t}getElementIconSvg(e,t="help"){const n=this.getElementByType(e);const r=String(n?.iconSvg??"").trim();if(r)return r;const o=String(n?.icon??"").trim()||t;return this.iconSvgService.getSvg(o)}isCustomElement(e){const t=String(e??"").trim();if(!t)return false;return!this.defaultTypeCodes.has(t)}registerElementGroupInternal(e){const t=this.normalizeGroup(e);if(!t)return false;const n=this.groups.get(t.code);if(n&&this.areGroupsEqual(n,t))return false;this.groups.set(t.code,{...n,...t,order:t.order??n?.order??this.resolveAutoGroupOrder()});return true}registerElementInternal(e){const t=this.normalizeElement(e);if(!t)return false;if(!this.groups.has(t.groupCode))this.registerElementGroupInternal({code:t.groupCode,label:this.toHumanReadableLabel(t.groupCode),icon:"extension"});const n=this.elementsByType.get(t.type);if(n&&this.areElementsEqual(n,t))return false;this.elementsByType.set(t.type,{...n,...t,order:t.order??n?.order??this.resolveAutoElementOrder()});return true}normalizeGroup(e,t){const n=String(e?.code??"").trim();const r=String(e?.label??"").trim();if(!n||!r)return null;return{...e,code:n,label:r,icon:String(e?.icon??"extension").trim()||"extension",order:typeof e?.order==="number"&&Number.isFinite(e.order)?e.order:t}}normalizeElement(e,t){const n=String(e?.type??"").trim();const r=String(e?.label??"").trim();const o=String(e?.icon??"").trim();const a=String(e?.iconSvg??"").trim();const i=String(e?.groupCode??"").trim();if(!n||!r||!i||!o&&!a)return null;const s=o||"help";const c=a||this.iconSvgService.getSvg(s);return{...e,type:n,label:r,icon:s,iconSvg:c,groupCode:i,order:typeof e?.order==="number"&&Number.isFinite(e.order)?e.order:t}}sortGroups(e){return[...e].sort((t,n)=>{const r=(t.order??Number.MAX_SAFE_INTEGER)-(n.order??Number.MAX_SAFE_INTEGER);if(r!==0)return r;return String(t.label).localeCompare(String(n.label))})}sortElements(e){return[...e].sort((t,n)=>{const r=(t.order??Number.MAX_SAFE_INTEGER)-(n.order??Number.MAX_SAFE_INTEGER);if(r!==0)return r;return String(t.label).localeCompare(String(n.label))})}resolveAutoGroupOrder(){const e=Array.from(this.groups.values()).map(t=>t.order).filter(t=>typeof t==="number"&&Number.isFinite(t));return(e.length>0?Math.max(...e):0)+100}resolveAutoElementOrder(){const e=Array.from(this.elementsByType.values()).map(t=>t.order).filter(t=>typeof t==="number"&&Number.isFinite(t));return(e.length>0?Math.max(...e):0)+100}toHumanReadableLabel(e){return String(e??"").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/[_\-]+/g," ").trim().replace(/^./,t=>t.toUpperCase())}areGroupsEqual(e,t){return e.code===t.code&&e.label===t.label&&e.icon===t.icon&&(e.order??null)===(t.order??null)}areElementsEqual(e,t){return e.type===t.type&&e.label===t.label&&e.icon===t.icon&&(e.iconSvg??null)===(t.iconSvg??null)&&e.groupCode===t.groupCode&&(e.order??null)===(t.order??null)&&e.component===t.component}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:st,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:st,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:re,decorators:[{type:te,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});var qe=class dt{eventService=p(E);elementsService=p(re);uiTranslationService=p(ye);draggedLabel=b("",...ngDevMode?[{debugName:"draggedLabel"}]:[]);targetKey=b(null,...ngDevMode?[{debugName:"targetKey"}]:[]);owner=null;clearTimer=null;constructor(){this.eventService.onDragStart.add(t=>{this.draggedLabel.set(this.resolveLabel(t?.payload))});const e=()=>{this.cancelClear();this.draggedLabel.set("");this.owner=null;this.targetKey.set(null)};this.eventService.onDragEnd.add(e);this.eventService.onDrop.add(e)}setTarget(e,t){this.cancelClear();this.owner=e;const n=String(t?.type??"").trim()==="page";this.targetKey.set(t&&!n?X(t)||null:null)}clearTarget(e){if(this.owner!==e)return;this.cancelClear();this.clearTimer=setTimeout(()=>{this.clearTimer=null;if(this.owner===e){this.owner=null;this.targetKey.set(null)}},120)}cancelClear(){if(this.clearTimer){clearTimeout(this.clearTimer);this.clearTimer=null}}resolveLabel(e){const t=e??{};const n=String(t["type"]??"").trim();if(t["name"]&&typeof t["label"]==="string"&&t["label"].trim())return t["label"].trim();if(!n)return"";const r=String(this.elementsService.getElementByType(n)?.label??n);return this.uiTranslationService.translate(`element.${n}`,r)}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:dt,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:dt,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:qe,decorators:[{type:te,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});var We=class q{static TARGET_DURATION_MS=2600;static MIN_STEP_MS=70;static MAX_STEP_MS=180;static HIGHLIGHT_MS=1100;pendingSignal=b(new Set,...ngDevMode?[{debugName:"pendingSignal"}]:[]);revealingSignal=b(new Set,...ngDevMode?[{debugName:"revealingSignal"}]:[]);progressSignal=b(null,...ngDevMode?[{debugName:"progressSignal"}]:[]);queue=[];timer=null;stepMs=q.MAX_STEP_MS;progress=this.progressSignal.asReadonly();playing=f(()=>this.progressSignal()!==null,...ngDevMode?[{debugName:"playing"}]:[]);stateOf(e){const t=String(e??"");if(!t)return null;if(this.pendingSignal().has(t))return"pending";return this.revealingSignal().has(t)?"revealing":null}play(e){const t=e.filter(r=>!!r&&!this.pendingSignal().has(r));if(t.length===0||this.prefersReducedMotion())return;this.queue.push(...t);this.pendingSignal.set(new Set([...this.pendingSignal(),...t]));const n=this.progressSignal();this.progressSignal.set({done:n?.done??0,total:(n?.total??0)+t.length});this.stepMs=Math.min(q.MAX_STEP_MS,Math.max(q.MIN_STEP_MS,q.TARGET_DURATION_MS/this.queue.length));if(!this.timer)this.scheduleNext(0)}finish(){if(this.timer){clearTimeout(this.timer);this.timer=null}this.queue=[];this.pendingSignal.set(new Set);this.progressSignal.set(null)}scheduleNext(e){this.timer=setTimeout(()=>{this.timer=null;this.revealNext()},e)}revealNext(){const e=this.queue.shift();if(e===void 0){this.timer=setTimeout(()=>{this.timer=null;if(this.queue.length===0)this.progressSignal.set(null)},q.HIGHLIGHT_MS/2);return}const t=new Set(this.pendingSignal());t.delete(e);this.pendingSignal.set(t);this.revealingSignal.set(new Set([...this.revealingSignal(),e]));const n=this.progressSignal();if(n)this.progressSignal.set({...n,done:n.done+1});setTimeout(()=>{const r=new Set(this.revealingSignal());r.delete(e);this.revealingSignal.set(r)},q.HIGHLIGHT_MS);this.scheduleNext(this.stepMs)}prefersReducedMotion(){try{return typeof window!=="undefined"&&!!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches}catch{return false}}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:q,deps:[],target:l.ɵɵFactoryTarget.Injectable});static ɵprov=l.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:q,providedIn:"root"})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:We,decorators:[{type:te,args:[{providedIn:"root"}]}]});var ge=class S{hostElementRef;elementFocusService;eventService;dragAndDropService;dragAutoScrollService;structureService;elementsService;iconSvgService;elementHoverService=p(ze);uiTranslationService=p(ye);dropIndicator=p(qe);aiBuildReveal=p(We);aiRevealState(){return this.aiBuildReveal.stateOf(this.model()?.name)}get aiPending(){return this.aiRevealState()==="pending"}get aiRevealing(){return this.aiRevealState()==="revealing"}followAiReveal=Rn(()=>{if(this.aiRevealState()!=="revealing")return;const e=this.hostElementRef?.nativeElement;if(!e?.isConnected||typeof e.scrollIntoView!=="function")return;e.scrollIntoView({block:"nearest",behavior:"smooth"})},...ngDevMode?[{debugName:"followAiReveal"}]:[]);inBuilderCanvas=null;dragDebugEnabled=ie();dragEffectTimeoutId=null;static activeContextMenuOwner=null;static activeDragOverlayOwner=null;static pendingDragOverlayOwner=null;static lastDragOverlayReleaseAt=0;dragOverlayActivationDelayMs=120;dragOverlayActivationTimeoutId=null;pendingDragOverlayPosition=null;contextMenuWidth=188;contextMenuHeight=310;notOverlayElements=["dynamicTable","table","panel","objectPanel","dynamicPanel","emptyBlock","splitter","tabs","tabsPro","accordion","progressFlow","dialog"];removeBoxStylesOn=["panel","objectPanel","dynamicPanel","emptyBlock","splitter","tabs","tabsPro","accordion","progressFlow","dialog"];edgeOnlySideDropOverlayOn=["dynamicTable","table","panel","objectPanel","dynamicPanel","emptyBlock","splitter","tabs","tabsPro","accordion","progressFlow","dialog"];sideDropEdgeMaxWidthPx=56;sideDropEdgeMinWidthPx=28;sideDropEdgeWidthRatio=.035;model=g(null,...ngDevMode?[{debugName:"model"}]:[]);index=g(null,...ngDevMode?[{debugName:"index"}]:[]);columns=g(null,...ngDevMode?[{debugName:"columns"}]:[]);setOverlay=b(false,...ngDevMode?[{debugName:"setOverlay"}]:[]);removeBoxStyles=b(false,...ngDevMode?[{debugName:"removeBoxStyles"}]:[]);focusedElementName=b(null,...ngDevMode?[{debugName:"focusedElementName"}]:[]);hoveredElementKey=this.elementHoverService.hoveredElementKey;parentElement=g(null,...ngDevMode?[{debugName:"parentElement"}]:[]);builderLayerDepth=g(1,...ngDevMode?[{debugName:"builderLayerDepth"}]:[]);dropOverlay=false;hoveredLeftElementName=b(null,...ngDevMode?[{debugName:"hoveredLeftElementName"}]:[]);hoveredRightElementName=b(null,...ngDevMode?[{debugName:"hoveredRightElementName"}]:[]);effectElement=false;contextMenuVisible=b(false,...ngDevMode?[{debugName:"contextMenuVisible"}]:[]);contextMenuPosition=b({x:0,y:0},...ngDevMode?[{debugName:"contextMenuPosition"}]:[]);contextMenuModel=b(null,...ngDevMode?[{debugName:"contextMenuModel"}]:[]);groupedAncestorLocked=b(false,...ngDevMode?[{debugName:"groupedAncestorLocked"}]:[]);constructor(e,t,n,r,o,a,i,s){this.hostElementRef=e;this.elementFocusService=t;this.eventService=n;this.dragAndDropService=r;this.dragAutoScrollService=o;this.structureService=a;this.elementsService=i;this.iconSvgService=s}get hostFlex(){if(this.isFitContentBox())return"0 0 auto";const e=this.getNormalizedWidth();if(this.isVerticalParentLayout())return"0 0 auto";if(!e)return"1 1 0";return this.isRelativeWidth(e)?`0 0 ${e}`:`0 1 ${e}`}get hostWidth(){if(this.isFitContentBox())return"fit-content";const e=this.getNormalizedWidth();if(e)return $e(e);return this.isVerticalParentLayout()?"100%":null}get hostMaxWidth(){if(this.isFitContentBox())return"100%";return this.getNormalizedWidth()??(this.isVerticalParentLayout()?"100%":null)}get hostMinWidth(){return"0"}get hostBuilderColumnOverlayZIndex(){return this.getBuilderLayerValue(18)}get hostBuilderRowGutterZIndex(){return this.getBuilderLayerValue(60)}get hostBuilderInnerDropOverlayZIndex(){return this.getBuilderLayerValue(50)}get hostBuilderInteractionSurfaceZIndex(){return this.getBuilderLayerValue(2e3)}get hostBuilderContextMenuZIndex(){return this.getBuilderLayerValue(250)}onWindowResize(){}onDragStartHandler=e=>{this.releaseDragOverlayOwner();const t=String(e?.payload?.name??"").trim();const n=String(this.model()?.name??"").trim();this.dropOverlay=!t||!n||t!==n;if(!this.dropOverlay){this.hoveredLeftElementName.set(null);this.hoveredRightElementName.set(null);D("column","dragstart-source-overlay-suppressed",{elementName:n})}};onDragEndHandler=()=>{this.dropOverlay=false;this.releaseDragOverlayOwner();this.clearPendingDragOverlayActivation();this.clearDragEffectVisual()};onElementFocusHandler=e=>{this.focusedElementName.set(this.resolveFocusKey(e.payload))};onElementContextMenuRequestedHandler=e=>{const t=e?.payload;if(!t||typeof t!=="object")return;const n=String(t.ownerName??"").trim();const r=String(this.model()?.name??"").trim();if(!n||!r||n!==r)return;const o=t.model;if(!o)return;if(this.isGroupedLockedForModel(o))return;this.onFocus(o);this.contextMenuModel.set(o);this.openContextMenu(Number(t.clientX??0),Number(t.clientY??0))};onDropHandler=()=>{this.dropOverlay=false;this.releaseDragOverlayOwner();this.clearPendingDragOverlayActivation();this.clearDragEffectVisual();this.updateGroupedAncestorLockState()};onAfterPropertyChangedHandler=()=>{this.updateGroupedAncestorLockState()};ngOnInit(){this.dropOverlay=this.dragAutoScrollService.isDragging();this.eventService.onDragStart.add(this.onDragStartHandler);this.eventService.onDragEnd.add(this.onDragEndHandler);this.eventService.onElementFocus.add(this.onElementFocusHandler);this.eventService.onElementContextMenuRequested.add(this.onElementContextMenuRequestedHandler);this.eventService.onDrop.add(this.onDropHandler);this.eventService.afterPropertyChanged.add(this.onAfterPropertyChangedHandler);if(!this.notOverlayElements.includes(this.model().type)&&!this.allowsBuilderInteractions())this.setOverlay.set(true);if(this.removeBoxStylesOn.includes(this.model().type))this.removeBoxStyles.set(true);this.updateGroupedAncestorLockState()}ngOnDestroy(){this.eventService.onDragStart.remove(this.onDragStartHandler);this.eventService.onDragEnd.remove(this.onDragEndHandler);this.eventService.onElementFocus.remove(this.onElementFocusHandler);this.eventService.onElementContextMenuRequested.remove(this.onElementContextMenuRequestedHandler);this.eventService.onDrop.remove(this.onDropHandler);this.eventService.afterPropertyChanged.remove(this.onAfterPropertyChangedHandler);this.releaseDragOverlayOwner();this.clearPendingDragOverlayActivation();this.clearDragEffectVisual();this.closeContextMenu();this.elementHoverService.clearHover(this.model())}onElementDragStart(e){if(this.allowsBuilderInteractions()){e.preventDefault();return}if(this.isGroupedLockActive()){e.preventDefault();e.stopPropagation();D("column","dragstart-blocked",{elementName:String(this.model()?.name??"").trim(),...C(e)});return}e.stopPropagation();this.closeContextMenu();this.scheduleDragEffectVisual();const t=this.elementsService.getElementIcon(this.model().type,"help");const n=this.elementsService.getElementIconSvg(this.model().type,"help");const r=this.elementsService.getElementByType(this.model().type);const o=String(r?.label??"").trim()||String(this.model()?.label??"").trim()||String(this.model()?.name??"").trim()||"Element";const[a,i]=this.createPreviewItem(o,t,n);const s=e.dataTransfer;if(!s){this.effectElement=false;a.remove();D("column","dragstart-missing-datatransfer",{elementName:String(this.model()?.name??"").trim(),...C(e)});return}const c=JSON.stringify({name:this.model().name});s.effectAllowed="move";s.setDragImage(a,i,0);s.setData("application/json",c);s.setData("text/plain",c);s.setData("text",c);setTimeout(()=>a.remove(),0);D("column","dragstart",{elementName:String(this.model()?.name??"").trim(),elementType:String(this.model()?.type??"").trim(),payload:c,...C(e)});this.eventService.onDragStart.fire({payload:this.model()})}onElementDragEnd(e){if(this.allowsBuilderInteractions()){this.clearDragEffectVisual();return}if(this.isGroupedLockActive()){this.clearDragEffectVisual();D("column","dragend-grouped-lock",{elementName:String(this.model()?.name??"").trim(),...C(e)});return}e.stopPropagation();this.clearDragEffectVisual();D("column","dragend",{elementName:String(this.model()?.name??"").trim(),...C(e)});this.eventService.onDragEnd.fire({payload:this.model()})}onFocus(e){if(this.isGroupedLockedForModel(e))return;this.closeContextMenu();this.elementFocusService.setFocus(e);this.focusedElementName.set(this.resolveFocusKey(e))}resolveFocusKey(e){return X(e)}onContextMenu(e){if(this.isGroupedLockActive()){e.preventDefault();e.stopPropagation();return}e.preventDefault();e.stopPropagation();const t=this.model();if(!t)return;if(S.activeContextMenuOwner&&S.activeContextMenuOwner!==this)S.activeContextMenuOwner.closeContextMenu();this.contextMenuModel.set(t);this.onFocus(t);this.openContextMenu(e.clientX,e.clientY)}onContextMenuAction(e){const t=this.contextMenuModel()??this.model();if(this.isGroupedLockedForModel(t)){this.closeContextMenu();return}if(!t){this.closeContextMenu();return}if(e==="delete"){this.onFocus(t);this.structureService.removeFromElement(t.name);this.structureService.removeFromPage(t.name);this.eventService.onElementFocus.fire({payload:null});this.eventService.onDrop.fire({payload:null});this.closeContextMenu();return}if(e==="duplicate"){this.closeContextMenu();this.duplicateModel(t);return}if(e==="copy"){this.onFocus(t);this.eventService.onSidebarSaveFocusedCopyRequested.fire({payload:null});this.closeContextMenu();return}if(e==="readOnly"){t.readOnly=!this.isContextMenuStateActive("readOnly");if(String(t?.["status"]??"").trim())delete t["status"]}else t[e]=!Boolean(t[e]);this.eventService.afterPropertyChanged.fire({payload:{key:e,value:t[e],elementName:t.name}});this.closeContextMenu()}isBuilderCanvas(){if(this.inBuilderCanvas!==null)return this.inBuilderCanvas;const e=this.hostElementRef.nativeElement;if(!e.isConnected)return false;this.inBuilderCanvas=Boolean(e.closest('[data-testid="builder-canvas"]'));return this.inBuilderCanvas}elementTypeLabel(){const e=String(this.model()?.type??"").trim();const t=this.elementsService.getElementByType(e);return this.uiTranslationService.translate(`element.${e}`,String(t?.label??"").trim()||e)}selectableParent(){const e=this.parentElement();if(!e||String(e.type??"").trim()==="page")return null;return e}onChromeMouseDown(e){e.stopPropagation()}onChromeSelectParent(e){e.stopPropagation();const t=this.selectableParent();if(t)this.elementFocusService.setFocus(t)}onChromeDuplicate(e){e.stopPropagation();this.duplicateModel(this.model())}onChromeDelete(e){e.stopPropagation();const t=this.model();if(!t)return;this.elementHoverService.clearHover(t);this.structureService.removeFromElement(t.name);this.structureService.removeFromPage(t.name);this.eventService.onElementFocus.fire({payload:null});this.eventService.onDrop.fire({payload:null})}duplicateModel(e){if(!e||this.isGroupedLockedForModel(e))return;const t=this.dragAndDropService.duplicateElement(e.name);if(t)setTimeout(()=>this.elementFocusService.setFocus(t))}isContextMenuStateActive(e){const t=this.contextMenuModel()??this.model();if(e==="readOnly")return Boolean(t?.readOnly)||String(t?.["status"]??"").trim().toLowerCase()==="readonly";return Boolean(t?.[e])}onDocumentMouseDown(){this.closeContextMenu()}onEscape(){this.closeContextMenu()}onDragOverLeft(e){if(this.isGroupedLockActive())return;e.preventDefault();J("column","dragover-left",{elementName:String(this.model()?.name??"").trim(),...C(e)});this.activateDragOverlay("left")}onDragLeavLeft(e){if(this.isGroupedLockActive())return;e.preventDefault();this.releaseDragOverlayOwner()}onDropLeft(e){if(this.isGroupedLockActive()){e.preventDefault();return}e.preventDefault();D("column","drop-left",{elementName:String(this.model()?.name??"").trim(),...C(e)});this.dragAndDropService.onColumnDrop(e,this.parentElement(),this.index(),this.columns(),"left");this.releaseDragOverlayOwner()}onDragOverRight(e){if(this.isGroupedLockActive())return;e.preventDefault();J("column","dragover-right",{elementName:String(this.model()?.name??"").trim(),...C(e)});this.activateDragOverlay("right")}onDragLeavRight(e){if(this.isGroupedLockActive())return;e.preventDefault();this.hoveredRightElementName.set(null)}onDropRight(e){if(this.isGroupedLockActive()){e.preventDefault();return}e.preventDefault();D("column","drop-right",{elementName:String(this.model()?.name??"").trim(),...C(e)});this.dragAndDropService.onColumnDrop(e,this.parentElement(),this.index(),this.columns(),"right");this.releaseDragOverlayOwner()}onOverlayDragOver(e){if(this.isGroupedLockActive())return;e.preventDefault();e.stopPropagation();const t=this.resolveOverlayDropPosition(e);J("column.overlay","dragover",{elementName:String(this.model()?.name??"").trim(),position:t,...C(e)});this.scheduleDragOverlayActivation(t)}onOverlayDragLeave(e){if(this.isGroupedLockActive())return;e.stopPropagation();if(this.isSideDropEdgeOnly()){this.clearPendingDragOverlayActivation();this.releaseDragOverlayOwner();return}const t=e.currentTarget;const n=e.relatedTarget;if(t&&n&&t.contains(n))return;this.clearPendingDragOverlayActivation();this.releaseDragOverlayOwner()}onOverlayDrop(e){if(this.isGroupedLockActive()){e.preventDefault();return}e.preventDefault();e.stopPropagation();const t=this.resolveOverlayDropPosition(e);D("column.overlay","drop",{elementName:String(this.model()?.name??"").trim(),position:t,...C(e)});this.clearPendingDragOverlayActivation();this.dragAndDropService.onColumnDrop(e,this.parentElement(),this.index(),this.columns(),t);this.releaseDragOverlayOwner()}onBoxDragOver(e){if(!this.shouldHandleOwnBoxDragEvent(e)||this.isGroupedLockActive())return;if(!this.shouldHandleSideDropFromBox(e)){this.clearSideDropOverlayWhenOutsideEdge();return}e.preventDefault();const t=this.resolveOverlayDropPosition(e);J("column.box","dragover",{elementName:String(this.model()?.name??"").trim(),position:t,...C(e)});this.scheduleDragOverlayActivation(t)}onBoxDragLeave(e){if(!this.shouldHandleOwnBoxDragEvent(e)||this.isGroupedLockActive())return;const t=e.currentTarget;const n=e.relatedTarget;if(n===this.hostElementRef.nativeElement)return;if(t&&n&&t.contains(n)&&this.isOwnColumnEventTarget(n))return;this.clearPendingDragOverlayActivation();this.releaseDragOverlayOwner()}onBoxDrop(e){if(!this.shouldHandleOwnBoxDragEvent(e)||this.isGroupedLockActive())return;if(!this.shouldHandleSideDropFromBox(e)){this.clearSideDropOverlayWhenOutsideEdge();return}e.preventDefault();e.stopPropagation();const t=this.resolveOverlayDropPosition(e);D("column.box","drop",{elementName:String(this.model()?.name??"").trim(),position:t,...C(e)});this.clearPendingDragOverlayActivation();this.dragAndDropService.onColumnDrop(e,this.parentElement(),this.index(),this.columns(),t);this.releaseDragOverlayOwner()}onHostDragOver(e){const t=this.resolveGapDropPosition(e);if(!t)return;e.preventDefault();e.stopPropagation();this.scheduleDragOverlayActivation(t)}onHostDragLeave(e){if(e.target!==this.hostElementRef.nativeElement)return;const t=e.relatedTarget;if(t&&this.hostElementRef.nativeElement.contains(t))return;this.clearPendingDragOverlayActivation();this.releaseDragOverlayOwner()}onHostDrop(e){const t=this.resolveGapDropPosition(e);if(!t)return;e.preventDefault();e.stopPropagation();this.clearPendingDragOverlayActivation();this.dragAndDropService.onColumnDrop(e,this.parentElement(),this.index(),this.columns(),t);this.releaseDragOverlayOwner()}resolveGapDropPosition(e){const t=this.hostElementRef.nativeElement;if(e.target!==t||!this.dropOverlay||this.isGroupedLockActive())return null;const n=t.querySelector(":scope > .nvb-box")?.getBoundingClientRect();if(!n||e.clientY<n.top||e.clientY>n.bottom)return null;if(e.clientX<=n.left)return"left";return e.clientX>=n.right?"right":null}onBoxMouseDown(e){if(this.setOverlay()&&!this.isGroupedLockActive())this.onFocus(this.model());if(!this.dragDebugEnabled)return;D("column","mousedown",{elementName:String(this.model()?.name??"").trim(),...Le(e)})}onBoxMouseOver(e){if(!this.isOwnColumnEventTarget(e.target))return;this.elementHoverService.setHover(this.model())}onBoxMouseLeave(e){if(!this.isOwnColumnEventTarget(e.currentTarget))return;this.elementHoverService.clearHover(this.model())}onOverlayMouseDown(e){e.stopPropagation();if(this.setOverlay()&&!this.isGroupedLockActive())this.onFocus(this.model());if(!this.dragDebugEnabled)return;D("column.overlay","mousedown",{elementName:String(this.model()?.name??"").trim(),...Le(e)})}onBoxFocusIn(e){if(!this.setOverlay()||this.isGroupedLockActive())return;const t=e.currentTarget;const n=e.target;if(!t||!n||n===t)return;if(n.closest(".nvb-box-context-menu"))return;n.blur?.();t.focus({preventScroll:true});e.stopPropagation()}scheduleDragEffectVisual(){this.clearDragEffectVisual();if(typeof window==="undefined"){this.effectElement=true;return}this.dragEffectTimeoutId=window.setTimeout(()=>{this.effectElement=true;this.dragEffectTimeoutId=null},0)}clearDragEffectVisual(){if(typeof window!=="undefined"&&this.dragEffectTimeoutId!==null){window.clearTimeout(this.dragEffectTimeoutId);this.dragEffectTimeoutId=null}this.effectElement=false}activateDragOverlay(e){const t=S.activeDragOverlayOwner;if(t&&t!==this)t.clearDragOverlayState();S.activeDragOverlayOwner=this;this.dropIndicator.setTarget(this,this.parentElement());if(e==="right"){this.hoveredRightElementName.set(this.model().uuid);this.hoveredLeftElementName.set(null);return}this.hoveredLeftElementName.set(this.model().uuid);this.hoveredRightElementName.set(null)}releaseDragOverlayOwner(){if(S.activeDragOverlayOwner!==this)return;this.clearDragOverlayState();S.activeDragOverlayOwner=null;S.lastDragOverlayReleaseAt=Date.now()}scheduleDragOverlayActivation(e){const t=Date.now()-S.lastDragOverlayReleaseAt<250;if(S.activeDragOverlayOwner===this||S.activeDragOverlayOwner&&S.activeDragOverlayOwner!==this||t){this.clearPendingDragOverlayActivation();this.activateDragOverlay(e);return}if(this.dragOverlayActivationTimeoutId!==null&&this.pendingDragOverlayPosition===e)return;this.clearPendingDragOverlayActivation();if(S.pendingDragOverlayOwner&&S.pendingDragOverlayOwner!==this)S.pendingDragOverlayOwner.clearPendingDragOverlayActivation();S.pendingDragOverlayOwner=this;this.pendingDragOverlayPosition=e;if(typeof window==="undefined"){S.pendingDragOverlayOwner=null;this.pendingDragOverlayPosition=null;this.activateDragOverlay(e);return}this.dragOverlayActivationTimeoutId=window.setTimeout(()=>{this.dragOverlayActivationTimeoutId=null;this.pendingDragOverlayPosition=null;if(S.pendingDragOverlayOwner===this)S.pendingDragOverlayOwner=null;this.activateDragOverlay(e)},this.dragOverlayActivationDelayMs)}clearPendingDragOverlayActivation(){if(S.pendingDragOverlayOwner===this)S.pendingDragOverlayOwner=null;this.pendingDragOverlayPosition=null;if(typeof window==="undefined"||this.dragOverlayActivationTimeoutId===null){this.dragOverlayActivationTimeoutId=null;return}window.clearTimeout(this.dragOverlayActivationTimeoutId);this.dragOverlayActivationTimeoutId=null}clearDragOverlayState(){this.hoveredLeftElementName.set(null);this.hoveredRightElementName.set(null);this.dropIndicator.clearTarget(this)}isDropTarget(){const e=this.dropIndicator.targetKey();return Boolean(e)&&e===this.resolveFocusKey(this.model())}static clearActiveDragOverlay(){if(S.pendingDragOverlayOwner)S.pendingDragOverlayOwner.clearPendingDragOverlayActivation();const e=S.activeDragOverlayOwner;if(!e)return;e.clearPendingDragOverlayActivation();e.clearDragOverlayState();S.activeDragOverlayOwner=null}createPreviewItem(e,t,n){const r=this.resolveThemeColor("--nvb-color-neutral-050","#f8fafc");const o=this.resolveThemeColor("--nvb-color-neutral-300","#cbd5e1");const a=this.resolveThemeColor("--nvb-color-neutral-700","#334155");const i=document.createElement("span");i.style.cssText=`
+
+    border-radius: 8px;
+
+    border: 1px solid ${o};
+
+    font-size: 13px;
+
+    line-height: 1.25;
+
+    color: ${a};
+
+    padding: 5px 8px;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: left;
+
+    flex-direction: row;
+
+    gap: 6px;
+
+    cursor: grab;
+
+    background-color: ${r};
+
+    opacity: 1;
+
+    width: max-content;
+
+    max-width: 360px;
+
+    white-space: nowrap;
+
+    position: fixed;
+
+    left: -9999px; 
+
+    top: -9999px;
+
+  `;const s=document.createElement("span");s.className="nvb-icon-svg";s.style.display="inline-flex";s.style.width="18px";s.style.height="18px";s.style.color="inherit";s.style.flex="0 0 auto";const c=String(n??"").trim()||this.iconSvgService.getSvg(t);if(c){const v=document.createElement("span");v.className="nvb-icon-svg__content";v.insertAdjacentHTML("afterbegin",c);s.appendChild(v)}else s.textContent=t;const m=document.createElement("span");m.style.overflow="hidden";m.style.textOverflow="ellipsis";m.textContent=String(e??"").trim()||"Element";i.append(s,m);document.body.appendChild(i);return[i,i.getBoundingClientRect().width/2]}resolveDeleteActionLabel(){return"Delete"}resolveThemeColor(e,t){if(typeof window==="undefined"||typeof document==="undefined")return t;const n=document.querySelector(".nvb-root")??document.documentElement;return window.getComputedStyle(n).getPropertyValue(e).trim()||t}allowsBuilderInteractions(){return Boolean(this.model()?.allowBuilderInteractions)}showColumnDropOverlay(){return this.dropOverlay}isSideDropEdgeOnly(){const e=String(this.model()?.type??"").trim();return this.edgeOnlySideDropOverlayOn.includes(e)}shouldHandleSideDropFromBox(e){if(!this.dropOverlay)return false;if(!this.isSideDropEdgeOnly())return true;return this.isPointerInsideSideDropEdge(e)}isPointerInsideSideDropEdge(e){const t=e.currentTarget;if(!t)return false;const n=t.getBoundingClientRect();if(!n.width)return false;const r=e.clientX-n.left;const o=Math.min(this.sideDropEdgeMaxWidthPx,Math.max(this.sideDropEdgeMinWidthPx,n.width*this.sideDropEdgeWidthRatio));return r<=o||r>=n.width-o}clearSideDropOverlayWhenOutsideEdge(){if(!this.isSideDropEdgeOnly())return;this.clearPendingDragOverlayActivation();this.releaseDragOverlayOwner()}resolveOverlayDropPosition(e){const t=e.currentTarget;if(!t)return"left";const n=t.getBoundingClientRect();return e.clientX-n.left>=n.width/2?"right":"left"}shouldHandleOwnBoxDragEvent(e){return this.isOwnColumnEventTarget(e.target)}isOwnColumnEventTarget(e){if(!(e instanceof Element))return false;return e.closest("column")===this.hostElementRef.nativeElement}isFitContentBox(){return Boolean(this.model()?.fitContent)}getNormalizedWidth(){return Be(this.model()?.width,this.model()?.["tabletWidth"],this.model()?.["mobileWidth"],{isMobile:this.isMobileViewport(),isTablet:this.isTabletViewport()})}isVerticalParentLayout(){return String(this.parentElement()?.["contentDisplay"]??"").trim().toLowerCase()!=="grid"&&String(this.parentElement()?.["flexDirection"]??"").trim().toLowerCase()==="column"}isRelativeWidth(e){return Re(e)}isMobileViewport(){if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return _e()}isTabletViewport(){if(this.isMobileViewport())return false;if(typeof window==="undefined"||typeof window.matchMedia!=="function")return false;return ht()}getBuilderLayerBase(){const e=Number(this.builderLayerDepth());return(Number.isFinite(e)&&e>0?Math.floor(e):1)*100}getBuilderLayerValue(e){return String(this.getBuilderLayerBase()+e)}openContextMenu(e,t){this.contextMenuPosition.set(this.resolveContextMenuPosition(e,t));this.contextMenuVisible.set(true);S.activeContextMenuOwner=this}closeContextMenu(){this.contextMenuVisible.set(false);this.contextMenuModel.set(null);if(S.activeContextMenuOwner===this)S.activeContextMenuOwner=null}resolveContextMenuPosition(e,t){if(typeof window==="undefined")return{x:e,y:t};const n=8;const r=Math.max(n,window.innerWidth-this.contextMenuWidth-n);const o=Math.max(n,window.innerHeight-this.contextMenuHeight-n);return{x:Math.min(Math.max(e,n),r),y:Math.min(Math.max(t,n),o)}}isGroupedLockActive(){return false}updateGroupedAncestorLockState(){this.groupedAncestorLocked.set(false)}isGroupedLockedForModel(e){return false}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:S,deps:[{token:l.ElementRef},{token:K},{token:E},{token:M},{token:V},{token:xe},{token:re},{token:Ve}],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:S,isStandalone:true,selector:"column",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:false,transformFunction:null},index:{classPropertyName:"index",publicName:"index",isSignal:true,isRequired:false,transformFunction:null},columns:{classPropertyName:"columns",publicName:"columns",isSignal:true,isRequired:false,transformFunction:null},parentElement:{classPropertyName:"parentElement",publicName:"parentElement",isSignal:true,isRequired:false,transformFunction:null},builderLayerDepth:{classPropertyName:"builderLayerDepth",publicName:"builderLayerDepth",isSignal:true,isRequired:false,transformFunction:null}},host:{listeners:{"window:resize":"onWindowResize()","document:mousedown":"onDocumentMouseDown()","document:keydown.escape":"onEscape()","dragenter":"onHostDragOver($event)","dragover":"onHostDragOver($event)","dragleave":"onHostDragLeave($event)","drop":"onHostDrop($event)"},properties:{"class.nvb-ai-pending":"this.aiPending","class.nvb-ai-revealing":"this.aiRevealing","style.flex":"this.hostFlex","style.width":"this.hostWidth","style.max-width":"this.hostMaxWidth","style.min-width":"this.hostMinWidth","style.--nvb-builder-z-column-overlay":"this.hostBuilderColumnOverlayZIndex","style.--nvb-builder-z-row-gutter":"this.hostBuilderRowGutterZIndex","style.--nvb-builder-z-inner-drop-overlay":"this.hostBuilderInnerDropOverlayZIndex","style.--nvb-builder-z-interaction-surface":"this.hostBuilderInteractionSurfaceZIndex","style.--nvb-builder-z-context-menu":"this.hostBuilderContextMenuZIndex"}},ngImport:l,template:"@let elementFocused = focusedElementName() === resolveFocusKey(model());\n@let elementHovered = hoveredElementKey() === resolveFocusKey(model());\n@if (showColumnDropOverlay()) {\n  <div\n    class=\"nvb-column-drop-overlay\"\n    [attr.data-testid]=\"'builder-column-overlay-' + (model()?.name || index())\"\n    [class.nvb-column-drop-overlay--debug]=\"dragDebugEnabled\"\n    [class.nvb-column-drop-overlay--edge-only]=\"isSideDropEdgeOnly()\"\n    [class.nvb-column-drop-overlay--left]=\"hoveredLeftElementName() === model().uuid\"\n    [class.nvb-column-drop-overlay--right]=\"hoveredRightElementName() === model().uuid\"\n    (dragover)=\"onOverlayDragOver($event)\"\n    (dragleave)=\"onOverlayDragLeave($event)\"\n    (drop)=\"onOverlayDrop($event)\"\n  >\n    <div class=\"nvb-column-drop-overlay__surface nvb-column-drop-overlay__surface--left\"></div>\n    <div class=\"nvb-column-drop-overlay__surface nvb-column-drop-overlay__surface--right\"></div>\n  </div>\n}\n\n<div\n  (focus)=\"onFocus(model())\"\n  (focusin)=\"onBoxFocusIn($event)\"\n  (mousedown)=\"onBoxMouseDown($event)\"\n  (mouseover)=\"onBoxMouseOver($event)\"\n  (mouseleave)=\"onBoxMouseLeave($event)\"\n  (dragover)=\"onBoxDragOver($event)\"\n  (dragleave)=\"onBoxDragLeave($event)\"\n  (drop)=\"onBoxDrop($event)\"\n  (contextmenu)=\"onContextMenu($event)\"\n  class=\"nvb-box\"\n  [attr.data-testid]=\"'builder-column-' + (model()?.name || index())\"\n  [class.nvb-box--is-element]=\"!removeBoxStyles()\"\n  [class.nvb-box--builder-interactive]=\"allowsBuilderInteractions()\"\n  [class.nvb-box--drag-debug]=\"dragDebugEnabled\"\n  [class.nvb-box--fit-content]=\"isFitContentBox()\"\n  [class.nvb-box--interaction-overlay]=\"setOverlay()\"\n  tabindex=\"0\"\n  [class.nvb-box--drop-target]=\"isDropTarget()\"\n  [ngClass]=\"{\n    'nvb-box--focused': elementFocused && !dropOverlay && !effectElement,\n    'nvb-box--hovered': elementHovered && !elementFocused && !dropOverlay && !effectElement,\n    'nvb-box--effect-element': effectElement,\n  }\"\n  [draggable]=\"!allowsBuilderInteractions()\"\n  (dragstart)=\"onElementDragStart($event)\"\n  (dragend)=\"onElementDragEnd($event)\"\n>\n  <ng-content></ng-content>\n  @if ((elementFocused || elementHovered) && !dropOverlay && !effectElement && isBuilderCanvas()) {\n    <div\n      class=\"nvb-box-chrome\"\n      [class.nvb-box-chrome--selected]=\"elementFocused\"\n      draggable=\"false\"\n      (mousedown)=\"onChromeMouseDown($event)\"\n      (dragstart)=\"$event.preventDefault(); $event.stopPropagation()\"\n      [attr.data-testid]=\"'builder-element-chrome-' + (model()?.name || index())\"\n    >\n      @if (elementFocused) {\n        <span class=\"nvb-box-chrome__tag\">\n          <span class=\"nvb-box-chrome__type\">{{ elementTypeLabel() }}</span>\n          <span class=\"nvb-box-chrome__name\">{{ model()?.name }}</span>\n        </span>\n      }\n      <span class=\"nvb-box-chrome__actions\">\n        @if (elementFocused && selectableParent(); as parent) {\n          <button\n            type=\"button\"\n            class=\"nvb-box-chrome__button\"\n            (click)=\"onChromeSelectParent($event)\"\n            [attr.aria-label]=\"('builder.selectParent' | uiT: 'Select parent') + ': ' + (parent.label || parent.name)\"\n            [title]=\"('builder.selectParent' | uiT: 'Select parent') + ': ' + (parent.label || parent.name)\"\n            [attr.data-testid]=\"'builder-element-select-parent-' + model()?.name\"\n          >\n            <nvb-icon name=\"arrow_upward\"></nvb-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"nvb-box-chrome__button\"\n          (click)=\"onChromeDuplicate($event)\"\n          [attr.aria-label]=\"'builder.duplicate' | uiT: 'Duplicate'\"\n          [title]=\"'builder.duplicateHint' | uiT: 'Duplicate (Ctrl+D)'\"\n          [attr.data-testid]=\"'builder-element-duplicate-' + model()?.name\"\n        >\n          <nvb-icon name=\"content_copy\"></nvb-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"nvb-box-chrome__button nvb-box-chrome__button--danger\"\n          (click)=\"onChromeDelete($event)\"\n          [attr.aria-label]=\"'common.delete' | uiT: 'Delete'\"\n          [title]=\"'builder.deleteHint' | uiT: 'Delete (Del)'\"\n          [attr.data-testid]=\"'builder-element-delete-' + model()?.name\"\n        >\n          <nvb-icon name=\"delete\"></nvb-icon>\n        </button>\n      </span>\n    </div>\n  }\n  @if (setOverlay()) {\n    <div\n      class=\"nvb-box__interaction-surface\"\n      aria-hidden=\"true\"\n      draggable=\"true\"\n      (mousedown)=\"onOverlayMouseDown($event)\"\n      (dragstart)=\"onElementDragStart($event)\"\n      (dragend)=\"onElementDragEnd($event)\"\n    ></div>\n  }\n</div>\n\n@if (contextMenuVisible()) {\n  <div\n    class=\"nvb-box-context-menu\"\n    [attr.data-testid]=\"'builder-column-context-menu-' + (model()?.name || index())\"\n    [style.left.px]=\"contextMenuPosition().x\"\n    [style.top.px]=\"contextMenuPosition().y\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (click)=\"$event.stopPropagation()\"\n    (contextmenu)=\"$event.preventDefault()\"\n  >\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('required')\" [attr.data-testid]=\"'builder-column-menu-required-' + model()?.name\">\n      <span>{{ 'property.required' | uiT: 'Required' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('required')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('required')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('disabled')\" [attr.data-testid]=\"'builder-column-menu-disabled-' + model()?.name\">\n      <span>{{ 'property.disabled' | uiT: 'Disabled' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('disabled')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('disabled')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('readOnly')\" [attr.data-testid]=\"'builder-column-menu-readonly-' + model()?.name\">\n      <span>{{ 'property.readOnly' | uiT: 'Read only' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('readOnly')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('readOnly')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('hidden')\" [attr.data-testid]=\"'builder-column-menu-hidden-' + model()?.name\">\n      <span>{{ 'property.hidden' | uiT: 'Hidden' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('hidden')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('hidden')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <div class=\"nvb-box-context-menu__divider\"></div>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('duplicate')\" [attr.data-testid]=\"'builder-column-menu-duplicate-' + model()?.name\">\n      <span>{{ 'builder.duplicate' | uiT: 'Duplicate' }}</span>\n      <kbd class=\"nvb-box-context-menu__shortcut\">Ctrl+D</kbd>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('copy')\" [attr.data-testid]=\"'builder-column-menu-copy-' + model()?.name\">\n      <span>{{ 'builder.copyToLibrary' | uiT: 'Copy to library' }}</span>\n    </button>\n    <div class=\"nvb-box-context-menu__divider\"></div>\n    <button\n      type=\"button\"\n      class=\"nvb-box-context-menu__item nvb-box-context-menu__item--danger\"\n      (click)=\"onContextMenuAction('delete')\"\n      [attr.data-testid]=\"'builder-column-menu-delete-' + model()?.name\"\n    >\n      <span>{{ 'common.delete' | uiT: resolveDeleteActionLabel() }}</span>\n      <kbd class=\"nvb-box-context-menu__shortcut\">Del</kbd>\n    </button>\n  </div>\n}\n",styles:[':host{flex:1 1 200px;min-width:200px;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative}:host(.nvb-ai-pending){opacity:0;pointer-events:none}:host(.nvb-ai-revealing){animation:nvb-ai-enter .42s cubic-bezier(.2,.7,.2,1) both}:host(.nvb-ai-revealing)>.nvb-box{animation:nvb-ai-ring 1.1s ease-out both}@keyframes nvb-ai-enter{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}@keyframes nvb-ai-ring{0%,35%{box-shadow:0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 55%,transparent)}to{box-shadow:0 0 0 2px transparent}}@media(prefers-reduced-motion:reduce){:host(.nvb-ai-revealing),:host(.nvb-ai-revealing)>.nvb-box{animation:none}}.nvb-column-drop-overlay{position:absolute;inset:calc(var(--nvb-form-element-spacing, 10px) / 2);display:flex;z-index:var(--nvb-builder-z-column-overlay, 18);pointer-events:none}.nvb-column-drop-overlay__surface{flex:1 1 50%;pointer-events:none}.nvb-column-drop-overlay--left:before,.nvb-column-drop-overlay--right:after{content:"";position:absolute;top:2px;bottom:2px;width:8px;background:linear-gradient(var(--nvb-color-primary-500),var(--nvb-color-primary-500)) center/2px calc(100% - 8px) no-repeat,radial-gradient(circle at 50% 4px,var(--nvb-color-primary-500) 3.5px,transparent 4px),radial-gradient(circle at 50% calc(100% - 4px),var(--nvb-color-primary-500) 3.5px,transparent 4px)}.nvb-column-drop-overlay--left:before{left:calc(var(--nvb-form-element-spacing, 10px) / -2 - 4px)}.nvb-column-drop-overlay--right:after{right:calc(var(--nvb-form-element-spacing, 10px) / -2 - 4px)}.nvb-column-drop-overlay--edge-only{z-index:var(--nvb-builder-z-row-gutter, 60)}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface{position:absolute;top:0;bottom:0;width:clamp(28px,3.5%,56px);max-width:50%;flex:0 0 auto;pointer-events:auto;background:transparent}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface--left{left:0}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface--right{right:0}.nvb-column-drop-overlay--debug{background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 6%,transparent);outline:1px dashed color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 55%,transparent);outline-offset:-1px}.nvb-left-drop-zone{width:50%;position:absolute;left:0;top:0;height:100%;z-index:var(--nvb-builder-z-column-overlay, 18)}.nvb-left-drop-zone--overlay:before{content:"";display:block;position:absolute;background-color:var(--nvb-color-primary-500);width:6px;left:-2px;top:0;height:100%;z-index:10;border-radius:var(--nvb-radius-sm);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 82%,transparent),0 0 14px color-mix(in oklab,var(--nvb-color-primary-500) 52%,transparent)}.nvb-right-drop-zone{width:50%;position:absolute;right:0;top:0;height:100%;z-index:var(--nvb-builder-z-column-overlay, 18)}.nvb-right-drop-zone--overlay:after{content:"";display:block;position:absolute;background-color:var(--nvb-color-primary-500);width:6px;right:-2px;top:0;height:100%;z-index:10;border-radius:var(--nvb-radius-sm);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 82%,transparent),0 0 14px color-mix(in oklab,var(--nvb-color-primary-500) 52%,transparent)}.nvb-box{position:relative;background-color:var(--nvb-color-neutral-000);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));display:flex;flex-direction:column;gap:5px;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;cursor:grab}.nvb-box--is-element{padding:10px 10px 8px;border:1px solid var(--nvb-card-border-color, var(--nvb-color-neutral-200));transition:border-color .12s ease,box-shadow .12s ease}.nvb-box--is-element.nvb-box--hovered:not(.nvb-box--focused):not(.nvb-box--effect-element){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 55%,var(--nvb-color-neutral-300));box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 18%,transparent)}.nvb-box:not(.nvb-box--is-element).nvb-box--hovered:not(.nvb-box--focused):not(.nvb-box--effect-element){outline:1px dashed color-mix(in oklab,var(--nvb-color-primary-500) 60%,var(--nvb-color-neutral-300));outline-offset:0}.nvb-box--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-box--drag-debug{outline:1px dashed color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 48%,transparent);outline-offset:2px}.nvb-box--effect-element{opacity:.3;scale:.98;cursor:grabbing}.nvb-box--focused{outline:2px solid var(--nvb-color-primary-500);outline-offset:0px}.nvb-box--grouped-locked{cursor:default}.nvb-box--grouped-locked>*:not(.nvb-box__interaction-surface):not(.nvb-box__grouped-overlay):not(.nvb-box-chrome){pointer-events:none;-webkit-user-select:none;user-select:none}.nvb-box--builder-interactive{cursor:default;-webkit-user-select:auto;user-select:auto;-webkit-user-drag:auto}.nvb-box--interaction-overlay{isolation:isolate;cursor:grab}.nvb-box--interaction-overlay>*:not(.nvb-box__interaction-surface):not(.nvb-box__grouped-overlay):not(.nvb-box-chrome){position:relative;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none}.nvb-box--interaction-overlay ::ng-deep *{cursor:grab!important}.nvb-box--interaction-overlay.nvb-box--effect-element,.nvb-box--interaction-overlay.nvb-box--effect-element ::ng-deep *{cursor:grabbing!important}.nvb-box__interaction-surface{position:absolute;inset:0;z-index:var(--nvb-builder-z-interaction-surface, 6);pointer-events:auto;background:transparent;cursor:inherit;user-select:none;-webkit-user-select:none;touch-action:none}.nvb-box__grouped-overlay{position:absolute;inset:0;z-index:var(--nvb-builder-z-grouped-overlay, 20);pointer-events:auto;background:color-mix(in oklab,var(--nvb-color-neutral-000) 0%,transparent)}.nvb-box__footer{display:flex;justify-content:space-between}.nvb-box__footer-action{display:flex;justify-content:end;align-items:center;gap:15px;z-index:1}.nvb-box-context-menu{position:fixed;min-width:188px;background-color:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));box-shadow:0 8px 18px color-mix(in oklab,var(--nvb-color-neutral-950) 16%,transparent);padding:3px;z-index:var(--nvb-builder-z-context-menu, 250)}.nvb-box-context-menu__item{width:100%;border:0;background:transparent;padding:6px 8px;border-radius:calc(var(--nvb-radius-md) - 2px);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--nvb-color-neutral-800);cursor:pointer;text-align:left}.nvb-box-context-menu__item:hover{background-color:var(--nvb-color-neutral-100)}.nvb-box-context-menu__item--danger{color:var(--nvb-color-risk-700, #b91c1c)}.nvb-box-context-menu__item--danger:hover{background-color:color-mix(in oklab,var(--nvb-color-risk-500, #ef4444) 10%,transparent)}.nvb-box-context-menu__divider{height:1px;background-color:var(--nvb-color-neutral-200);margin:4px 6px}.nvb-box-context-menu__switch{width:30px;height:18px;border-radius:var(--nvb-radius-full);background-color:var(--nvb-color-neutral-300);position:relative;transition:background-color .18s ease;flex:0 0 auto}.nvb-box-context-menu__switch-thumb{width:12px;height:12px;border-radius:50%;background-color:var(--nvb-color-neutral-000);position:absolute;top:3px;left:3px;transition:left .18s ease}.nvb-box-context-menu__switch--active{background-color:var(--nvb-color-primary-500)}.nvb-box-context-menu__switch--active .nvb-box-context-menu__switch-thumb{left:15px}.nvb-box-context-menu__shortcut{font:inherit;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-box-chrome{position:absolute;top:0;left:8px;right:8px;z-index:calc(var(--nvb-builder-z-interaction-surface, 6) + 1);display:flex;align-items:center;justify-content:space-between;gap:8px;transform:translateY(calc(-100% + 5px));pointer-events:none;cursor:default;animation:nvb-box-chrome-in .12s ease-out}.nvb-box-chrome>*{pointer-events:auto}@keyframes nvb-box-chrome-in{0%{opacity:0}}.nvb-box-chrome__tag{min-width:0;max-width:60%;display:inline-flex;align-items:baseline;gap:5px;padding:1px 6px;border-radius:var(--nvb-radius-sm);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000, #fff);font-size:10.5px;font-weight:600;line-height:14px;white-space:nowrap;overflow:hidden}.nvb-box-chrome__type{overflow:hidden;text-overflow:ellipsis}.nvb-box-chrome__name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10px;opacity:.78;overflow:hidden;text-overflow:ellipsis}.nvb-box-chrome__actions{margin-left:auto;display:inline-flex;align-items:center;gap:1px;padding:1px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);box-shadow:0 1px 3px color-mix(in oklab,var(--nvb-color-neutral-900) 10%,transparent);opacity:.94}.nvb-box-chrome--selected .nvb-box-chrome__actions{opacity:1;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 35%,var(--nvb-color-neutral-200))}.nvb-box-chrome__button{width:20px;height:20px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--nvb-radius-md);background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer;transition:background-color .12s ease,color .12s ease}.nvb-box-chrome__button nvb-icon{width:14px;height:14px;font-size:14px}.nvb-box-chrome__button:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-box-chrome__button:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:-1px}.nvb-box-chrome__button--danger:hover{background:color-mix(in oklab,var(--nvb-color-risk-500, #ef4444) 12%,transparent);color:var(--nvb-color-risk-700, #b91c1c)}.nvb-box--interaction-overlay .nvb-box-chrome ::ng-deep *{cursor:default!important}.nvb-box--interaction-overlay .nvb-box-chrome .nvb-box-chrome__button,.nvb-box--interaction-overlay .nvb-box-chrome .nvb-box-chrome__button ::ng-deep *{cursor:pointer!important}.nvb-box--drop-target{outline:1.5px dashed var(--nvb-color-primary-500);outline-offset:2px}\n'],dependencies:[{kind:"directive",type:O,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:W,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:k,name:"uiT"}],changeDetection:l.ChangeDetectionStrategy.Eager})};l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:l,type:ge,decorators:[{type:L,args:[{selector:"column",imports:[O,k,W],changeDetection:z.Eager,template:"@let elementFocused = focusedElementName() === resolveFocusKey(model());\n@let elementHovered = hoveredElementKey() === resolveFocusKey(model());\n@if (showColumnDropOverlay()) {\n  <div\n    class=\"nvb-column-drop-overlay\"\n    [attr.data-testid]=\"'builder-column-overlay-' + (model()?.name || index())\"\n    [class.nvb-column-drop-overlay--debug]=\"dragDebugEnabled\"\n    [class.nvb-column-drop-overlay--edge-only]=\"isSideDropEdgeOnly()\"\n    [class.nvb-column-drop-overlay--left]=\"hoveredLeftElementName() === model().uuid\"\n    [class.nvb-column-drop-overlay--right]=\"hoveredRightElementName() === model().uuid\"\n    (dragover)=\"onOverlayDragOver($event)\"\n    (dragleave)=\"onOverlayDragLeave($event)\"\n    (drop)=\"onOverlayDrop($event)\"\n  >\n    <div class=\"nvb-column-drop-overlay__surface nvb-column-drop-overlay__surface--left\"></div>\n    <div class=\"nvb-column-drop-overlay__surface nvb-column-drop-overlay__surface--right\"></div>\n  </div>\n}\n\n<div\n  (focus)=\"onFocus(model())\"\n  (focusin)=\"onBoxFocusIn($event)\"\n  (mousedown)=\"onBoxMouseDown($event)\"\n  (mouseover)=\"onBoxMouseOver($event)\"\n  (mouseleave)=\"onBoxMouseLeave($event)\"\n  (dragover)=\"onBoxDragOver($event)\"\n  (dragleave)=\"onBoxDragLeave($event)\"\n  (drop)=\"onBoxDrop($event)\"\n  (contextmenu)=\"onContextMenu($event)\"\n  class=\"nvb-box\"\n  [attr.data-testid]=\"'builder-column-' + (model()?.name || index())\"\n  [class.nvb-box--is-element]=\"!removeBoxStyles()\"\n  [class.nvb-box--builder-interactive]=\"allowsBuilderInteractions()\"\n  [class.nvb-box--drag-debug]=\"dragDebugEnabled\"\n  [class.nvb-box--fit-content]=\"isFitContentBox()\"\n  [class.nvb-box--interaction-overlay]=\"setOverlay()\"\n  tabindex=\"0\"\n  [class.nvb-box--drop-target]=\"isDropTarget()\"\n  [ngClass]=\"{\n    'nvb-box--focused': elementFocused && !dropOverlay && !effectElement,\n    'nvb-box--hovered': elementHovered && !elementFocused && !dropOverlay && !effectElement,\n    'nvb-box--effect-element': effectElement,\n  }\"\n  [draggable]=\"!allowsBuilderInteractions()\"\n  (dragstart)=\"onElementDragStart($event)\"\n  (dragend)=\"onElementDragEnd($event)\"\n>\n  <ng-content></ng-content>\n  @if ((elementFocused || elementHovered) && !dropOverlay && !effectElement && isBuilderCanvas()) {\n    <div\n      class=\"nvb-box-chrome\"\n      [class.nvb-box-chrome--selected]=\"elementFocused\"\n      draggable=\"false\"\n      (mousedown)=\"onChromeMouseDown($event)\"\n      (dragstart)=\"$event.preventDefault(); $event.stopPropagation()\"\n      [attr.data-testid]=\"'builder-element-chrome-' + (model()?.name || index())\"\n    >\n      @if (elementFocused) {\n        <span class=\"nvb-box-chrome__tag\">\n          <span class=\"nvb-box-chrome__type\">{{ elementTypeLabel() }}</span>\n          <span class=\"nvb-box-chrome__name\">{{ model()?.name }}</span>\n        </span>\n      }\n      <span class=\"nvb-box-chrome__actions\">\n        @if (elementFocused && selectableParent(); as parent) {\n          <button\n            type=\"button\"\n            class=\"nvb-box-chrome__button\"\n            (click)=\"onChromeSelectParent($event)\"\n            [attr.aria-label]=\"('builder.selectParent' | uiT: 'Select parent') + ': ' + (parent.label || parent.name)\"\n            [title]=\"('builder.selectParent' | uiT: 'Select parent') + ': ' + (parent.label || parent.name)\"\n            [attr.data-testid]=\"'builder-element-select-parent-' + model()?.name\"\n          >\n            <nvb-icon name=\"arrow_upward\"></nvb-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"nvb-box-chrome__button\"\n          (click)=\"onChromeDuplicate($event)\"\n          [attr.aria-label]=\"'builder.duplicate' | uiT: 'Duplicate'\"\n          [title]=\"'builder.duplicateHint' | uiT: 'Duplicate (Ctrl+D)'\"\n          [attr.data-testid]=\"'builder-element-duplicate-' + model()?.name\"\n        >\n          <nvb-icon name=\"content_copy\"></nvb-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"nvb-box-chrome__button nvb-box-chrome__button--danger\"\n          (click)=\"onChromeDelete($event)\"\n          [attr.aria-label]=\"'common.delete' | uiT: 'Delete'\"\n          [title]=\"'builder.deleteHint' | uiT: 'Delete (Del)'\"\n          [attr.data-testid]=\"'builder-element-delete-' + model()?.name\"\n        >\n          <nvb-icon name=\"delete\"></nvb-icon>\n        </button>\n      </span>\n    </div>\n  }\n  @if (setOverlay()) {\n    <div\n      class=\"nvb-box__interaction-surface\"\n      aria-hidden=\"true\"\n      draggable=\"true\"\n      (mousedown)=\"onOverlayMouseDown($event)\"\n      (dragstart)=\"onElementDragStart($event)\"\n      (dragend)=\"onElementDragEnd($event)\"\n    ></div>\n  }\n</div>\n\n@if (contextMenuVisible()) {\n  <div\n    class=\"nvb-box-context-menu\"\n    [attr.data-testid]=\"'builder-column-context-menu-' + (model()?.name || index())\"\n    [style.left.px]=\"contextMenuPosition().x\"\n    [style.top.px]=\"contextMenuPosition().y\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (click)=\"$event.stopPropagation()\"\n    (contextmenu)=\"$event.preventDefault()\"\n  >\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('required')\" [attr.data-testid]=\"'builder-column-menu-required-' + model()?.name\">\n      <span>{{ 'property.required' | uiT: 'Required' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('required')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('required')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('disabled')\" [attr.data-testid]=\"'builder-column-menu-disabled-' + model()?.name\">\n      <span>{{ 'property.disabled' | uiT: 'Disabled' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('disabled')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('disabled')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('readOnly')\" [attr.data-testid]=\"'builder-column-menu-readonly-' + model()?.name\">\n      <span>{{ 'property.readOnly' | uiT: 'Read only' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('readOnly')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('readOnly')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('hidden')\" [attr.data-testid]=\"'builder-column-menu-hidden-' + model()?.name\">\n      <span>{{ 'property.hidden' | uiT: 'Hidden' }}</span>\n      <span\n        class=\"nvb-box-context-menu__switch\"\n        aria-hidden=\"true\"\n        [attr.aria-checked]=\"isContextMenuStateActive('hidden')\"\n        [class.nvb-box-context-menu__switch--active]=\"isContextMenuStateActive('hidden')\"\n      >\n        <span class=\"nvb-box-context-menu__switch-thumb\"></span>\n      </span>\n    </button>\n    <div class=\"nvb-box-context-menu__divider\"></div>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('duplicate')\" [attr.data-testid]=\"'builder-column-menu-duplicate-' + model()?.name\">\n      <span>{{ 'builder.duplicate' | uiT: 'Duplicate' }}</span>\n      <kbd class=\"nvb-box-context-menu__shortcut\">Ctrl+D</kbd>\n    </button>\n    <button type=\"button\" class=\"nvb-box-context-menu__item\" (click)=\"onContextMenuAction('copy')\" [attr.data-testid]=\"'builder-column-menu-copy-' + model()?.name\">\n      <span>{{ 'builder.copyToLibrary' | uiT: 'Copy to library' }}</span>\n    </button>\n    <div class=\"nvb-box-context-menu__divider\"></div>\n    <button\n      type=\"button\"\n      class=\"nvb-box-context-menu__item nvb-box-context-menu__item--danger\"\n      (click)=\"onContextMenuAction('delete')\"\n      [attr.data-testid]=\"'builder-column-menu-delete-' + model()?.name\"\n    >\n      <span>{{ 'common.delete' | uiT: resolveDeleteActionLabel() }}</span>\n      <kbd class=\"nvb-box-context-menu__shortcut\">Del</kbd>\n    </button>\n  </div>\n}\n",styles:[':host{flex:1 1 200px;min-width:200px;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative}:host(.nvb-ai-pending){opacity:0;pointer-events:none}:host(.nvb-ai-revealing){animation:nvb-ai-enter .42s cubic-bezier(.2,.7,.2,1) both}:host(.nvb-ai-revealing)>.nvb-box{animation:nvb-ai-ring 1.1s ease-out both}@keyframes nvb-ai-enter{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}@keyframes nvb-ai-ring{0%,35%{box-shadow:0 0 0 2px color-mix(in oklab,var(--nvb-color-primary-500) 55%,transparent)}to{box-shadow:0 0 0 2px transparent}}@media(prefers-reduced-motion:reduce){:host(.nvb-ai-revealing),:host(.nvb-ai-revealing)>.nvb-box{animation:none}}.nvb-column-drop-overlay{position:absolute;inset:calc(var(--nvb-form-element-spacing, 10px) / 2);display:flex;z-index:var(--nvb-builder-z-column-overlay, 18);pointer-events:none}.nvb-column-drop-overlay__surface{flex:1 1 50%;pointer-events:none}.nvb-column-drop-overlay--left:before,.nvb-column-drop-overlay--right:after{content:"";position:absolute;top:2px;bottom:2px;width:8px;background:linear-gradient(var(--nvb-color-primary-500),var(--nvb-color-primary-500)) center/2px calc(100% - 8px) no-repeat,radial-gradient(circle at 50% 4px,var(--nvb-color-primary-500) 3.5px,transparent 4px),radial-gradient(circle at 50% calc(100% - 4px),var(--nvb-color-primary-500) 3.5px,transparent 4px)}.nvb-column-drop-overlay--left:before{left:calc(var(--nvb-form-element-spacing, 10px) / -2 - 4px)}.nvb-column-drop-overlay--right:after{right:calc(var(--nvb-form-element-spacing, 10px) / -2 - 4px)}.nvb-column-drop-overlay--edge-only{z-index:var(--nvb-builder-z-row-gutter, 60)}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface{position:absolute;top:0;bottom:0;width:clamp(28px,3.5%,56px);max-width:50%;flex:0 0 auto;pointer-events:auto;background:transparent}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface--left{left:0}.nvb-column-drop-overlay--edge-only .nvb-column-drop-overlay__surface--right{right:0}.nvb-column-drop-overlay--debug{background:color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 6%,transparent);outline:1px dashed color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 55%,transparent);outline-offset:-1px}.nvb-left-drop-zone{width:50%;position:absolute;left:0;top:0;height:100%;z-index:var(--nvb-builder-z-column-overlay, 18)}.nvb-left-drop-zone--overlay:before{content:"";display:block;position:absolute;background-color:var(--nvb-color-primary-500);width:6px;left:-2px;top:0;height:100%;z-index:10;border-radius:var(--nvb-radius-sm);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 82%,transparent),0 0 14px color-mix(in oklab,var(--nvb-color-primary-500) 52%,transparent)}.nvb-right-drop-zone{width:50%;position:absolute;right:0;top:0;height:100%;z-index:var(--nvb-builder-z-column-overlay, 18)}.nvb-right-drop-zone--overlay:after{content:"";display:block;position:absolute;background-color:var(--nvb-color-primary-500);width:6px;right:-2px;top:0;height:100%;z-index:10;border-radius:var(--nvb-radius-sm);box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 82%,transparent),0 0 14px color-mix(in oklab,var(--nvb-color-primary-500) 52%,transparent)}.nvb-box{position:relative;background-color:var(--nvb-color-neutral-000);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));display:flex;flex-direction:column;gap:5px;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;cursor:grab}.nvb-box--is-element{padding:10px 10px 8px;border:1px solid var(--nvb-card-border-color, var(--nvb-color-neutral-200));transition:border-color .12s ease,box-shadow .12s ease}.nvb-box--is-element.nvb-box--hovered:not(.nvb-box--focused):not(.nvb-box--effect-element){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 55%,var(--nvb-color-neutral-300));box-shadow:0 0 0 1px color-mix(in oklab,var(--nvb-color-primary-500) 18%,transparent)}.nvb-box:not(.nvb-box--is-element).nvb-box--hovered:not(.nvb-box--focused):not(.nvb-box--effect-element){outline:1px dashed color-mix(in oklab,var(--nvb-color-primary-500) 60%,var(--nvb-color-neutral-300));outline-offset:0}.nvb-box--fit-content{width:fit-content;max-width:100%;align-self:flex-start}.nvb-box--drag-debug{outline:1px dashed color-mix(in oklab,var(--nvb-color-warning-500, #f59e0b) 48%,transparent);outline-offset:2px}.nvb-box--effect-element{opacity:.3;scale:.98;cursor:grabbing}.nvb-box--focused{outline:2px solid var(--nvb-color-primary-500);outline-offset:0px}.nvb-box--grouped-locked{cursor:default}.nvb-box--grouped-locked>*:not(.nvb-box__interaction-surface):not(.nvb-box__grouped-overlay):not(.nvb-box-chrome){pointer-events:none;-webkit-user-select:none;user-select:none}.nvb-box--builder-interactive{cursor:default;-webkit-user-select:auto;user-select:auto;-webkit-user-drag:auto}.nvb-box--interaction-overlay{isolation:isolate;cursor:grab}.nvb-box--interaction-overlay>*:not(.nvb-box__interaction-surface):not(.nvb-box__grouped-overlay):not(.nvb-box-chrome){position:relative;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none}.nvb-box--interaction-overlay ::ng-deep *{cursor:grab!important}.nvb-box--interaction-overlay.nvb-box--effect-element,.nvb-box--interaction-overlay.nvb-box--effect-element ::ng-deep *{cursor:grabbing!important}.nvb-box__interaction-surface{position:absolute;inset:0;z-index:var(--nvb-builder-z-interaction-surface, 6);pointer-events:auto;background:transparent;cursor:inherit;user-select:none;-webkit-user-select:none;touch-action:none}.nvb-box__grouped-overlay{position:absolute;inset:0;z-index:var(--nvb-builder-z-grouped-overlay, 20);pointer-events:auto;background:color-mix(in oklab,var(--nvb-color-neutral-000) 0%,transparent)}.nvb-box__footer{display:flex;justify-content:space-between}.nvb-box__footer-action{display:flex;justify-content:end;align-items:center;gap:15px;z-index:1}.nvb-box-context-menu{position:fixed;min-width:188px;background-color:var(--nvb-color-neutral-000);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-card-radius, var(--nvb-radius-lg));box-shadow:0 8px 18px color-mix(in oklab,var(--nvb-color-neutral-950) 16%,transparent);padding:3px;z-index:var(--nvb-builder-z-context-menu, 250)}.nvb-box-context-menu__item{width:100%;border:0;background:transparent;padding:6px 8px;border-radius:calc(var(--nvb-radius-md) - 2px);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--nvb-color-neutral-800);cursor:pointer;text-align:left}.nvb-box-context-menu__item:hover{background-color:var(--nvb-color-neutral-100)}.nvb-box-context-menu__item--danger{color:var(--nvb-color-risk-700, #b91c1c)}.nvb-box-context-menu__item--danger:hover{background-color:color-mix(in oklab,var(--nvb-color-risk-500, #ef4444) 10%,transparent)}.nvb-box-context-menu__divider{height:1px;background-color:var(--nvb-color-neutral-200);margin:4px 6px}.nvb-box-context-menu__switch{width:30px;height:18px;border-radius:var(--nvb-radius-full);background-color:var(--nvb-color-neutral-300);position:relative;transition:background-color .18s ease;flex:0 0 auto}.nvb-box-context-menu__switch-thumb{width:12px;height:12px;border-radius:50%;background-color:var(--nvb-color-neutral-000);position:absolute;top:3px;left:3px;transition:left .18s ease}.nvb-box-context-menu__switch--active{background-color:var(--nvb-color-primary-500)}.nvb-box-context-menu__switch--active .nvb-box-context-menu__switch-thumb{left:15px}.nvb-box-context-menu__shortcut{font:inherit;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-box-chrome{position:absolute;top:0;left:8px;right:8px;z-index:calc(var(--nvb-builder-z-interaction-surface, 6) + 1);display:flex;align-items:center;justify-content:space-between;gap:8px;transform:translateY(calc(-100% + 5px));pointer-events:none;cursor:default;animation:nvb-box-chrome-in .12s ease-out}.nvb-box-chrome>*{pointer-events:auto}@keyframes nvb-box-chrome-in{0%{opacity:0}}.nvb-box-chrome__tag{min-width:0;max-width:60%;display:inline-flex;align-items:baseline;gap:5px;padding:1px 6px;border-radius:var(--nvb-radius-sm);background:var(--nvb-color-primary-500);color:var(--nvb-color-neutral-000, #fff);font-size:10.5px;font-weight:600;line-height:14px;white-space:nowrap;overflow:hidden}.nvb-box-chrome__type{overflow:hidden;text-overflow:ellipsis}.nvb-box-chrome__name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10px;opacity:.78;overflow:hidden;text-overflow:ellipsis}.nvb-box-chrome__actions{margin-left:auto;display:inline-flex;align-items:center;gap:1px;padding:1px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md);background:var(--nvb-color-neutral-000);box-shadow:0 1px 3px color-mix(in oklab,var(--nvb-color-neutral-900) 10%,transparent);opacity:.94}.nvb-box-chrome--selected .nvb-box-chrome__actions{opacity:1;border-color:color-mix(in oklab,var(--nvb-color-primary-500) 35%,var(--nvb-color-neutral-200))}.nvb-box-chrome__button{width:20px;height:20px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--nvb-radius-md);background:transparent;color:var(--nvb-color-neutral-500);cursor:pointer;transition:background-color .12s ease,color .12s ease}.nvb-box-chrome__button nvb-icon{width:14px;height:14px;font-size:14px}.nvb-box-chrome__button:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-box-chrome__button:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:-1px}.nvb-box-chrome__button--danger:hover{background:color-mix(in oklab,var(--nvb-color-risk-500, #ef4444) 12%,transparent);color:var(--nvb-color-risk-700, #b91c1c)}.nvb-box--interaction-overlay .nvb-box-chrome ::ng-deep *{cursor:default!important}.nvb-box--interaction-overlay .nvb-box-chrome .nvb-box-chrome__button,.nvb-box--interaction-overlay .nvb-box-chrome .nvb-box-chrome__button ::ng-deep *{cursor:pointer!important}.nvb-box--drop-target{outline:1.5px dashed var(--nvb-color-primary-500);outline-offset:2px}\n']}]}],ctorParameters:()=>[{type:l.ElementRef},{type:K},{type:E},{type:M},{type:V},{type:xe},{type:re},{type:Ve}],propDecorators:{aiPending:[{type:B,args:["class.nvb-ai-pending"]}],aiRevealing:[{type:B,args:["class.nvb-ai-revealing"]}],model:[{type:l.Input,args:[{isSignal:true,alias:"model",required:false}]}],index:[{type:l.Input,args:[{isSignal:true,alias:"index",required:false}]}],columns:[{type:l.Input,args:[{isSignal:true,alias:"columns",required:false}]}],parentElement:[{type:l.Input,args:[{isSignal:true,alias:"parentElement",required:false}]}],builderLayerDepth:[{type:l.Input,args:[{isSignal:true,alias:"builderLayerDepth",required:false}]}],hostFlex:[{type:B,args:["style.flex"]}],hostWidth:[{type:B,args:["style.width"]}],hostMaxWidth:[{type:B,args:["style.max-width"]}],hostMinWidth:[{type:B,args:["style.min-width"]}],hostBuilderColumnOverlayZIndex:[{type:B,args:["style.--nvb-builder-z-column-overlay"]}],hostBuilderRowGutterZIndex:[{type:B,args:["style.--nvb-builder-z-row-gutter"]}],hostBuilderInnerDropOverlayZIndex:[{type:B,args:["style.--nvb-builder-z-inner-drop-overlay"]}],hostBuilderInteractionSurfaceZIndex:[{type:B,args:["style.--nvb-builder-z-interaction-surface"]}],hostBuilderContextMenuZIndex:[{type:B,args:["style.--nvb-builder-z-context-menu"]}],onWindowResize:[{type:U,args:["window:resize"]}],onDocumentMouseDown:[{type:U,args:["document:mousedown"]}],onEscape:[{type:U,args:["document:keydown.escape"]}],onHostDragOver:[{type:U,args:["dragenter",["$event"]]},{type:U,args:["dragover",["$event"]]}],onHostDragLeave:[{type:U,args:["dragleave",["$event"]]}],onHostDrop:[{type:U,args:["drop",["$event"]]}]}});export{Hn as A,X as B,Bn as C,Fn as D,de as E,Le as F,ie as I,D as L,M,C as N,se as O,le as P,J as R,ne as S,Ee as T,pe as _,Kn as a,$n as b,ue as c,Re as d,Ie as f,Gn as g,me as h,Mt as i,V as j,Ce as k,ve as l,Be as m,We as n,Me as o,$e as p,re as r,be as s,ge as t,Rt as u,jn as v,Fe as w,ke as x,ce as y,ze as z};