@cbpds/web-components
Version:
Web components for the CBP Design System.
131 lines (130 loc) • 5.27 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 = {};
}
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" })))));
}
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"; }
}
//# sourceMappingURL=cbp-toast.js.map