radh-ui
Version:
Stencil Component Starter
103 lines (102 loc) • 3.19 kB
JavaScript
import { Component, Event, Prop, h } from "@stencil/core";
export class XModal {
constructor() {
this.visible = false;
this.handleCancelClick = () => {
this.visible = false;
this.cancel.emit();
};
this.handleOkClick = () => {
this.visible = false;
this.ok.emit();
};
}
render() {
const { visible, heading: title, handleCancelClick, handleOkClick } = this;
return (h("div", { class: visible ? "radh-modal-wrapper visible" : "radh-modal-wrapper" },
h("div", { class: "radh-modal" },
h("div", { class: "radh-modal-header" },
h("span", null, title)),
h("div", { class: "radh-modal-content" },
h("slot", null)),
h("div", { class: "radh-modal-buttons" },
h("button", { class: "radh-modal-cancel", onClick: handleCancelClick }, "Cancel"),
h("button", { class: "radh-modal-ok", onClick: handleOkClick }, "Okay")))));
}
static get is() { return "radh-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["radh-modal.css"]
}; }
static get styleUrls() { return {
"$": ["radh-modal.css"]
}; }
static get properties() { return {
"visible": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "visible",
"reflect": true,
"defaultValue": "false"
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "heading",
"reflect": false
}
}; }
static get events() { return [{
"method": "ok",
"name": "ok",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "cancel",
"name": "cancel",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
}