@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
845 lines (844 loc) • 33 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { Host, h } from "@stencil/core";
import { camelCasetoDashed } from "../../../utils/helpers";
import { createColorClasses } from "../../../utils/theme";
import { createModal } from "../modal/modal-controller";
import { createNotify } from "../notify/notify-controller";
export class Node {
constructor() {
this.modalOpening = false;
/**
* Node loading or not
*/
this.loading = false;
/**
* Hide node titles
*/
this.hideTitles = false;
/**
* Node main title
*/
this.mainTitle = '';
/**
* Should we load lar-log sub-component?
*/
this.log = false;
/**
* If `true`, the user cannot interact with the node. Defaults to `false`.
*/
this.disabled = false;
/**
* Modal header size
*/
this.headerSizeModal = 'default';
/**
* Node size
*/
this.nodeSize = 'default';
}
async getModalComponent() {
var _a;
return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.getComponent();
}
async openModal() {
if (this.modal || this.modalOpening === true) {
return;
}
try {
const el = this.el.shadowRoot || this.el;
const moveConteiner = el.querySelector('.defaultslotelements');
const slotElements = el.querySelectorAll('.defaultslotelements > *');
this.modalOpening = true;
this.modal = await createModal(Object.assign(Object.assign({}, this.getModalProps()), { onLarmodalwillpresent: () => { this.willPresent.emit(); }, onLarmodaldidpresent: () => { this.didPresent.emit(); }, onLarmodalwilldismiss: () => { this.willDismiss.emit(); }, onLarmodaldiddismiss: () => {
this.didDismiss.emit();
this.modal = undefined;
this.modalComponent = undefined;
this.moreButtonsComponent = undefined;
// move slot nodes back to DOM
slotElements.forEach(e => moveConteiner.appendChild(e));
}, component: this.component, componentProps: this.componentProps }));
// present with slot nodes
if (slotElements.length > 0) {
await this.modal.attachComponent('lar-node-linked-components');
for (const elem of Array.from(slotElements)) {
await this.modal.attachComponent(elem);
}
}
// attach additional Log Button component
await this.modal.attachComponent('lar-node-more-buttons', {
colorInputs: this.colorInputs || this.color,
colorModal: this.colorModal || this.color,
log: this.log,
onRequest: (event) => this.request.emit(event.detail), // pass request event
});
await this.modal.present();
this.modalComponent = await this.modal.getComponent();
this.moreButtonsComponent = (await this.modal.getComponents()).find(e => e.component === 'lar-node-more-buttons') || undefined;
}
catch (err) {
console.error(err);
}
finally {
this.modalOpening = false;
}
}
/**
* Display Larva Error
*/
async error(data, timeout = 5000) {
let msg = '';
if (typeof data === 'string') {
msg = data;
}
else if (data && data.message && typeof data.message === 'string') {
msg = data.message;
}
else {
msg = 'UNKNOWN_ERROR';
}
const translate = h("lar-translate", { t: `error_messages.${msg}`, fallback: msg });
const notify = await createNotify({ message: translate, color: 'danger', autoHide: timeout });
await notify.present();
}
/**
* Request response method
*/
async response(data) {
switch (data.topic) {
case 'iot-2/evt/getNodeLogs/fmt/json':
if (this.moreButtonsComponent) {
this.moreButtonsComponent.element
.response(data);
}
break;
}
}
/**
* Request response method
*/
async closeModal() {
var _a;
await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.dismiss());
}
async disconnectedCallback() {
const el = this.el.shadowRoot || this.el;
const moveConteiner = el.querySelector('.defaultslotelements');
moveConteiner.innerHTML = ``;
return this.closeModal();
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
// move shadow slot elements to container so its possible to move back and forward those to modal
const slotElements = el.querySelector('.defaultslot slot').assignedElements({ flatten: true });
const moveConteiner = el.querySelector('.defaultslotelements');
slotElements.forEach(e => moveConteiner.appendChild(e));
}
getModalProps() {
return {
value: this.value || '',
valueTranslationValues: this.valueTranslationValues,
supTitle: this.supTitle,
mainTitle: this.mainTitle,
subTitle: this.subTitle,
iconSmall: this.loading ? 'loading' : this.iconSmall,
colorHeaderInputs: this.colorInputs || this.color,
colorIconSmall: this.colorIconSmall || '',
headerSize: this.headerSizeModal,
icon: this.icon,
color: this.colorModal || this.color,
};
}
async handleNodeClick(event) {
// Don't open modal if clicking on quick actions (titles slot)
const target = event.target;
if (target.closest('.titles-slot')) {
return;
}
return this.openModal();
}
render() {
let icon;
let iconSmall;
let value;
let hasValue = false;
let hasIconSmall = false;
if (this.icon && this.icon !== '') {
icon = h("lar-icon", { key: 'a9f36984aaa0341a08c3e5c7a2369f58edf2832d', color: this.colorIcon, icon: this.icon });
}
if ((this.iconSmall && this.iconSmall !== '') || this.loading) {
iconSmall = h("lar-icon", { key: 'd8ceed33e7291a34d1df739d95ce6cb0a27999a5', color: this.colorIconSmall || '', icon: this.loading ? 'loading' : this.iconSmall });
hasIconSmall = true;
}
if (this.value && this.value !== '') {
value = h("lar-translate", { key: '10cea1d61c0d6b323d4ff484165293514f7a7f8f', t: this.value, values: this.valueTranslationValues });
hasValue = true;
}
// re-render modal and subcomponent props
if (this.modal) {
const modalProps = this.getModalProps();
for (const prop of Object.keys(modalProps)) {
const val = modalProps[prop] === undefined ? '' : modalProps[prop];
this.modal.setAttribute(camelCasetoDashed(prop), val && typeof val === 'object' ? JSON.stringify(val) : val);
}
}
// re-render sub component props
if (this.modalComponent) {
for (const prop of Object.keys(this.componentProps || {})) {
const val = this.componentProps[prop] === undefined ? '' : this.componentProps[prop];
this.modalComponent.element.setAttribute(camelCasetoDashed(prop), val && typeof val === 'object' ? JSON.stringify(val) : val);
}
}
return (h(Host, { key: 'a131f623457a3b9890429e51dbe5e7759f1bdd0f', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-node-disabled': this.disabled, 'lar-node-loading': this.loading, 'lar-node-small': this.nodeSize === 'small' }) }, h("div", { key: '1e257f15e2bf7113659f5e20b0c2d2d4b02ac1a5', onClick: this.handleNodeClick.bind(this), class: "lar-node-box" }, this.nodeSize !== 'small' && (h("div", { key: 'd0c115438f6b95e8cc0feb222fd1087119b59c3d', class: "lar-node-content" }, icon && h("div", { key: '1d49508eaa897ed4dbcd19e0b16a4d9c8f7b3884', class: "lar-icon-main" }, icon), this.hideTitles === false && h("div", { key: 'f0724823e81f55d5e9791386275b14463fe938ae', class: "lar-node-titles-wrapper" }, h("lar-node-titles", { key: 'c706f8502b3b49acf7069d1c6cda66b9ceb16357', supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle })), h("div", { key: '2738e1ea15403010e6f131f339efb6a8853461c2', class: "lar-node-right" }, h("div", { key: 'fc1bb2f294d31d2801da30d14d54dac94349573f', class: "titles-slot", onClick: (e) => e.stopPropagation() }, h("slot", { key: '864ac9fc48cc04296769b73fbff0152bef0bc0b7', name: "titles" }))), (hasValue || hasIconSmall) && (h("div", { key: '164a2f982e9f38859528bde72c0731ad32903d42', class: "lar-value-badge" }, hasIconSmall && h("div", { key: '438609c607df398732af86326918701fae56feef', class: "lar-icon-small" }, iconSmall), hasValue && h("div", { key: 'd9138efee320361939015e2b8121e86a99c6e2f1', class: "lar-value" }, value))))), this.nodeSize === 'small' && (h("div", { key: '039e440fa09e3be16bd0d0d86051ef703afe4e7f', class: "lar-node-middle" }, h("slot", { key: '799ef9bc881b8f44ede0e072153ef25f1b507aa0', name: "middle" }, h("div", { key: 'c60926e5d357438be798b8931d752cf8693a878d', class: "lar-icon-big" }, icon), h("h3", { key: '26168d9f56182a0dcfc29584eb023182474def4a' }, h("lar-translate", { key: 'c38dae07f9283da9afd3bd52057c7783623bd475', t: this.mainTitle })), (hasValue || hasIconSmall) && (h("div", { key: '39acc5962402aec3d62d9cd8f0245646f4b1a3d3', class: "lar-value-badge" }, hasIconSmall && h("div", { key: '6341f9561f454140490b14b5aeb2cc9cdbc0fd0d', class: "lar-icon-small" }, iconSmall), hasValue && h("div", { key: 'd05527831c0bae2e32eaab6bd14cf74a40576a16', class: "lar-value" }, value))))))), h("div", { key: '4ade9b80f94233565110f06f1352254842d860a6', class: "defaultslot" }, h("slot", { key: '3b4be8f58c085b9a98ea784c3947691ac9b16b52' })), h("div", { key: '8e0e87a2961160b5403228f475a611ea8e2ce1f5', class: "defaultslotelements" })));
}
static get is() { return "lar-node"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["node.scss"]
};
}
static get styleUrls() {
return {
"$": ["node.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Node loading or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "loading",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node big icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"iconSmall": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node corner small icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon-small"
},
"hideTitles": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hide node titles"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "hide-titles",
"defaultValue": "false"
},
"subTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node subtitle"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sub-title"
},
"supTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node superscript title"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sup-title"
},
"mainTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Node main title"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "main-title",
"defaultValue": "''"
},
"log": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Should we load lar-log sub-component?"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "log",
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node corner value, passed trought translation"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"valueTranslationValues": {
"type": "string",
"mutable": false,
"complexType": {
"original": "object | string",
"resolved": "object | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value translation valriables"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value-translation-values"
},
"colorIconSmall": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette for small icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-icon-small"
},
"colorIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette for main icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-icon"
},
"colorModal": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette for modal window."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-modal"
},
"colorInputs": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette for inputs"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-inputs"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the node. Defaults to `false`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"headerSizeModal": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Size",
"resolved": "\"default\" | \"small\"",
"references": {
"Size": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Size"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Modal header size"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "header-size-modal",
"defaultValue": "'default'"
},
"nodeSize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Size",
"resolved": "\"default\" | \"small\"",
"references": {
"Size": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Size"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node size"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "node-size",
"defaultValue": "'default'"
},
"component": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ComponentRef",
"resolved": "Element | HTMLElement | string",
"references": {
"ComponentRef": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::ComponentRef"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The component to display inside of the modal."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "component"
},
"componentProps": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ComponentProps",
"resolved": "{ [key: string]: any; }",
"references": {
"ComponentProps": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::ComponentProps"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The data to pass to the modal component."
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "request",
"name": "request",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Larva sub-components request event"
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "willPresent",
"name": "larnodewillpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the modal has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didPresent",
"name": "larnodedidpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "willDismiss",
"name": "larnodewilldismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didDismiss",
"name": "larnodediddismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"getModalComponent": {
"complexType": {
"signature": "() => Promise<any>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<any>"
},
"docs": {
"text": "",
"tags": []
}
},
"openModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"CustomEvent": {
"location": "global",
"id": "global::CustomEvent"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"error": {
"complexType": {
"signature": "(data: any, timeout?: number) => Promise<void>",
"parameters": [{
"name": "data",
"type": "any",
"docs": ""
}, {
"name": "timeout",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Display Larva Error",
"tags": []
}
},
"response": {
"complexType": {
"signature": "(data: InputResponse) => Promise<void>",
"parameters": [{
"name": "data",
"type": "InputResponse",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"InputResponse": {
"location": "import",
"path": "./node-interface",
"id": "src/components/internal/node/node-interface.tsx::InputResponse"
},
"HTMLLarNodeMoreButtonsElement": {
"location": "global",
"id": "global::HTMLLarNodeMoreButtonsElement"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Request response method",
"tags": []
}
},
"closeModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Request response method",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=node.js.map