@blaze/atoms
Version:
Open Source UI Toolkit - Atoms
156 lines (155 loc) • 3.5 kB
JavaScript
import { h, Component, Event, Method, Prop, State } from '@stencil/core';
export class Alert {
constructor() {
this.type = '';
this.dismissible = false;
this.open = false;
this._isOpen = false;
}
async close() {
this._isOpen = false;
this.onClose.emit();
}
async show() {
this._isOpen = true;
}
async isOpen() {
return this._isOpen;
}
componentWillLoad() {
this._isOpen = this.open;
}
render() {
const isOpenClass = !this._isOpen ? 'u-display-none' : '';
const typeClass = this.type ? `c-alert--${this.type}` : '';
return (h("div", { role: "alert", hidden: !this._isOpen, class: `c-alert ${typeClass} ${isOpenClass}` },
this.dismissible && (h("button", { class: "c-button c-button--close", onClick: () => this.close() }, "\u00D7")),
h("slot", null)));
}
static get is() { return "blaze-alert"; }
static get properties() { return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "''"
},
"dismissible": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "dismissible",
"reflect": false,
"defaultValue": "false"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"_isOpen": {}
}; }
static get events() { return [{
"method": "onClose",
"name": "close",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get methods() { return {
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"show": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"isOpen": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "",
"tags": []
}
}
}; }
}