@cbpds/web-components
Version:
Web components for the CBP Design System.
42 lines (38 loc) • 6.79 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-0f6e3adc.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 = {};
}
watchOpenHandler(newValue) {
}
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: '2f8a0804f6b9d4d63dc78af4a08064420ce19438' }, h("div", { key: 'c9a76f49dc3ac7ad2c35342de987c586d32bc661', class: "cbp-toast-sidebar" }, h("slot", { key: '5cf67c8889f2128aad083c1ec12f20e0a1fd54b7', name: "cbp-toast-icon" })), h("div", { key: 'de375a618d5aee47398ae035d213565b77462292', class: "cbp-toast-container" }, h("div", { key: '3bc704d4203dff8e9269d137454a6255a6e77393', class: "cbp-toast-title" }, h("slot", { key: 'ba2fe1e08cd25d9de4e217fc8d23cea7ecb72471', name: "cbp-toast-title" })), h("div", { key: '0b8bab270ce3b69f387830cea612665782ca46d6', class: "cbp-toast-content" }, h("slot", { key: 'aae991b3c0bc4fa60560d295d4557250be8ff8a3' })), h("div", { key: '652da1cd6419fe18890e6a7c38a5d0e4444df930', class: "cbp-toast-button-bar" }, h("slot", { key: '8d81e7db55f1bc5a0c4a1d1a4b4754f0e24b8252', name: "cbp-toast-buttons" })))));
}
get host() { return getElement(this); }
static get watchers() { return {
"open": ["watchOpenHandler"]
}; }
};
CbpToast.style = CbpToastStyle0;
export { CbpToast as cbp_toast };
//# sourceMappingURL=cbp-toast.entry.js.map