@cbpds/web-components
Version:
Web components for the CBP Design System.
46 lines (40 loc) • 6.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.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) {
index.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) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
if (this.open && this.duration) {
setTimeout(() => { this.open = false; }, this.duration * 1000);
}
return (index.h(index.Host, { key: '4c4329f54a2fab59e848777b0d483a471ac005f4' }, index.h("div", { key: '37b6a3f69ee9af342aa427fac069d4be77d52bbb', class: "cbp-toast-sidebar" }, index.h("slot", { key: '9ce4b23fedc6409c1a29c557de8a4e456d7075cd', name: "cbp-toast-icon" })), index.h("div", { key: '639e8f72e68504d2f1c59303130febaa8bcf13af', class: "cbp-toast-container" }, index.h("div", { key: '367719e88609b266caf1b3a4ffb1f025b840bc4f', class: "cbp-toast-title" }, index.h("slot", { key: '57e4ae7cbc4230cd020f817f3fba4ee68a5f9ae4', name: "cbp-toast-title" })), index.h("div", { key: '467dc4307f112d8c11a3f7add04bc1f414b5fce8', class: "cbp-toast-content" }, index.h("slot", { key: 'c483a7c94494892cba7fe1c9725dcea3402b0b91' })), index.h("div", { key: 'faeae5ce2284b63c75bd2cc65a9398a72d0ec3f7', class: "cbp-toast-button-bar" }, index.h("slot", { key: '8c39feab1a42da972009dbaa65d788434330cd46', name: "cbp-toast-buttons" })))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"open": ["watchOpenHandler"]
}; }
};
CbpToast.style = CbpToastStyle0;
exports.cbp_toast = CbpToast;
//# sourceMappingURL=cbp-toast.cjs.entry.js.map