ngx-view-builder-runtime 0.5.0

package/fesm2022/ngx-view-builder-runtime-toast-element-zLm-618Z.mjs

@@ -0,0 +1 @@
+import{NgClass as r}from"@angular/common";import*as o from"@angular/core";import{input as v,signal as p,inject as a,computed as n,ChangeDetectionStrategy as u,Component as m}from"@angular/core";import{E as b,U as h,S as g,a as l,N as c,D as d}from"./ngx-view-builder-runtime-ngx-view-builder-runtime-q8FSSVhq.mjs";class e{model=v.required(...ngDevMode?[{debugName:"model"}]:[]);visible=p(true,...ngDevMode?[{debugName:"visible"}]:[]);elementActionService=a(b);uiTranslationService=a(h);hideTimeoutId=null;autoHideStartedAt=0;autoHideDelayMs=0;autoHideRemainingMs=0;isEditor=n(()=>g.isEditor(),...ngDevMode?[{debugName:"isEditor"}]:[]);shellClass=n(()=>{const t=this.resolvePosition();return{[`nvb-toast-shell--${t}`]:true,"nvb-toast-shell--editor":this.isEditor()}},...ngDevMode?[{debugName:"shellClass"}]:[]);variantClass=n(()=>`nvb-toast--${this.resolveVariant()}`,...ngDevMode?[{debugName:"variantClass"}]:[]);iconName=n(()=>{const t=String(this.model()?.icon??"").trim();if(t){return t}switch(this.resolveVariant()){case"success":return"check_circle";case"warning":return"warning";case"error":return"error";default:return"info"}},...ngDevMode?[{debugName:"iconName"}]:[]);showActionButton=n(()=>String(this.model()?.actionText??"").trim().length>0,...ngDevMode?[{debugName:"showActionButton"}]:[]);ngOnInit(){this.visible.set(Boolean(this.model()?.initiallyVisible??true));if(this.isEditor()){this.visible.set(true);return}this.scheduleAutoHide()}ngOnDestroy(){this.clearAutoHide()}onToastClick(t){t.stopPropagation();void this.runActions("click")}onActionClick(t){t.preventDefault();t.stopPropagation();void this.runActions("action")}onDismissClick(t){t.preventDefault();t.stopPropagation();this.visible.set(false);this.clearAutoHide();void this.runActions("dismiss")}pauseAutoHide(){if(this.isEditor()||this.hideTimeoutId===null){return}const t=Date.now()-this.autoHideStartedAt;this.autoHideRemainingMs=Math.max(1e3,this.autoHideDelayMs-t);this.clearAutoHide()}resumeAutoHide(){if(this.isEditor()||!this.visible()||!this.model().autoHide||this.hideTimeoutId!==null){return}this.scheduleAutoHide(this.autoHideRemainingMs||this.resolveAutoHideDelayMs())}resolvedTitle(){const t=String(this.model()?.title??"").trim();return t==="Notification"?this.uiTranslationService.translate("toast.titleDefault","Notification"):t}resolvedDescription(){const t=String(this.model()?.descriptionText??"").trim();return t==="Toast message"?this.uiTranslationService.translate("toast.descriptionDefault","Toast message"):t}dismissLabel(){return this.uiTranslationService.translate("common.dismiss","Dismiss")}toastAriaLive(){return this.resolveVariant()==="info"?"polite":"assertive"}toastRole(){return this.toastAriaLive()==="assertive"?"alert":"status"}scheduleAutoHide(t=this.resolveAutoHideDelayMs()){this.clearAutoHide();if(!this.visible()){return}if(!this.model().autoHide){return}this.autoHideDelayMs=t;this.autoHideRemainingMs=t;this.autoHideStartedAt=Date.now();this.hideTimeoutId=setTimeout(()=>{this.visible.set(false);this.hideTimeoutId=null;void this.runActions("autoHide")},t)}clearAutoHide(){if(this.hideTimeoutId===null){return}clearTimeout(this.hideTimeoutId);this.hideTimeoutId=null}resolveAutoHideDelayMs(){const t=Number(this.model()?.autoHideMs);if(Number.isFinite(t)&&t>=0){return Math.floor(t)}return 7e3}async runActions(t){const i={action:t,value:this.model().value,item:null,row:null};const s=String(this.model().name??"").trim();if(s){i[s]=this.model().value}await this.elementActionService.runActions(this.model(),this.model().events??[],"click",i)}resolveVariant(){const t=String(this.model()?.variant??"info").trim().toLowerCase();if(t==="error"||t==="danger"||t==="risk"){return"error"}if(t==="warning"||t==="warn"){return"warning"}if(t==="success"||t==="ok"){return"success"}if(t==="info"||t==="neutral"){return"info"}return"info"}resolvePosition(){const t=String(this.model()?.position??"top-right").trim().toLowerCase();if(t==="top-left"||t==="top-center"||t==="top-right"||t==="bottom-left"||t==="bottom-center"||t==="bottom-right"){return t}return"top-right"}static ɵfac=o.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.4",ngImport:o,type:e,deps:[],target:o.ɵɵFactoryTarget.Component});static ɵcmp=o.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.4",type:e,isStandalone:true,selector:"toast-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:o,template:'<element-wrapper [model]="model()">\n  @if (visible()) {\n    <section class="nvb-toast-shell" [ngClass]="shellClass()" data-testid="toast-root">\n      <article\n        class="nvb-toast"\n        [ngClass]="variantClass()"\n        [class.nvb-toast--no-icon]="!model().showIcon"\n        [attr.role]="toastRole()"\n        [attr.aria-live]="toastAriaLive()"\n        (click)="onToastClick($event)"\n        (mouseenter)="pauseAutoHide()"\n        (mouseleave)="resumeAutoHide()"\n        (focusin)="pauseAutoHide()"\n        (focusout)="resumeAutoHide()"\n      >\n        @if (model().showIcon) {\n          <span class="nvb-toast__media" aria-hidden="true">\n            <nvb-icon class="nvb-toast__icon" [name]="iconName()"></nvb-icon>\n          </span>\n        }\n\n        <div class="nvb-toast__content">\n          <h4 class="nvb-toast__title">{{ resolvedTitle() | dynamicText: model() }}</h4>\n\n          @if (resolvedDescription()) {\n            <p class="nvb-toast__description">\n              {{ resolvedDescription() | dynamicText: model() }}\n            </p>\n          }\n        </div>\n\n        @if (showActionButton()) {\n          <button type="button" class="nvb-toast__action" (click)="onActionClick($event)">\n            {{ model().actionText | dynamicText: model() }}\n          </button>\n        }\n\n        @if (model().dismissible) {\n          <button\n            type="button"\n            class="nvb-toast__dismiss"\n            (click)="onDismissClick($event)"\n            [attr.aria-label]="dismissLabel()"\n          >\n            <nvb-icon name="close"></nvb-icon>\n          </button>\n        }\n      </article>\n    </section>\n  }\n</element-wrapper>\n',styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family)}.nvb-toast-shell{position:fixed;z-index:2147483500;width:min(360px,100vw - 32px);pointer-events:none;display:grid;gap:16px}.nvb-toast-shell--editor{position:relative;inset:auto;width:min(360px,100%);max-width:100%;margin-top:8px}.nvb-toast-shell--top-left{top:16px;left:16px}.nvb-toast-shell--top-center{top:16px;left:50%;transform:translate(-50%)}.nvb-toast-shell--top-right{top:16px;right:16px}.nvb-toast-shell--bottom-left{bottom:16px;left:16px}.nvb-toast-shell--bottom-center{bottom:16px;left:50%;transform:translate(-50%)}.nvb-toast-shell--bottom-right{bottom:16px;right:16px}.nvb-toast{--nvb-toast-icon-color: var(--nvb-color-primary-600);pointer-events:auto;position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) 24px;gap:4px 12px;align-items:start;min-height:52px;padding:12px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-toast-radius, 4px);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);box-shadow:0 8px 16px color-mix(in oklab,var(--nvb-color-neutral-950) 14%,transparent),0 0 2px color-mix(in oklab,var(--nvb-color-neutral-950) 12%,transparent);overflow:hidden}.nvb-toast__media{grid-column:1;grid-row:1/span 2;width:20px;height:20px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-toast-icon-color);flex:0 0 auto}.nvb-toast__icon{font-size:20px;line-height:1}.nvb-toast__content{grid-column:2;min-width:0;display:grid;gap:2px}.nvb-toast--no-icon .nvb-toast__content,.nvb-toast--no-icon .nvb-toast__action{grid-column:1/3}.nvb-toast__title{margin:0;font-size:14px;font-weight:600;line-height:20px;letter-spacing:0;color:var(--nvb-color-neutral-900)}.nvb-toast__description{margin:0;font-size:13px;line-height:18px;color:var(--nvb-color-neutral-600);overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.nvb-toast__action{grid-column:2;justify-self:start;min-height:22px;padding:0;border:0;border-radius:var(--nvb-button-radius, 4px);background:transparent;color:var(--nvb-color-primary-700);font:inherit;font-size:13px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap}.nvb-toast__action:hover{color:var(--nvb-color-primary-800);text-decoration:underline;text-underline-offset:2px}.nvb-toast__action:focus-visible,.nvb-toast__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-toast__dismiss{grid-column:3;grid-row:1;width:24px;height:24px;margin:-2px -2px 0 0;border:1px solid transparent;border-radius:var(--nvb-button-radius, 4px);background:transparent;color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,color .16s ease}.nvb-toast__dismiss:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-toast--info{--nvb-toast-icon-color: var(--nvb-color-primary-600)}.nvb-toast--success{--nvb-toast-icon-color: var(--nvb-color-success-700)}.nvb-toast--warning{--nvb-toast-icon-color: var(--nvb-color-warning-700)}.nvb-toast--error{--nvb-toast-icon-color: var(--nvb-color-risk-700)}@media(max-width:520px){.nvb-toast-shell{width:min(360px,100vw - 24px)}}\n"],dependencies:[{kind:"component",type:l,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:r,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"component",type:c,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:d,name:"dynamicText"}],changeDetection:o.ChangeDetectionStrategy.OnPush})}o.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.4",ngImport:o,type:e,decorators:[{type:m,args:[{selector:"toast-element",changeDetection:u.OnPush,imports:[l,r,d,c],template:'<element-wrapper [model]="model()">\n  @if (visible()) {\n    <section class="nvb-toast-shell" [ngClass]="shellClass()" data-testid="toast-root">\n      <article\n        class="nvb-toast"\n        [ngClass]="variantClass()"\n        [class.nvb-toast--no-icon]="!model().showIcon"\n        [attr.role]="toastRole()"\n        [attr.aria-live]="toastAriaLive()"\n        (click)="onToastClick($event)"\n        (mouseenter)="pauseAutoHide()"\n        (mouseleave)="resumeAutoHide()"\n        (focusin)="pauseAutoHide()"\n        (focusout)="resumeAutoHide()"\n      >\n        @if (model().showIcon) {\n          <span class="nvb-toast__media" aria-hidden="true">\n            <nvb-icon class="nvb-toast__icon" [name]="iconName()"></nvb-icon>\n          </span>\n        }\n\n        <div class="nvb-toast__content">\n          <h4 class="nvb-toast__title">{{ resolvedTitle() | dynamicText: model() }}</h4>\n\n          @if (resolvedDescription()) {\n            <p class="nvb-toast__description">\n              {{ resolvedDescription() | dynamicText: model() }}\n            </p>\n          }\n        </div>\n\n        @if (showActionButton()) {\n          <button type="button" class="nvb-toast__action" (click)="onActionClick($event)">\n            {{ model().actionText | dynamicText: model() }}\n          </button>\n        }\n\n        @if (model().dismissible) {\n          <button\n            type="button"\n            class="nvb-toast__dismiss"\n            (click)="onDismissClick($event)"\n            [attr.aria-label]="dismissLabel()"\n          >\n            <nvb-icon name="close"></nvb-icon>\n          </button>\n        }\n      </article>\n    </section>\n  }\n</element-wrapper>\n',styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family)}.nvb-toast-shell{position:fixed;z-index:2147483500;width:min(360px,100vw - 32px);pointer-events:none;display:grid;gap:16px}.nvb-toast-shell--editor{position:relative;inset:auto;width:min(360px,100%);max-width:100%;margin-top:8px}.nvb-toast-shell--top-left{top:16px;left:16px}.nvb-toast-shell--top-center{top:16px;left:50%;transform:translate(-50%)}.nvb-toast-shell--top-right{top:16px;right:16px}.nvb-toast-shell--bottom-left{bottom:16px;left:16px}.nvb-toast-shell--bottom-center{bottom:16px;left:50%;transform:translate(-50%)}.nvb-toast-shell--bottom-right{bottom:16px;right:16px}.nvb-toast{--nvb-toast-icon-color: var(--nvb-color-primary-600);pointer-events:auto;position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) 24px;gap:4px 12px;align-items:start;min-height:52px;padding:12px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-toast-radius, 4px);background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-800);box-shadow:0 8px 16px color-mix(in oklab,var(--nvb-color-neutral-950) 14%,transparent),0 0 2px color-mix(in oklab,var(--nvb-color-neutral-950) 12%,transparent);overflow:hidden}.nvb-toast__media{grid-column:1;grid-row:1/span 2;width:20px;height:20px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;color:var(--nvb-toast-icon-color);flex:0 0 auto}.nvb-toast__icon{font-size:20px;line-height:1}.nvb-toast__content{grid-column:2;min-width:0;display:grid;gap:2px}.nvb-toast--no-icon .nvb-toast__content,.nvb-toast--no-icon .nvb-toast__action{grid-column:1/3}.nvb-toast__title{margin:0;font-size:14px;font-weight:600;line-height:20px;letter-spacing:0;color:var(--nvb-color-neutral-900)}.nvb-toast__description{margin:0;font-size:13px;line-height:18px;color:var(--nvb-color-neutral-600);overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.nvb-toast__action{grid-column:2;justify-self:start;min-height:22px;padding:0;border:0;border-radius:var(--nvb-button-radius, 4px);background:transparent;color:var(--nvb-color-primary-700);font:inherit;font-size:13px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap}.nvb-toast__action:hover{color:var(--nvb-color-primary-800);text-decoration:underline;text-underline-offset:2px}.nvb-toast__action:focus-visible,.nvb-toast__dismiss:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-toast__dismiss{grid-column:3;grid-row:1;width:24px;height:24px;margin:-2px -2px 0 0;border:1px solid transparent;border-radius:var(--nvb-button-radius, 4px);background:transparent;color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,color .16s ease}.nvb-toast__dismiss:hover{background:var(--nvb-color-neutral-100);color:var(--nvb-color-neutral-900)}.nvb-toast--info{--nvb-toast-icon-color: var(--nvb-color-primary-600)}.nvb-toast--success{--nvb-toast-icon-color: var(--nvb-color-success-700)}.nvb-toast--warning{--nvb-toast-icon-color: var(--nvb-color-warning-700)}.nvb-toast--error{--nvb-toast-icon-color: var(--nvb-color-risk-700)}@media(max-width:520px){.nvb-toast-shell{width:min(360px,100vw - 24px)}}\n"]}]}],propDecorators:{model:[{type:o.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{e as ToastElement};

package/fesm2022/ngx-view-builder-runtime.mjs

@@ -0,0 +1 @@
+import{A as s,b as i,c as t,d as o,e as r,f as l,g as n,h as d,B as E,i as c,j as u,k as S,l as m,m as T,n as _,o as g,p as b,C as M,q as N,r as A,s as R,t as I,u as C,v as p,w as B,x as v,y as V,z as L,F as x,G as P,H as w,I as D,J as O,K as y,L as U,O as F,P as h,Q as G,R as X,T as W,V as H,W as Y,X as k,Y as z,Z as K,_ as f,$ as J,a0 as j,a1 as Z,a2 as q,a3 as Q,a4 as $,D as ee,a5 as ae,a6 as se,a7 as ie,a8 as te,a9 as oe,aa as re,ab as le,ac as ne,E as de,ad as Ee,ae as ce,af as ue,ag as Se,ah as me,ai as Te,aj as _e,ak as ge,al as be,am as Me,an as Ne,ao as Ae,ap as Re,aq as Ie,ar as Ce,as as pe,at as Be,au as ve,av as Ve,aw as Le,ax as xe,ay as Pe,az as we,aA as De,aB as Oe,aC as ye,aD as Ue,aE as Fe,aF as he,aG as Ge,aH as Xe,aI as We,aJ as He,aK as Ye,aL as ke,aM as ze,aN as Ke,aO as fe,M as Je,aP as je,aQ as Ze,aR as qe,aS as Qe,aT as $e,aU as ea,aV as aa,aW as sa,aX as ia,aY as ta,aZ as oa,a_ as ra,a$ as la,b0 as na,b1 as da,b2 as Ea,b3 as ca,b4 as ua,b5 as Sa,b6 as ma,b7 as Ta,b8 as _a,b9 as ga,ba,bb as Ma,bc as Na,bd as Aa,be as Ra,bf as Ia,bg as Ca,bh as pa,bi as Ba,bj as va,bk as Va,bl as La,bm as xa,bn as Pa,bo as wa,bp as Da,bq as Oa,br as ya,bs as Ua,bt as Fa,bu as ha,bv as Ga,bw as Xa,bx as Wa,by as Ha,bz as Ya,bA as ka,bB as za,N as Ka,bC as fa,bD as Ja,bE as ja,bF as Za,bG as qa,bH as Qa,bI as $a,bJ as es,bK as as,bL as ss,bM as is,bN as ts,bO as os,bP as rs,bQ as ls,bR as ns,bS as ds,bT as Es,bU as cs,bV as us,bW as Ss,bX as ms,bY as Ts,bZ as _s,b_ as gs,b$ as bs,c0 as Ms,c1 as Ns,c2 as As,c3 as Rs,c4 as Is,c5 as Cs,c6 as ps,c7 as Bs,c8 as vs,c9 as Vs,ca as Ls,cb as xs,cc as Ps,S as ws,cd as Ds,ce as Os,cf as ys,cg as Us,ch as Fs,ci as hs,cj as Gs,ck as Xs,cl as Ws,cm as Hs,cn as Ys,co as ks,cp as zs,cq as Ks,cr as fs,cs as Js,ct as js,cu as Zs,cv as qs,cw as Qs,cx as $s,cy as ei,cz as ai,cA as si,cB as ii,cC as ti,cD as oi,U as ri,cE as li,cF as ni,cG as di,cH as Ei,cI as ci,cJ as ui,cK as Si,cL as mi,cM as Ti,cN as _i,cO as gi,cP as bi,cQ as Mi,cR as Ni,cS as Ai,cT as Ri,cU as Ii,cV as Ci,cW as pi,cX as Bi,cY as vi,cZ as Vi,c_ as Li,c$ as xi,d0 as Pi,d1 as wi,d2 as Di,d3 as Oi,d4 as yi,d5 as Ui,d6 as Fi,d7 as hi,d8 as Gi,d9 as Xi,da as Wi,db as Hi,dc as Yi,dd as ki,de as zi,df as Ki,dg as fi,dh as Ji,di as ji,dj as Zi,dk as qi,dl as Qi,dm as $i,dn as et,dp as at,dq as st,dr as it,ds as tt,dt as ot,du as rt,dv as lt,dw as nt,dx as dt,dy as Et,dz as ct,dA as ut,dB as St,dC as mt,dD as Tt,dE as _t,dF as gt,dG as bt}from"./ngx-view-builder-runtime-ngx-view-builder-runtime-q8FSSVhq.mjs";export{s as ALIGN_CLASS_MAP,i as ALIGN_CLASS_PREFIX,t as APPLICATION_LOCALE_VALUE,o as AccordionElement,r as AccordionModel,l as ApplicationLocaleService,n as AutocompleteModel,d as AvatarModel,E as BLOCK_TAGS,c as BUILT_IN_STRUCTURE_MIGRATIONS,u as BUILT_IN_TABLE_CELL_ELEMENT_TYPES,S as BadgeModel,m as BreadcrumbsModel,T as BuilderModel,_ as BuilderPageDisplayModeEnum,g as BuilderTabRegistryService,b as ButtonModel,M as COLOR_CLASS_PREFIX,N as CURRENT_SCHEMA_VERSION,A as ChartModel,R as CheckboxInputModel,I as ChoiceModel,C as ColumnFragmentModeEnum,p as ColumnModel,B as ComponentRegistryService,v as ConfirmDialog,V as CreatorStructureService,L as CustomHtmlModel,x as DATA_JSON_CAPABLE_ELEMENT_TYPES,P as DEFAULT_FONT,w as DEFAULT_FONT_CLASS,D as DEFAULT_MOBILE_BREAKPOINT,O as DEFAULT_SIZE_CLASS,y as DEFAULT_TABLET_BREAKPOINT,U as DEFAULT_TEXT_COLOR,F as DataService,h as DataSourceModel,G as DataSourceService,X as DatePickerModel,W as DateRangeModel,H as DialogDragController,Y as DialogElement,k as DialogModel,z as DividerModel,K as DomInstrumentationService,f as DragAndDropService,J as DragAutoScrollService,j as DynamicPanel,Z as DynamicPanelModel,q as DynamicTableColumnModel,Q as DynamicTableModel,$ as DynamicTableRowColumnModel,ee as DynamicTextPipe,ae as ELEMENT_ROW_CONTEXT_KEY,se as ELEMENT_ROW_SCOPE_PATH_KEY,ie as EN_UI_DICTIONARY,te as EXCLUDE_FROM_DATA_JSON_KEY,oe as ElementActionButtonToneEnum,re as ElementActionButtonVariantEnum,le as ElementActionDialogOperationEnum,ne as ElementActionResponseModeEnum,de as ElementActionService,Ee as ElementActionSetValueModeEnum,ce as ElementActionToastPositionEnum,ue as ElementActionToastVariantEnum,Se as ElementActionTriggerEnum,me as ElementActionTypeEnum,Te as ElementBaseModel,_e as ElementContentBox,ge as ElementContentRow,be as ElementDataSourceUseForEnum,Me as ElementExecutionModeEnum,Ne as ElementFocusService,Ae as ElementTypesEnum,Re as ElementsService,Ie as EmptyBlockElement,Ce as EmptyBlockModel,pe as EventService,Be as ExpressionService,ve as FONT_CLASS_MAP,Ve as FONT_CLASS_PREFIX,Le as FeaturePackRegistryService,xe as FileUploadModel,Pe as ForgeInitializerService,we as HeaderModel,De as HeaderTabEnum,Oe as INLINE_TAGS,ye as IconModel,Ue as IconSvgService,Fe as IframeModel,he as ImageModel,Ge as LEGACY_SCHEMA_VERSION,Xe as LINE_HEIGHT_CLASS_MAP,We as LINE_HEIGHT_CLASS_PREFIX,He as LOCALE_CHOICES,Ye as ListBoxModel,ke as ListGridModel,ze as LocalizationService,Ke as MANAGED_STRUCTURE_SETTING_KEYS,fe as MARK_TAG_MAP,Je as MarkupSecurityService,je as MessageCardModel,Ze as ModelService,qe as MultiSelectInputModel,Qe as NGX_VIEW_BUILDER_AI_ACTION_TYPES,$e as NGX_VIEW_BUILDER_AI_API_VERSION,ea as NGX_VIEW_BUILDER_AI_AUTOMATION_ACTION_TYPES,aa as NGX_VIEW_BUILDER_AI_ROW_CONTAINERS,sa as NGX_VIEW_BUILDER_AI_TAB_CONTAINERS,ia as NGX_VIEW_BUILDER_AI_TEMPLATES_CAPABILITY,ta as NGX_VIEW_BUILDER_AI_VALIDATOR_TYPES,oa as NGX_VIEW_BUILDER_BRIDGE_PROTOCOL_VERSION,ra as NGX_VIEW_BUILDER_PROJECT_LAYER,la as NGX_VIEW_BUILDER_UI_TRANSLATIONS,na as NVB_TEXT_CONTEXT_KEY,da as NativeCodeEditor,Ea as NgxViewBuilder,ca as NgxViewBuilderActionExecutorService,ua as NgxViewBuilderAiApiService,Sa as NgxViewBuilderAlignEnum,ma as NgxViewBuilderApiService,Ta as NgxViewBuilderAutomationActionTypeEnum,_a as NgxViewBuilderAutomationService,ga as NgxViewBuilderBuilderTabRenderModeEnum,ba as NgxViewBuilderChromePositionEnum,Ma as NgxViewBuilderDataSourceTypeEnum,Na as NgxViewBuilderDialogCloseReasonEnum,Aa as NgxViewBuilderExecutionReasonEnum,Ra as NgxViewBuilderHeadlessService,Ia as NgxViewBuilderInteractionStatusEnum,Ca as NgxViewBuilderMcpBridgeService,pa as NgxViewBuilderPageNavigationModeEnum,Ba as NgxViewBuilderPreviewModeEnum,va as NgxViewBuilderProcessService,Va as NgxViewBuilderRenderModeEnum,La as NgxViewBuilderRenderPhaseEnum,xa as NgxViewBuilderRenderer,Pa as NgxViewBuilderRuleExecutedBranchEnum,wa as NgxViewBuilderRuleRunModeEnum,Da as NgxViewBuilderRulesEngineService,Oa as NgxViewBuilderRuntime,ya as NgxViewBuilderSaveRequestedSourceEnum,Ua as NgxViewBuilderTableSettingsSourceEnum,Fa as NgxViewBuilderThemeModeEnum,ha as NgxViewBuilderTriggerEngineService,Ga as NgxViewBuilderTriggerEventEnum,Xa as NgxViewBuilderValidator,Wa as NgxViewBuilderWebsocketMessageModeEnum,Ha as NumberInputModel,Ya as NumberStepperModel,ka as NvbElement,za as NvbElementContextService,Ka as NvbIcon,fa as NvbRichTextEditor,Ja as NvbRows,ja as NvbScope,Za as NvbSelect,qa as NvbStyleOutlet,Qa as NvbTab,$a as PHONE_COUNTRY_OPTIONS,es as PHONE_COUNTRY_PROPERTY_CHOICES,as as PageElement,ss as PageTitleModel,is as PanelElement,ts as PanelModel,os as PhoneInputModel,rs as PreviewRendererService,ls as ProgressBarModel,ns as ProgressFlowElement,ds as ProgressFlowModel,Es as PropertyModel,cs as RICH_TEXT_TOOLBAR_ICONS,us as RICH_TEXT_TOOLBAR_TOOLS,Ss as RadioInputModel,ms as RendererService,Ts as RichTextModel,_s as RouterOutletModel,gs as RowModel,bs as RuntimeDynamicPanel,Ms as RuntimeVariableSourceTypeEnum,Ns as RuntimeVariablesService,As as SIZE_CLASS_MAP,Rs as SIZE_CLASS_PREFIX,Is as SelectButtonModel,Cs as SelectInputModel,ps as SettingsModel,Bs as SignaturePadModel,vs as SingleCheckboxModel,Vs as SliderModel,Ls as SpacerModel,xs as SplitterElement,Ps as SplitterModel,ws as StateService,Ds as StatsCardModel,Os as StructureMigrationService,ys as StructureModel,Us as StructureService,Fs as TableCellElementRegistryService,hs as TableColumnAlignEnum,Gs as TableColumnCellActionsDisplayModeEnum,Xs as TableColumnTypeEnum,Ws as TableFilterControlTypeEnum,Hs as TableFilterOptionsSourceTypeEnum,Ys as TableInlineEditStartModeEnum,ks as TableInlineEditorTypeEnum,zs as TableModel,Ks as TableRowActionsDropdownButtonStyleEnum,fs as TableStatusToneEnum,Js as TabsElement,js as TabsModel,Zs as TabsProModel,qs as TemplateEngineService,Qs as TemplateStorageModeEnum,$s as TextAreaModel,ei as TextInputModel,ai as TimePickerModel,si as ToastModel,ii as ToggleSwitchModel,ti as TooltipComponent,oi as UiTranslatePipe,ri as UiTranslationService,li as ValidatorService,ni as ValueChangeTriggerEnum,di as VideoModel,Ei as applyDynamicPanelRowNumberingContext,ci as applyElementRowContext,ui as applyRuntimeNumberingContext,Si as applyStructureMigrations,mi as applyViewportBreakpoints,Ti as bridgeNgxViewBuilderApiEvents,_i as buildElementRowRuntimeContext,gi as buildFocusKey,bi as buildResponsiveColumnStyle,Mi as clearStructureMigrationNotice,Ni as cloneRecord,Ai as cloneValue,Ri as composeCssSize,Ii as configureStructureMigrations,Ci as createUuid,pi as describeDragEvent,Bi as describeEventTarget,vi as describeMouseEvent,Vi as elements,Li as getMobileBreakpoint,xi as getRuntimeTextContext,Pi as getStructureMigrationConfig,wi as getTabletBreakpoint,Di as getViewportContentWidth,Oi as isDataJsonCapableElementType,yi as isDragDebugEnabled,Ui as isMobileViewport,Fi as isMobileWidth,hi as isPlainRecord,Gi as isRelativeResponsiveWidth,Xi as isTabletViewport,Wi as isTabletWidth,Hi as lastStructureMigration,Yi as logDragDebug,ki as logDragDebugThrottled,zi as migrateStructure,Ki as normalizeBreakpoint,fi as normalizeCssSizeUnit,Ji as normalizeResponsiveCssSize,ji as normalizeStringList,Zi as provideNgxViewBuilderExtensions,qi as provideNgxViewBuilderMigrations,Qi as provideNgxViewBuilderProjectLayer,$i as provideNgxViewBuilderProjectLayers,et as provideNgxViewBuilderRuntime,at as provideNgxViewBuilderUiTranslations,st as pruneStructureSettings,it as readSchemaVersion,tt as recordStructureMigration,ot as resetStructureMigrationConfig,rt as resolveAllowedPhoneCountries,lt as resolveCssSizeSetting,nt as resolveElementRowContext,dt as resolveElementRowScope,Et as resolveElementRowScopedPath,ct as resolveFixedViewport,ut as resolvePhoneCountry,St as resolveResponsiveDisplayWidth,mt as resolveResponsiveWidth,Tt as resolveRuntimeTextContextValue,_t as resolveStructureSettings,gt as setElementRowContext,bt as setViewportContentWidth};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "ngx-view-builder-runtime",
+  "version": "0.5.0",
+  "description": "Native Angular runtime for NGX View Builder: renders forms, dashboards, data tables and guided flows defined as JSON.",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ngxviewbuilder.io",
+  "author": "NGX View Builder (https://ngxviewbuilder.io)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ngxviewbuilder/ngx-view-builder-community.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ngxviewbuilder/ngx-view-builder-community/issues"
+  },
+  "keywords": [
+    "angular",
+    "form-builder",
+    "view-builder",
+    "drag-and-drop",
+    "json-forms",
+    "dashboard",
+    "low-code"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/cdk": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0",
+    "jexl": "^2.3.0",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.9.0",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.12",
+    "@lezer/highlight": "^1.2.0",
+    "codemirror": "^6.0.2",
+    "prettier": "^3.6.2",
+    "lodash-es": "^4.17.21"
+  },
+  "sideEffects": [
+    "styles/*.css"
+  ],
+  "exports": {
+    "./styles/*.css": "./styles/*.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-view-builder-runtime.d.ts",
+      "default": "./fesm2022/ngx-view-builder-runtime.mjs"
+    }
+  },
+  "module": "fesm2022/ngx-view-builder-runtime.mjs",
+  "typings": "types/ngx-view-builder-runtime.d.ts",
+  "type": "module"
+}

package/styles/components.css

@@ -0,0 +1,443 @@
+.nvb-root {
+  --nvb-button-height-lg: 40px;
+  --nvb-button-height-ms: 32px;
+  --nvb-button-height-sm: 32px;
+  --nvb-button-height-sx: 28px;
+  --nvb-button-padding-lg: 0 16px;
+  --nvb-button-padding-ms: 0 12px;
+  --nvb-button-padding-sm: 0 10px;
+  --nvb-button-padding-sx: 0 8px;
+  --nvb-button-font-size-lg: 14px;
+  --nvb-button-font-size-ms: 13px;
+  --nvb-button-font-size-sm: 13px;
+  --nvb-button-font-size-sx: 12px;
+  --nvb-button-radius: var(--nvb-radius-md);
+  --nvb-button-gap: 6px;
+  --nvb-button-border-color: var(--nvb-color-neutral-300);
+  --nvb-button-bg: var(--nvb-color-neutral-000);
+  --nvb-button-text-color: var(--nvb-color-neutral-800);
+  --nvb-button-hover-bg: var(--nvb-color-neutral-050);
+  --nvb-button-primary-bg: var(--nvb-color-primary-600);
+  --nvb-button-primary-hover-bg: var(--nvb-color-primary-700);
+  --nvb-button-danger-bg: var(--nvb-color-risk-050);
+  --nvb-button-danger-text-color: var(--nvb-color-risk-700);
+  --nvb-button-danger-border-color: var(--nvb-color-risk-300);
+  --nvb-surface-bg: var(--nvb-color-neutral-000);
+  --nvb-surface-muted-bg: color-mix(in oklab, var(--nvb-color-neutral-050) 84%, var(--nvb-color-neutral-000));
+  --nvb-stroke-subtle: var(--nvb-color-neutral-200);
+  --nvb-stroke-strong: var(--nvb-color-neutral-300);
+  --nvb-shadow-2: 0 1px 2px color-mix(in oklab, var(--nvb-color-neutral-950) 6%, transparent);
+  --nvb-shadow-8:
+    0 4px 8px color-mix(in oklab, var(--nvb-color-neutral-950) 10%, transparent),
+    0 12px 24px color-mix(in oklab, var(--nvb-color-neutral-950) 8%, transparent);
+  --nvb-shadow-16:
+    0 8px 16px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent),
+    0 24px 48px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent);
+  --nvb-dialog-radius: var(--nvb-radius-lg);
+  --nvb-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));
+  --nvb-tablist-height: 40px;
+  --nvb-card-bg: var(--nvb-color-neutral-000);
+  --nvb-card-border-color: var(--nvb-color-neutral-200);
+  --nvb-card-radius: var(--nvb-radius-md);
+  --nvb-card-shadow: var(--nvb-shadow-2);
+  --nvb-card-padding: 12px;
+}
+
+.nvb-root .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-root .nvb-button,
+.nvb-root .nvb-control__add-row-button {
+  box-sizing: border-box;
+  min-height: var(--nvb-button-height-ms);
+  padding: var(--nvb-button-padding-ms);
+  border: 1px solid var(--nvb-button-border-color);
+  border-radius: var(--nvb-button-radius);
+  background: var(--nvb-button-bg);
+  color: var(--nvb-button-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nvb-button-gap);
+  font-family: var(--nvb-font-family);
+  font-size: var(--nvb-button-font-size-ms);
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: visible;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: none;
+}
+
+.nvb-root .nvb-button:focus-visible,
+.nvb-root .nvb-control__add-row-button:focus-visible,
+.nvb-root .nvb-icon-button:focus-visible {
+  outline: 0;
+  border-color: var(--nvb-input-focus-border-color, var(--nvb-color-primary-500));
+  box-shadow: var(--nvb-focus-ring);
+}
+
+.nvb-root .nvb-button:hover:not(:disabled),
+.nvb-root .nvb-control__add-row-button:hover:not(:disabled) {
+  background: var(--nvb-button-hover-bg);
+  border-color: var(--nvb-color-neutral-400);
+  color: var(--nvb-color-neutral-900);
+  box-shadow: none;
+}
+
+.nvb-root .nvb-button:disabled,
+.nvb-root .nvb-control__add-row-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+.nvb-root .nvb-button--lg {
+  min-height: var(--nvb-button-height-lg);
+  padding: var(--nvb-button-padding-lg);
+  font-size: var(--nvb-button-font-size-lg);
+}
+
+.nvb-root .nvb-button--ms,
+.nvb-root .nvb-button--md {
+  min-height: var(--nvb-button-height-ms);
+  padding: var(--nvb-button-padding-ms);
+  font-size: var(--nvb-button-font-size-ms);
+}
+
+.nvb-root .nvb-button--sm {
+  min-height: var(--nvb-button-height-sm);
+  padding: var(--nvb-button-padding-sm);
+  font-size: var(--nvb-button-font-size-sm);
+}
+
+.nvb-root .nvb-button--sx,
+.nvb-root .nvb-button--xs {
+  min-height: var(--nvb-button-height-sx);
+  padding: var(--nvb-button-padding-sx);
+  font-size: var(--nvb-button-font-size-sx);
+}
+
+.nvb-root .nvb-button--left {
+  justify-content: flex-start;
+}
+
+.nvb-root .nvb-button--full {
+  width: 100%;
+}
+
+.nvb-root .nvb-button--subtle {
+  border-color: transparent;
+  background: transparent;
+  color: var(--nvb-color-neutral-700);
+}
+
+.nvb-root .nvb-button--subtle:hover:not(:disabled) {
+  border-color: transparent;
+  background: color-mix(in oklab, var(--nvb-color-neutral-100) 72%, var(--nvb-color-neutral-000));
+  color: var(--nvb-color-neutral-900);
+}
+
+.nvb-root .nvb-button--neutral {
+  background: var(--nvb-color-neutral-000);
+}
+
+.nvb-root .nvb-button--primary,
+.nvb-root .nvb-button--active {
+  border-color: var(--nvb-color-primary-500);
+  background: var(--nvb-button-primary-bg);
+  color: var(--nvb-color-neutral-000);
+  box-shadow: none;
+}
+
+.nvb-root .nvb-button--primary-soft {
+  border-color: transparent;
+  background: color-mix(in oklab, var(--nvb-color-primary-050) 76%, var(--nvb-color-neutral-000));
+  color: var(--nvb-color-primary-700);
+}
+
+.nvb-root .nvb-button--primary:hover:not(:disabled),
+.nvb-root .nvb-button--active:hover:not(:disabled) {
+  border-color: var(--nvb-color-primary-600);
+  background: var(--nvb-button-primary-hover-bg);
+  color: var(--nvb-color-neutral-000);
+}
+
+.nvb-root .nvb-button--primary-soft:hover:not(:disabled) {
+  border-color: var(--nvb-color-primary-500);
+  background: color-mix(
+    in oklab,
+    var(--nvb-color-primary-050) 70%,
+    var(--nvb-color-primary-100, var(--nvb-color-primary-050))
+  );
+  color: var(--nvb-color-primary-800);
+}
+
+.nvb-root .nvb-button--danger {
+  border-color: var(--nvb-button-danger-border-color);
+  background: var(--nvb-button-danger-bg);
+  color: var(--nvb-button-danger-text-color);
+}
+
+.nvb-root .nvb-button--danger:hover:not(:disabled),
+.nvb-root .nvb-icon-button--danger:hover:not(:disabled) {
+  border-color: var(--nvb-color-risk-400);
+  background: color-mix(
+    in oklab,
+    var(--nvb-color-risk-050) 70%,
+    var(--nvb-color-risk-100, var(--nvb-color-risk-050))
+  );
+  color: var(--nvb-color-risk-800, var(--nvb-color-risk-700));
+}
+
+.nvb-root .nvb-button__icon,
+.nvb-root .nvb-control__add-row-button span {
+  font-size: 15px;
+  line-height: 1;
+}
+
+.nvb-root .nvb-control__add-row-button {
+  border-color: var(--nvb-control-button-border-color);
+  background: var(--nvb-control-button-bg);
+  color: var(--nvb-control-button-text-color);
+  font-size: var(--nvb-control-font-size);
+  height: var(--nvb-control-height);
+  min-height: var(--nvb-control-height);
+  padding: 0 var(--nvb-control-padding-x);
+}
+
+.nvb-root .nvb-control__add-row-button:hover:not(:disabled) {
+  border-color: var(--nvb-control-button-hover-border-color);
+  background: var(--nvb-control-button-hover-bg);
+  color: var(--nvb-control-button-hover-text-color);
+}
+
+.nvb-root .nvb-control__add-row-button--compact {
+  height: var(--nvb-control-height-sm);
+  min-height: var(--nvb-control-height-sm);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.nvb-root .nvb-control__add-row-button--compact span {
+  font-size: 16px;
+}
+
+.nvb-root .nvb-control__add-row-button--link {
+  min-height: 26px;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--nvb-color-primary-600);
+  border-radius: var(--nvb-radius-md);
+  font-size: 14px;
+  font-weight: 600;
+  justify-content: flex-start;
+}
+
+.nvb-root .nvb-control__add-row-button--link:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--nvb-color-primary-700);
+}
+
+.nvb-root .nvb-control__add-row-button--link.nvb-control__add-row-button--compact {
+  padding: 0 2px;
+  font-size: 12px;
+}
+
+.nvb-root .nvb-control__add-row-button nvb-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.nvb-root .nvb-button__label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nvb-root .nvb-icon-button {
+  width: var(--nvb-button-height-ms);
+  min-width: var(--nvb-button-height-ms);
+  height: var(--nvb-button-height-ms);
+  min-height: var(--nvb-button-height-ms);
+  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-800);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    color 0.16s ease,
+    opacity 0.16s ease,
+    box-shadow 0.16s ease;
+  box-shadow: none;
+}
+
+.nvb-root .nvb-icon-button:hover:not(:disabled) {
+  background: var(--nvb-color-neutral-050);
+  border-color: var(--nvb-color-neutral-400);
+  color: var(--nvb-color-neutral-900);
+}
+
+.nvb-root .nvb-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+.nvb-root .nvb-icon-button--lg {
+  width: var(--nvb-button-height-lg);
+  min-width: var(--nvb-button-height-lg);
+  height: var(--nvb-button-height-lg);
+  min-height: var(--nvb-button-height-lg);
+}
+
+.nvb-root .nvb-icon-button--sm {
+  width: var(--nvb-button-height-sm);
+  min-width: var(--nvb-button-height-sm);
+  height: var(--nvb-button-height-sm);
+  min-height: var(--nvb-button-height-sm);
+}
+
+.nvb-root .nvb-icon-button--sx,
+.nvb-root .nvb-icon-button--xs {
+  width: var(--nvb-button-height-sx);
+  min-width: var(--nvb-button-height-sx);
+  height: var(--nvb-button-height-sx);
+  min-height: var(--nvb-button-height-sx);
+  border-radius: var(--nvb-radius-md);
+}
+
+.nvb-root .nvb-icon-button--danger {
+  border-color: var(--nvb-button-danger-border-color);
+  background: var(--nvb-button-danger-bg);
+  color: var(--nvb-button-danger-text-color);
+}
+
+.nvb-root .nvb-icon-button--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.nvb-root .nvb-icon-button--ghost:hover:not(:disabled) {
+  border-color: transparent;
+  background: color-mix(in oklab, var(--nvb-color-neutral-100) 72%, var(--nvb-color-neutral-000));
+  color: var(--nvb-color-neutral-800);
+}
+
+.nvb-root .nvb-icon-button--drag {
+  cursor: grab;
+}
+
+.nvb-root .nvb-icon-button--drag:active {
+  cursor: grabbing;
+  transform: scale(0.98);
+}
+
+.nvb-root .nvb-icon-button span,
+.nvb-root .nvb-icon-button nvb-icon,
+.nvb-root .nvb-control__add-row-button nvb-icon,
+.nvb-root .nvb-control__add-row-button .nvb-icon-svg {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.nvb-root .nvb-icon-button--sx span,
+.nvb-root .nvb-icon-button--sx nvb-icon,
+.nvb-root .nvb-icon-button--xs span,
+.nvb-root .nvb-icon-button--xs nvb-icon {
+  font-size: 15px;
+}
+
+.nvb-root .nvb-search-field {
+  position: relative;
+}
+
+.nvb-root .nvb-search-field .nvb-search-field__icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--nvb-color-neutral-500);
+  font-size: 16px;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.nvb-root .nvb-search-field .nvb-search-field__input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  min-height: 32px;
+  padding: 0 32px 0 36px;
+  border: 1px solid var(--nvb-color-neutral-300);
+  border-radius: var(--nvb-input-radius, var(--nvb-radius-md));
+  background: var(--nvb-color-neutral-000);
+  color: var(--nvb-color-neutral-800);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  box-shadow: none;
+  transition:
+    border-color 0.12s ease,
+    background-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.nvb-root .nvb-search-field.nvb-search-field--no-icon .nvb-search-field__input {
+  padding-left: 12px;
+}
+
+.nvb-root .nvb-search-field .nvb-search-field__input::placeholder {
+  color: var(--nvb-color-neutral-400);
+  font-weight: 400;
+}
+
+.nvb-root .nvb-search-field .nvb-search-field__input:focus,
+.nvb-root .nvb-search-field .nvb-search-field__input:focus-visible {
+  outline: none;
+  border-color: var(--nvb-color-primary-500);
+  box-shadow: var(--nvb-focus-ring);
+}
+
+.nvb-root .nvb-search-field .nvb-search-field__clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  color: var(--nvb-color-neutral-500);
+}