@kelvininc/ui-components
Version:
Kelvin UI Components
229 lines (228 loc) • 9.17 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(ev);
};
this.onClickOverlay = (ev) => {
ev.preventDefault();
this.clickOverlay.emit(ev);
};
}
handleKeyDown(event) {
if (event.key === 'Escape') {
event.preventDefault();
this.escapeKeyPressed.emit(event);
}
}
render() {
return (h(Host, { key: 'b2db7418d1470203f255c09919040ceb8e901fe8', class: getClassMap(this.customClass) }, h("div", { key: '7785461f7d276eb96064ca8f92c32470e9eec5a5', class: { 'modal-overlay': this.showOverlay }, onClick: this.onClickOverlay }), h("div", { key: 'faa914c60c600ab88f62f7191fbe73e92b35bf14', class: "modal-container" }, h("div", { key: 'c6f4a0515cc235f641d32b3258cc44d59992acce', class: "topbar", part: "topbar" }, h("div", { key: 'c4c1e2a076885575f6d9b52b07c7e528d178df9d', class: "title" }, this.headerTitle), h("div", { key: '6afa13d13b679ab6da0e0debf99d79f0e592e1a2', class: "actions" }, h("slot", { key: '584b699ba1674d418c9568e970e4b26f7ad81e0a', name: "more-topbar-actions" }), this.showCloseButton && (h("div", { key: '5cf0d8f83d4c2db875e004d03b0991442f1ddea9', class: "close-button", onClick: this.onClose }, h("kv-icon", { key: '26983cae94233cd3de0bfe77cd648962c375863b', name: EIconName.Close }))))), this.headerTitle && h("div", { key: 'a51ad5921de0979e404322ba8e98a83e9bf64818', class: "divider" }), h("div", { key: 'b131f46c94312a129440cec3d6c9dea28120394c', class: "content", part: "content" }, h("slot", { key: 'd81a8d490da39fe6c4dd9af365b2e82533772116', name: "header" }), h("slot", { key: '6960c3760febba2e1bdb7ef801b22188efc0273c', name: "body" }), h("slot", { key: 'e9152cedd1ec8995c2374bb0aca3f506a82c7449', name: "footer" })))));
}
static get is() { return "kv-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["modal.scss"]
};
}
static get styleUrls() {
return {
"$": ["modal.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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "escapeKeyPressed",
"name": "escapeKeyPressed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the escape key is pressed"
},
"complexType": {
"original": "KeyboardEvent",
"resolved": "KeyboardEvent",
"references": {
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": "document",
"capture": false,
"passive": false
}];
}
}