mwcpl
Version:
Master's Web Component Pattern Library
93 lines (92 loc) • 3.05 kB
JavaScript
import { Component, h, Prop, Host } from '@stencil/core';
export class MwcplDialog {
render() {
if (this.open) {
return (h(Host, null,
h("div", { class: "dialog" },
h("div", { class: "backdrop", onClick: () => this.dismiss() }),
h("div", { class: "container" },
h("h2", { class: "heading" }, this.heading),
h("div", { class: "content" },
h("slot", null)),
h("div", { class: "actions", onClick: (e) => this.handleClick(e) },
h("slot", { name: "secondary-action" }),
h("div", { class: "spacer" }),
h("slot", { name: "primary-action" }))))));
}
}
dismiss() {
if (this.dismissable) {
this.open = false;
}
}
handleClick(event) {
if (event) {
const target = event.target;
if (target.getAttribute('closeDialog') == '') {
this.open = false;
}
}
}
static get is() { return "mwcpl-dialog"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["mwcpl-dialog.scss"]
}; }
static get styleUrls() { return {
"$": ["mwcpl-dialog.css"]
}; }
static get properties() { return {
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The title of the dialog."
},
"attribute": "heading",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the visibility of the dialog."
},
"attribute": "open",
"reflect": true
},
"dismissable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Dismisses the dialog by clicking on the backdrop."
},
"attribute": "dismissable",
"reflect": false
}
}; }
}