@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 r,c}from"./p-e7f1ba21.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 s=b;const e=o(class o extends t{constructor(){super();this.__registerHost();this.color="info";this.duration=undefined;this.open=undefined;this.context=undefined;this.sx={}}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 r(c,{key:"be34a48b2627259a379da3b6aa4cae0816995b68"},r("div",{key:"5c6f12175274d161d6307f37199888e82b239657",class:"cbp-toast-sidebar"},r("slot",{key:"98bfe4a01edfaa6efcaa23c29eda61f91378b135",name:"cbp-toast-icon"})),r("div",{key:"2cbd30bcdc302aef9c80efdb02a32574033ce755",class:"cbp-toast-container"},r("div",{key:"ff73bc8b8838e4c35f0f7fbefb0d939cc17b075c",class:"cbp-toast-title"},r("slot",{key:"413e1b8f65cb57be868bac4c99348b0dfe541553",name:"cbp-toast-title"})),r("div",{key:"a3875679be76d28f6a261623336c8665b7a78414",class:"cbp-toast-content"},r("slot",{key:"ad1a1cd280978399c8d7dbdd0b1b55c633692c9d"})),r("div",{key:"27b63792abdd5aafb564e427e2cc2fb08bedb0aa",class:"cbp-toast-button-bar"},r("slot",{key:"d76b437f1a598ce61f276f4dbcb58be5425b5995",name:"cbp-toast-buttons"}))))}get host(){return this}static get style(){return s}},[4,"cbp-toast",{color:[513],duration:[2],open:[516],context:[513],sx:[8]}]);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,e)}break}}))}const i=e;const d=p;export{i as CbpToast,d as defineCustomElement};
//# sourceMappingURL=cbp-toast.js.map