@ngxviewbuilder/runtime 0.6.0 → 0.8.0

package/README.md

@@ -64,41 +64,6 @@ export class RegistrationComponent {
 
 That is the whole setup. Theming, languages, data sources, custom elements, expressions and the `NgxViewBuilderApiService` are covered in the [developer guide](https://ngxviewbuilder.io/developers/).
 
-## Upgrading from `ngx-view-builder`
-
-That package was one library containing both halves, so every production build shipped the editor. From 0.5.0 it is two packages.
-
-```bash
-npm rm ngx-view-builder
-npm i @ngxviewbuilder/runtime
-```
-
-Change the import source and the stylesheet path; selectors, inputs, outputs and saved JSON are unchanged, and older views migrate automatically on load.
-
-```diff
--import { NgxViewBuilderRuntime } from 'ngx-view-builder';
-+import { NgxViewBuilderRuntime } from '@ngxviewbuilder/runtime';
-```
-
-```diff
--@import 'ngx-view-builder/styles/index.css';
-+@import '@ngxviewbuilder/runtime/styles/index.css';
-```
-
-## Upgrading from 0.5.x
-
-The package moved to the `@ngxviewbuilder` scope in 0.6.0. Nothing else changed — selectors, class names, inputs, outputs, providers and saved view JSON are identical.
-
-```bash
-npm rm ngx-view-builder-runtime
-npm i @ngxviewbuilder/runtime
-```
-
-```diff
--import { ... } from 'ngx-view-builder-runtime';
-+import { ... } from '@ngxviewbuilder/runtime';
-```
-
 ## Documentation
 
 https://ngxviewbuilder.io

package/fesm2022/ngxviewbuilder-runtime-avatar-element-DAS1xicD.mjs

@@ -0,0 +1 @@
+import{NgStyle as o}from"@angular/common";import*as n from"@angular/core";import{input as d,signal as s,inject as v,computed as l,ChangeDetectionStrategy as m,Component as u}from"@angular/core";import{c as g,E as b,a as p,D as c}from"./ngxviewbuilder-runtime-ngxviewbuilder-runtime-vepMpo7v.mjs";class i{model=d.required(...ngDevMode?[{debugName:"model"}]:[]);tid=g(this.model,"nvb-avatar","avatar");previewOpen=s(false,...ngDevMode?[{debugName:"previewOpen"}]:[]);previewSrc=s("",...ngDevMode?[{debugName:"previewSrc"}]:[]);elementActionService=v(b);avatarStyle=l(()=>{const e=Number(this.model()?.size);const a=Number.isFinite(e)&&e>0?Math.floor(e):48;const t=String(this.model()?.shape??"circle").trim().toLowerCase();return{width:`${a}px`,height:`${a}px`,"border-radius":t==="square"?"10px":"999px","background-color":String(this.model()?.backgroundColor??"#dfe6ff").trim()||"#dfe6ff",color:String(this.model()?.textColor??"#1b2d6b").trim()||"#1b2d6b",border:this.model().showBorder?"1px solid var(--nvb-color-neutral-300)":"none"}},...ngDevMode?[{debugName:"avatarStyle"}]:[]);initials=l(()=>{const e=String(this.model()?.nameText??"").trim();if(!e){return"U"}const a=e.split(/\s+/).map(t=>t.trim()).filter(t=>t.length>0);if(!a.length){return"U"}return a.slice(0,2).map(t=>t[0].toUpperCase()).join("")},...ngDevMode?[{debugName:"initials"}]:[]);onAvatarClick(e,a){a.preventDefault();a.stopPropagation();const t={value:e||this.initials(),item:null,row:null};const r=String(this.model().name??"").trim();if(r){t[r]=t["value"]}void this.elementActionService.runActions(this.model(),this.model().events??[],"click",t);if(!this.model().showPreview||!e){return}this.previewSrc.set(e);this.previewOpen.set(true)}closePreview(e){e?.preventDefault();e?.stopPropagation();this.previewOpen.set(false);this.previewSrc.set("")}static ɵfac=n.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.4",ngImport:n,type:i,deps:[],target:n.ɵɵFactoryTarget.Component});static ɵcmp=n.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.4",type:i,isStandalone:true,selector:"avatar-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:n,template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:8px;background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"],dependencies:[{kind:"component",type:p,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:o,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"pipe",type:c,name:"dynamicText"}],changeDetection:n.ChangeDetectionStrategy.OnPush})}n.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.4",ngImport:n,type:i,decorators:[{type:u,args:[{selector:"avatar-element",changeDetection:m.OnPush,imports:[p,o,c],template:"<element-wrapper [model]=\"model()\">\n  @let avatarSrc = model().src | dynamicText: model();\n  @let avatarName = model().nameText | dynamicText: model();\n\n  <div class=\"nvb-avatar-wrap\" [attr.data-testid]=\"tid('root')\">\n    <button\n      type=\"button\"\n      class=\"nvb-avatar\"\n      [ngStyle]=\"avatarStyle()\"\n      (click)=\"onAvatarClick(avatarSrc, $event)\"\n    >\n      @if (avatarSrc) {\n        <img [src]=\"avatarSrc\" [alt]=\"avatarName\" />\n      } @else {\n        <span>{{ initials() }}</span>\n      }\n    </button>\n  </div>\n\n  @if (previewOpen()) {\n    <div class=\"nvb-avatar-preview\" (click)=\"closePreview()\">\n      <button type=\"button\" class=\"nvb-avatar-preview__close\" (click)=\"closePreview($event)\">\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n      <img [src]=\"previewSrc()\" [alt]=\"avatarName\" />\n    </div>\n  }\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-avatar-wrap{width:100%;display:flex;justify-content:flex-start;align-items:center}.nvb-avatar{border:none;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;line-height:1}.nvb-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nvb-avatar-preview{position:fixed;inset:0;background:#000000b8;z-index:1300;display:grid;place-items:center;padding:20px}.nvb-avatar-preview img{width:min(300px,100vw - 40px);height:min(300px,100vw - 40px);object-fit:cover;border-radius:14px;box-shadow:0 16px 32px #0000004d;background:#fff}.nvb-avatar-preview__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:8px;background:#ffffff2e;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-avatar-preview__close span{font-size:20px}\n"]}]}],propDecorators:{model:[{type:n.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{i as AvatarElement};

package/fesm2022/ngxviewbuilder-runtime-breadcrumbs-element-B9KByh0C.mjs

@@ -0,0 +1 @@
+import*as s from"@angular/core";import{input as y,inject as p,signal as S,computed as v,ChangeDetectionStrategy as x,Component as w}from"@angular/core";import{Router as I,NavigationEnd as _}from"@angular/router";import{get as k}from"lodash-es";import{filter as T}from"rxjs";import{c as C,E as R,M as D,U as L,a as f,N as h,D as g}from"./ngxviewbuilder-runtime-ngxviewbuilder-runtime-vepMpo7v.mjs";class d{model=y.required(...ngDevMode?[{debugName:"model"}]:[]);tid=C(this.model,"nvb-breadcrumbs","breadcrumbs");elementActionService=p(R);markupSecurityService=p(D);uiTranslationService=p(L);router=p(I,{optional:true});routeRefresh=S(0,...ngDevMode?[{debugName:"routeRefresh"}]:[]);navigationSubscription=null;ngOnInit(){if(!this.router){return}this.navigationSubscription=this.router.events.pipe(T(t=>t instanceof _)).subscribe(()=>{this.routeRefresh.update(t=>t+1)})}ngOnDestroy(){this.navigationSubscription?.unsubscribe();this.navigationSubscription=null}renderedItems=v(()=>{this.routeRefresh();const t=this.resolveSourceItems();const e=[];if(this.model().showHome){const n=String(this.model()?.homeLabel??"").trim();e.push({label:n||this.uiTranslationService.translate("breadcrumbs.home","Home"),value:String(this.model()?.homeUrl??"/").trim()||"/"})}e.push(...t);const r=Number(this.model()?.maxItems??0);const i=Number.isFinite(r)&&r>0?Math.floor(r):0;if(i>0&&e.length>i&&i>=2){const n=e[0];const a=e.slice(e.length-(i-1));return[n,{label:"...",value:"",ellipsis:true},...a]}return e},...ngDevMode?[{debugName:"renderedItems"}]:[]);separatorIcon=v(()=>{const t=String(this.model()?.separator??"").trim();return t||"chevron_right"},...ngDevMode?[{debugName:"separatorIcon"}]:[]);resolveItemHref(t){return this.markupSecurityService.sanitizeNavigationUrl(String(t??""))}onItemClick(t,e,r){if(t.ellipsis){r.preventDefault();return}const i=Array.isArray(this.model().events)&&this.model().events.length>0;if(i){r.preventDefault()}else{const o=r.currentTarget instanceof HTMLAnchorElement?String(r.currentTarget.getAttribute("href")??"").trim():"";if(o.startsWith("/")&&this.router){r.preventDefault();this.router.navigateByUrl(o).catch(()=>{if(typeof window!=="undefined"&&typeof window.location?.assign==="function"){window.location.assign(o)}});return}}const n={item:t,row:t,index:e,value:t.value};const a=String(this.model().name??"").trim();if(a){n[a]=t.value}void this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}resolveSourceItems(){if(this.model()?.itemsSource==="route"){return this.buildRouteItems()}return Array.isArray(this.model()?.items)?[...this.model().items]:[]}buildRouteItems(){const t=this.router?.routerState?.snapshot?.root??null;if(!t){return[]}const e=String(this.model()?.routeLabelDataKey??"breadcrumb").trim()||"breadcrumb";const r=this.model()?.routeUsePathFallback!==false;const i=this.model()?.routeIncludeCurrent!==false;const n=this.resolveLeafSnapshot(t);const a=[];const o=[];for(const m of n.pathFromRoot){const c=m.url.map(l=>String(l?.path??"").trim()).filter(Boolean);if(c.length>0){a.push(...c)}const u=this.resolveRouteItem(m,a,e,r);if(u){o.push(u)}}if(!i&&o.length>0){o.pop()}return o}resolveLeafSnapshot(t){let e=t;while(e.firstChild){e=e.firstChild}return e}resolveRouteItem(t,e,r,i){const n=this.resolveRouteBreadcrumbConfig(t,r);if(n?.skip){return null}const a=i?this.resolveFallbackRouteLabel(t):"";const o=this.resolveRouteTemplate(String(n?.label??a??"").trim(),t,e);if(!o){return null}const m=this.resolveRouteTemplate(String(n?.value??"").trim(),t,e);const c=e.length>0?`/${e.join("/")}`:"/";return{label:o,value:m||c}}resolveRouteBreadcrumbConfig(t,e){const r=t.data?.[e];if(r===false||r===null){return{skip:true}}if(typeof r==="string"){const n=r.trim();return n?{label:n}:null}if(!r||typeof r!=="object"||Array.isArray(r)){return null}const i=r;return{label:String(i["label"]??"").trim()||void 0,value:String(i["value"]??"").trim()||void 0,skip:Boolean(i["skip"])}}resolveFallbackRouteLabel(t){const e=String(t.data?.["title"]??"").trim();if(e){return e}const r=t.url.map(n=>this.humanizeSegment(String(n?.path??"").trim())).filter(Boolean).join(" / ");if(r){return r}const i=String(t.routeConfig?.path??"").trim();if(i.startsWith(":")){const n=i.slice(1).split("/")[0];const a=String(t.params?.[n]??"").trim();if(a){return a}}return""}humanizeSegment(t){const e=decodeURIComponent(String(t??"").trim());if(!e){return""}return e.replace(/[-_]+/g," ").replace(/\s+/g," ").trim().replace(/\b\w/g,r=>r.toUpperCase())}resolveRouteTemplate(t,e,r){const i=String(t??"").trim();if(!i){return""}const n=r.length>0?`/${r.join("/")}`:"/";const a=String(e.params?.["id"]??e.paramMap.get("id")??"").trim()||void 0;const o={route:{id:a,url:n,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{},fragment:e.fragment??"",path:String(e.routeConfig?.path??"").trim()},id:a,url:n,params:e.params??{},queryParams:e.queryParams??{},data:e.data??{}};const m=u=>{const l=String(u??"").trim();if(!l){return""}const b=k(o,l);if(b===null||b===void 0){return""}return String(b)};const c=i.replace(/\{\{([^}]+)\}\}/g,(u,l)=>m(l));return c.replace(/\{([^}]+)\}/g,(u,l)=>m(l))}static ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.4",ngImport:s,type:d,deps:[],target:s.ɵɵFactoryTarget.Component});static ɵcmp=s.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.4",type:d,isStandalone:true,selector:"breadcrumbs-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:s,template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"],dependencies:[{kind:"component",type:f,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:h,selector:"nvb-icon",inputs:["name","svg","ariaLabel"]},{kind:"pipe",type:g,name:"dynamicText"}],changeDetection:s.ChangeDetectionStrategy.OnPush})}s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.4",ngImport:s,type:d,decorators:[{type:w,args:[{selector:"breadcrumbs-element",changeDetection:x.OnPush,imports:[f,g,h],template:"<element-wrapper [model]=\"model()\">\n  <nav class=\"nvb-breadcrumbs\" aria-label=\"Breadcrumbs\" [attr.data-testid]=\"tid('root')\">\n    <ol>\n      @for (item of renderedItems(); track $index; let itemIndex = $index; let isLast = $last) {\n        <li>\n          @if (item.ellipsis) {\n            <span class=\"nvb-breadcrumbs__ellipsis\">...</span>\n          } @else if (!isLast && item.value) {\n            <a\n              [attr.href]=\"resolveItemHref(item.value | dynamicText: model())\"\n              (click)=\"onItemClick(item, itemIndex, $event)\"\n            >\n              {{ item.label | dynamicText: model() }}\n            </a>\n          } @else {\n            <span class=\"nvb-breadcrumbs__current\">{{ item.label | dynamicText: model() }}</span>\n          }\n\n          @if (!isLast) {\n            <nvb-icon class=\"nvb-breadcrumbs__separator\" [name]=\"separatorIcon()\"></nvb-icon>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n</element-wrapper>\n",styles:[":host{display:block;width:100%}.nvb-breadcrumbs{width:100%}.nvb-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.nvb-breadcrumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}.nvb-breadcrumbs a,.nvb-breadcrumbs__current,.nvb-breadcrumbs__ellipsis{font-size:12px;line-height:1.3;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nvb-breadcrumbs a{color:var(--nvb-color-primary-700);cursor:pointer}.nvb-breadcrumbs a:hover{text-decoration:underline}.nvb-breadcrumbs__current{color:var(--nvb-color-neutral-700);font-weight:600}.nvb-breadcrumbs__ellipsis{color:var(--nvb-color-neutral-500)}.nvb-breadcrumbs__separator{font-size:14px;color:var(--nvb-color-neutral-500)}\n"]}]}],propDecorators:{model:[{type:s.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{d as BreadcrumbsElement};

package/fesm2022/ngxviewbuilder-runtime-icon-element-tddO2k9Y.mjs

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