@cbpds/web-components
Version:
Web components for the CBP Design System.
141 lines (140 loc) • 5.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpToast {
constructor() {
this.color = 'info';
this.duration = undefined;
this.open = undefined;
this.context = undefined;
this.sx = {};
}
watchOpenHandler(newValue) {
if (!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" })))));
}
static get is() { return "cbp-toast"; }
static get originalStyleUrls() {
return {
"$": ["cbp-toast.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-toast.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'info' | 'danger' | 'success' | 'warning'",
"resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "specifies the color for the toast"
},
"attribute": "color",
"reflect": true,
"defaultValue": "'info'"
},
"duration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "3 | 5 | 10",
"resolved": "10 | 3 | 5",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "specifies time in seconds for the toast to be displayed"
},
"attribute": "duration",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set, specifies that the toast is open"
},
"attribute": "open",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "watchOpenHandler"
}];
}
}
//# sourceMappingURL=cbp-toast.js.map