@ngxviewbuilder/runtime 0.7.0 → 0.9.0

package/fesm2022/ngxviewbuilder-runtime-toast-element-CNuDVfas.mjs

@@ -1 +0,0 @@
-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"./ngxviewbuilder-runtime-ngxviewbuilder-runtime-CY_sp0Pm.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};