@kelvininc/ui-components
Version:
Kelvin UI Components
183 lines (182 loc) • 7.48 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getClassMap } from "../../utils/css-class.helper";
import { EIconName } from "../icon/icon.types";
/**
* @part topbar - The modal's topbar section.
* @part content - The modal's content section.
*/
export class KvModal {
constructor() {
/** @inheritdoc */
this.showOverlay = true;
/** @inheritdoc */
this.showCloseButton = true;
/** @inheritdoc */
this.customClass = '';
this.onClose = (ev) => {
ev.preventDefault();
this.clickClose.emit();
};
this.onClickOverlay = (ev) => {
ev.preventDefault();
this.clickOverlay.emit();
};
}
render() {
return (h(Host, { key: 'a889fa42e1c7f5ffc7cb16f595ff70f13262da26', class: getClassMap(this.customClass) }, h("div", { key: '2b5c566e0cdd6f9fc99731170bd7c97ef37fee47', class: { 'modal-overlay': this.showOverlay }, onClick: this.onClickOverlay }), h("div", { key: 'cae1cb0afe3cc10b60a603ab5345dd093ed483a2', class: "modal-container" }, h("div", { key: '0b73f512fb4ca7927209c24dd74ab24210847e2b', class: "topbar", part: "topbar" }, h("div", { key: '0ece5540a5268ffe57fa01f7c1ef587672ccd3e2', class: "title" }, this.headerTitle), h("div", { key: 'ee8399b651d4bc4547ef712ba8a7d00c45a749a0', class: "actions" }, h("slot", { key: '745ecbf9dba308bb4998adbd2445321547a84d2e', name: "more-topbar-actions" }), this.showCloseButton && (h("div", { key: '32f83429f6f38cfe135e1f307a4df69bf825ffa1', class: "close-button", onClick: this.onClose }, h("kv-icon", { key: '7b436b792ddf48ad2452e9166cc7756ddcdd8fbb', name: EIconName.Close }))))), h("div", { key: 'fe7f9f3c1f1f661cf0674a5bf55479ad521b8e48', class: "content", part: "content" }, h("slot", { key: '58a7df573f5e5343dee61a812ba076217761bbcb', name: "header" }), h("slot", { key: 'ac641a97ac92b264ba34169c10c5bdd0a95941eb', name: "body" }), h("slot", { key: 'ecb7cc859be32c76fcdd98f17c2deafb7a7cfe8f', name: "footer" })))));
}
static get is() { return "kv-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["modal.night.scss"],
"light": ["modal.light.scss"]
};
}
static get styleUrls() {
return {
"night": ["modal.night.css"],
"light": ["modal.light.css"]
};
}
static get properties() {
return {
"headerTitle": {
"type": "string",
"attribute": "header-title",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the modal title label"
},
"getter": false,
"setter": false,
"reflect": false
},
"showOverlay": {
"type": "boolean",
"attribute": "show-overlay",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the modal has an overlay background"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "true"
},
"showCloseButton": {
"type": "boolean",
"attribute": "show-close-button",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the modal shows the close button"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "true"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
static get events() {
return [{
"method": "clickClose",
"name": "clickClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the close button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "clickOverlay",
"name": "clickOverlay",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the overlay container is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
}