v4web-components
Version:
Stencil Component Starter
204 lines (203 loc) • 5.49 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsToast {
constructor() {
this.states = {
success: { icon: 'check_circle' },
error: { icon: 'error' },
warning: { icon: 'warning' },
};
this.message = undefined;
this.label = undefined;
this.action = undefined;
this.actionLabel = undefined;
this.state = 'success';
this.size = 'small';
this.openToast = false;
this.isOpen = false;
}
watchPropHandler() {
this.isOpen = this.openToast;
if (this.size === 'medium') {
return;
}
this.timeOut = setTimeout(() => {
this.closeToast.emit(false);
this.isOpen = false;
}, 10000);
}
handleClose() {
this.closeToast.emit(false);
this.isOpen = false;
}
render() {
return (this.isOpen && (h("div", { class: `v4-toast ${this.size} ${this.state}` }, h("div", { class: "toast-close" }, h("lab-ds-icon-not-selectable", { onClick: () => {
this.handleClose();
}, class: "close-icon", icon: "close", size: "x-small" })), h("div", { class: "v4-toast-container" }, h("div", { class: "toast-body" }, h("div", { class: "toast-icon-message" }, h("div", { class: "toast-title" }, h("lab-ds-icon-not-selectable", { icon: this.states[this.state].icon, size: "s-medium" }), this.label && this.size === 'medium' && h("span", { class: "title" }, this.label)), h("div", { class: "toast-message" }, this.message)), this.action && (h("div", { class: "toast-action" }, h("lab-ds-button", { size: "small", variant: "link-button", onClick: this.action, label: this.actionLabel })))), this.size === 'small' && h("div", { class: "v4-toast-progress-small" })))));
}
static get is() { return "lab-ds-toast"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-toast.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-toast.css"]
};
}
static get properties() {
return {
"message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "message",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false
},
"action": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => void",
"resolved": "() => void",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"actionLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "action-label",
"reflect": false
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'success' | 'error' | 'warning'",
"resolved": "\"error\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "state",
"reflect": false,
"defaultValue": "'success'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'small'"
},
"openToast": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open-toast",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"isOpen": {}
};
}
static get events() {
return [{
"method": "closeToast",
"name": "closeToast",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "openToast",
"methodName": "watchPropHandler"
}];
}
}
//# sourceMappingURL=lab-ds-toast.js.map