@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
320 lines (319 loc) • 8.59 kB
JavaScript
import { Component, Host, h, Prop, Event, Element, Watch, State, } from '@stencil/core';
import { defaultTheme } from '../../defaultTheme';
import { TecAlign } from '../../models/align.model';
import { TecSize } from '../../models/size.model';
export class TecModal {
constructor() {
this.clickWasInside = false;
this.hasFooterContent = false;
this.openedAuxiliary = false;
this.theme = defaultTheme;
this.opened = false;
this.showCloseIcon = true;
this.dismissOnBackdrop = true;
this.size = TecSize.small;
this.fullWidth = false;
this.closeOnEscape = true;
this.blockBodyScroll = true;
this.responsive = true;
this.footerAlign = TecAlign.right;
this.handleClick = (event) => {
if (!this.clickWasInside && this.dismissOnBackdrop)
this.closeModal(event);
this.clickWasInside = false;
};
this.closeModal = (event) => {
this.opened = false;
this.handleParentOverflow();
this.hidden.emit(event);
};
this.handleKeyDown = (event) => {
if (this.opened && event.key === 'Escape')
this.closeModal();
};
}
watchOpened(newValue) {
if (!newValue) {
setTimeout(() => this.openedAuxiliary = false, 200);
}
else {
this.handleParentOverflow();
this.openedAuxiliary = true;
}
}
componentWillLoad() {
this.hasFooterContent = !!this.hostElement.querySelector('[slot="footer"]');
if (this.opened)
this.handleParentOverflow();
this.openedAuxiliary = this.opened;
if (this.closeOnEscape)
document.addEventListener('keydown', this.handleKeyDown);
}
handleParentOverflow() {
const property = this.opened && this.blockBodyScroll ? 'hidden' : 'inherit';
this.hostElement.parentElement.style.overflow = property;
}
setClickWasInside(wasInside) {
return () => this.clickWasInside = wasInside;
}
render() {
return (this.openedAuxiliary && (h(Host, null,
h("div", { class: `modal ${this.opened && 'show-background'} ${!this.opened && 'remove-background'}`, onClick: this.handleClick },
h("div", { class: `modal-content ${this.fullWidth && 'full-width'} ${this.opened && 'open-animation'} ${!this.opened && 'close-animation'} ${this.responsive && 'responsive'}`, onClick: this.setClickWasInside(true) },
h("div", { class: "modal-title text-title" },
h("h1", { class: "text-2x1" }, this.modalTitle),
this.showCloseIcon && (h("div", { class: "close-container", onClick: this.closeModal },
h("span", { class: "close" },
h("span", null, "\u00D7"))))),
h("div", { class: "content" },
h("slot", { name: "content" })),
this.hasFooterContent && (h("div", { class: `footer ${this.footerAlign}` },
h("div", { class: "footer-content" },
h("slot", { name: "footer" })))))))));
}
static get is() { return "tec-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["tec-modal.scss"]
}; }
static get styleUrls() { return {
"$": ["tec-modal.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecnologiaTheme",
"resolved": "TecnologiaTheme.dark | TecnologiaTheme.light",
"references": {
"TecnologiaTheme": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": true,
"defaultValue": "defaultTheme"
},
"opened": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "opened",
"reflect": false,
"defaultValue": "false"
},
"modalTitle": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "modal-title",
"reflect": false
},
"showCloseIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "show-close-icon",
"reflect": false,
"defaultValue": "true"
},
"dismissOnBackdrop": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "dismiss-on-backdrop",
"reflect": false,
"defaultValue": "true"
},
"size": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TecSize",
"resolved": "TecSize.giant | TecSize.large | TecSize.medium | TecSize.small | TecSize.tiny",
"references": {
"TecSize": {
"location": "import",
"path": "../../models/size.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "TecSize.small"
},
"fullWidth": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "full-width",
"reflect": false,
"defaultValue": "false"
},
"closeOnEscape": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "close-on-escape",
"reflect": false,
"defaultValue": "true"
},
"blockBodyScroll": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "block-body-scroll",
"reflect": false,
"defaultValue": "true"
},
"responsive": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "responsive",
"reflect": false,
"defaultValue": "true"
},
"footerAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecAlign",
"resolved": "TecAlign.center | TecAlign.left | TecAlign.right",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "footer-align",
"reflect": false,
"defaultValue": "TecAlign.right"
}
}; }
static get states() { return {
"openedAuxiliary": {}
}; }
static get events() { return [{
"method": "hidden",
"name": "hidden",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "UIEvent",
"resolved": "UIEvent",
"references": {
"UIEvent": {
"location": "global"
}
}
}
}]; }
static get elementRef() { return "hostElement"; }
static get watchers() { return [{
"propName": "opened",
"methodName": "watchOpened"
}]; }
}