@cbpds/web-components
Version:
Web components for the CBP Design System.
37 lines (33 loc) • 6.67 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-31e2d0a8.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpToastCss = ":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 CbpToastStyle0 = cbpToastCss;
const CbpToast = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
if (this.open && this.duration) {
setTimeout(() => { this.open = false; }, this.duration * 1000);
}
return (h(Host, { key: 'be34a48b2627259a379da3b6aa4cae0816995b68' }, h("div", { key: '5c6f12175274d161d6307f37199888e82b239657', class: "cbp-toast-sidebar" }, h("slot", { key: '98bfe4a01edfaa6efcaa23c29eda61f91378b135', name: "cbp-toast-icon" })), h("div", { key: '2cbd30bcdc302aef9c80efdb02a32574033ce755', class: "cbp-toast-container" }, h("div", { key: 'ff73bc8b8838e4c35f0f7fbefb0d939cc17b075c', class: "cbp-toast-title" }, h("slot", { key: '413e1b8f65cb57be868bac4c99348b0dfe541553', name: "cbp-toast-title" })), h("div", { key: 'a3875679be76d28f6a261623336c8665b7a78414', class: "cbp-toast-content" }, h("slot", { key: 'ad1a1cd280978399c8d7dbdd0b1b55c633692c9d' })), h("div", { key: '27b63792abdd5aafb564e427e2cc2fb08bedb0aa', class: "cbp-toast-button-bar" }, h("slot", { key: 'd76b437f1a598ce61f276f4dbcb58be5425b5995', name: "cbp-toast-buttons" })))));
}
get host() { return getElement(this); }
};
CbpToast.style = CbpToastStyle0;
export { CbpToast as cbp_toast };
//# sourceMappingURL=cbp-toast.entry.js.map