@cbpds/web-components/dist/components/cbp-toast.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as o,H as t,h as c,c as r}from"./p-9caf8482.js";import{s as a}from"./p-9c1b2f31.js";const b=":root{--cbp-toast-color-bg:var(--cbp-color-info-dark);--cbp-toast-color-bg-dark:var(--cbp-color-info-lighter);--cbp-toast-color:var(--cbp-color-text-lighter);--cbp-toast-color-dark:var(--cbp-color-text-darker);--cbp-toast-color-content:var(--cbp-color-text-lightest);--cbp-toast-color-content-dark:var(--cbp-color-text-darkest);--cbp-toast-color-bg-sidebar:var(--cbp-color-info-darker);--cbp-toast-color-bg-sidebar-dark:var(--cbp-color-info-light);--cbp-toast-color-icon-sidebar:var(--cbp-color-text-light);--cbp-toast-color-icon-sidebar-dark:var(--cbp-color-text-darker)}[data-cbp-theme=light] cbp-toast[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-toast:not([context=dark-inverts]):not([context=light-always]){--cbp-toast-color-bg:var(--cbp-toast-color-bg-dark);--cbp-toast-color:var(--cbp-toast-color-dark);--cbp-toast-color-content:var(--cbp-toast-color-content-dark);--cbp-toast-color-bg-sidebar:var(--cbp-toast-color-bg-sidebar-dark);--cbp-toast-color-icon-sidebar:var(--cbp-toast-color-icon-sidebar-dark)}@keyframes show{0%{opacity:1;transform:translateX(100%)}}@keyframes dismiss{99%{transform:translateX(200%)}100%{visibility:hidden}}cbp-toast{display:flex;margin-inline-start:auto;margin-block-end:var(--cbp-space-6x);width:min(100%, 30rem);background-color:var(--cbp-toast-color-bg);color:var(--cbp-toast-color);box-shadow:0px 0px 18px 2px rgba(0, 0, 0, 0.3);border-radius:var(--cbp-border-radius-softer);animation:show 600ms 100ms ease-in-out forwards}cbp-toast:not([open]){animation:dismiss 1s ease-in-out forwards}cbp-toast .cbp-toast-sidebar{--cbp-icon-size:var(--cbp-space-8x);display:flex;width:var(--cbp-space-13x);justify-content:center;align-items:center;padding:var(--cbp-space-4x);background-color:var(--cbp-toast-color-bg-sidebar);border-top-left-radius:var(--cbp-border-radius-softer);border-bottom-left-radius:var(--cbp-border-radius-softer)}cbp-toast .cbp-toast-sidebar cbp-icon{--cbp-icon-color:var(--cbp-toast-color-icon-sidebar)}cbp-toast .cbp-toast-title{font-weight:var(--cbp-font-weight-medium);font-size:var(--cbp-font-size-heading-sm);line-height:var(--cbp-line-height-sm);padding:var(--cbp-space-3x) var(--cbp-space-3x) 0 var(--cbp-space-3x)}cbp-toast .cbp-toast-container{width:100%}cbp-toast .cbp-toast-content{font-weight:var(--cbp-font-weight-regular);font-size:var(--cbp-font-size-body);line-height:var(--cbp-line-height-xs);color:var(--cbp-toast-color-content);padding:0 var(--cbp-space-3x) 0 var(--cbp-space-3x)}cbp-toast .cbp-toast-button-bar{display:flex;justify-content:center;padding-top:var(--cbp-space-3x)}cbp-toast .cbp-toast-button-bar>div{display:flex;flex:1 1 100%}cbp-toast .cbp-toast-button-bar cbp-button[fill=ghost][color=secondary]{--cbp-button-color:var(--cbp-toast-color);--cbp-button-color-dark:var(--cbp-toast-color-dark);--cbp-button-width:100%;--cbp-button-border-radius:var(--cbp-border-radius-sharp);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-toast .cbp-toast-button-bar cbp-button[fill=ghost][color=secondary]:last-child{--cbp-button-border-radius:0 0 var(--cbp-border-radius-softer) 0}cbp-toast[color=info]{--cbp-toast-color-bg:var(--cbp-color-info-dark);--cbp-toast-color-bg-dark:var(--cbp-color-info-lighter);--cbp-toast-color-bg-sidebar:var(--cbp-color-info-darker);--cbp-toast-color-bg-sidebar-dark:var(--cbp-color-info-light)}cbp-toast[color=success]{--cbp-toast-color-bg:var(--cbp-color-success-base);--cbp-toast-color-bg-dark:var(--cbp-color-success-lighter);--cbp-toast-color-bg-sidebar:var(--cbp-color-success-darker);--cbp-toast-color-bg-sidebar-dark:var(--cbp-color-success-light)}cbp-toast[color=warning]{--cbp-toast-color-bg:var(--cbp-color-warning-base);--cbp-toast-color-bg-dark:var(--cbp-color-warning-lighter);--cbp-toast-color-bg-sidebar:var(--cbp-color-warning-darker);--cbp-toast-color-bg-sidebar-dark:var(--cbp-color-warning-base);--cbp-toast-color:var(--cbp-color-text-darker);--cbp-toast-color-dark:var(--cbp-color-text-darkest);--cbp-toast-color-content:var(--cbp-color-text-darker);--cbp-toast-color-content-dark:var(--cbp-color-text-darker);--cbp-toast-color-icon-sidebar-dark:var(--cbp-color-text-darker)}cbp-toast[color=danger]{--cbp-toast-color-bg:var(--cbp-color-danger-dark);--cbp-toast-color-bg-dark:var(--cbp-color-danger-lighter);--cbp-toast-color-bg-sidebar:var(--cbp-color-danger-darker);--cbp-toast-color-bg-sidebar-dark:var(--cbp-color-danger-light)}";const e=b;const s=o(class o extends t{constructor(){super();this.__registerHost();this.color="info";this.duration=undefined;this.open=undefined;this.context=undefined;this.sx={}}watchOpenHandler(o){}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx))}render(){if(this.open&&this.duration){setTimeout((()=>{this.open=false}),this.duration*1e3)}return c(r,{key:"4c4329f54a2fab59e848777b0d483a471ac005f4"},c("div",{key:"37b6a3f69ee9af342aa427fac069d4be77d52bbb",class:"cbp-toast-sidebar"},c("slot",{key:"9ce4b23fedc6409c1a29c557de8a4e456d7075cd",name:"cbp-toast-icon"})),c("div",{key:"639e8f72e68504d2f1c59303130febaa8bcf13af",class:"cbp-toast-container"},c("div",{key:"367719e88609b266caf1b3a4ffb1f025b840bc4f",class:"cbp-toast-title"},c("slot",{key:"57e4ae7cbc4230cd020f817f3fba4ee68a5f9ae4",name:"cbp-toast-title"})),c("div",{key:"467dc4307f112d8c11a3f7add04bc1f414b5fce8",class:"cbp-toast-content"},c("slot",{key:"c483a7c94494892cba7fe1c9725dcea3402b0b91"})),c("div",{key:"faeae5ce2284b63c75bd2cc65a9398a72d0ec3f7",class:"cbp-toast-button-bar"},c("slot",{key:"8c39feab1a42da972009dbaa65d788434330cd46",name:"cbp-toast-buttons"}))))}get host(){return this}static get watchers(){return{open:["watchOpenHandler"]}}static get style(){return e}},[4,"cbp-toast",{color:[513],duration:[2],open:[516],context:[513],sx:[8]},undefined,{open:["watchOpenHandler"]}]);function p(){if(typeof customElements==="undefined"){return}const o=["cbp-toast"];o.forEach((o=>{switch(o){case"cbp-toast":if(!customElements.get(o)){customElements.define(o,s)}break}}))}const i=s;const n=p;export{i as CbpToast,n as defineCustomElement};
//# sourceMappingURL=cbp-toast.js.map