v4web-components/dist/stencil-library/p-c1fe0f4d.entry.js

Stencil Component Starter

import{r as s,c as e,h as a}from"./p-c2aeec95.js";const t=".v4-toast{position:absolute;top:3rem;right:1rem}.v4-toast-container{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-top-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:var(--lab-ds-semantic-selectable-border-width-s);border-right-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-style:solid;box-shadow:var(--lab-ds-semantic-selectable-shadow-m)}.toast-body{display:flex;justify-content:space-between;align-items:center;padding:var(--lab-ds-semantic-selectable-space-padding-s)}.small .v4-toast-progress-small{height:0.25rem;width:0%;margin-bottom:-1px;border-radius:0 var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs);animation:progress-small 10s normal 10ms}@keyframes progress-small{0%{width:0%}100%{width:100%}}.small .toast-icon-message{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.toast-title{display:flex;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.toast-title .title{font:var(--lab-ds-semantic-typography-heading-h6)}.toast-message{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.toast-close{position:relative;z-index:10;cursor:pointer}.close-icon{display:flex;align-items:center;justify-content:center;position:absolute;border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);padding:var(--lab-ds-semantic-selectable-space-padding-xxs);background-color:var(--lab-ds-semantic-selectable-color-bg-pure);box-shadow:var(--lab-ds-semantic-selectable-shadow-m);right:-0.5rem;top:-0.5rem}.medium .v4-toast-container{display:flex;flex-direction:row;height:9rem;border-top-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:var(--lab-ds-semantic-selectable-border-width-l);border-right-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s)}.medium .toast-body{gap:var(--lab-ds-semantic-selectable-space-gap-m);flex-direction:column;align-items:end}.medium .toast-icon-message{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-m)}.medium .toast-message{padding-left:var(--lab-ds-semantic-selectable-space-padding-xl);padding-right:var(--lab-ds-semantic-selectable-space-padding-l)}.success .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);background-color:var(--lab-ds-semantic-selectable-color-bg-light-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.error .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);background-color:var(--lab-ds-semantic-selectable-color-bg-light-error);color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.warning .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-warning);background-color:var(--lab-ds-semantic-selectable-color-bg-light-warning);color:var(--lab-ds-semantic-selectable-color-bg-dark-warning)}.success.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-success)}.error.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-error)}.warning.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-warning)}";const r=class{constructor(a){s(this,a);this.closeToast=e(this,"closeToast",7);this.states={success:{icon:"check_circle"},error:{icon:"error"},warning:{icon:"warning"}};this.message=undefined;this.label=undefined;this.action=undefined;this.actionLabel=undefined;this.state="success";this.size="small";this.openToast=false;this.isOpen=false}watchPropHandler(){this.isOpen=this.openToast;if(this.size==="medium"){return}this.timeOut=setTimeout((()=>{this.closeToast.emit(false);this.isOpen=false}),1e4)}handleClose(){this.closeToast.emit(false);this.isOpen=false}render(){return this.isOpen&&a("div",{class:`v4-toast ${this.size} ${this.state}`},a("div",{class:"toast-close"},a("lab-ds-icon-not-selectable",{onClick:()=>{this.handleClose()},class:"close-icon",icon:"close",size:"x-small"})),a("div",{class:"v4-toast-container"},a("div",{class:"toast-body"},a("div",{class:"toast-icon-message"},a("div",{class:"toast-title"},a("lab-ds-icon-not-selectable",{icon:this.states[this.state].icon,size:"s-medium"}),this.label&&this.size==="medium"&&a("span",{class:"title"},this.label)),a("div",{class:"toast-message"},this.message)),this.action&&a("div",{class:"toast-action"},a("lab-ds-button",{size:"small",variant:"link-button",onClick:this.action,label:this.actionLabel}))),this.size==="small"&&a("div",{class:"v4-toast-progress-small"})))}static get watchers(){return{openToast:["watchPropHandler"]}}};r.style=t;export{r as lab_ds_toast};
//# sourceMappingURL=p-c1fe0f4d.entry.js.map