@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
291 lines (287 loc) • 22.9 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AOwgnAK2.js';
import { c as camelCasetoDashed } from './p-C3CE5OlV.js';
import { c as createColorClasses } from './p-B02IfvGX.js';
import { c as createModal } from './p-CAYqVU-x.js';
import { c as createNotify } from './p-Bu3WRaaw.js';
import { d as defineCustomElement$6 } from './p-B7x5gzZv.js';
import { d as defineCustomElement$5 } from './p-C9VBtzS4.js';
import { d as defineCustomElement$4 } from './p-9A4J2Z7t.js';
import { d as defineCustomElement$3 } from './p-CNwVOfNs.js';
import { d as defineCustomElement$2 } from './p-Bk24sn12.js';
import { d as defineCustomElement$1 } from './p-B-fmI6sr.js';
const nodeCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{min-width:8rem;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}:host(.lar-node-disabled){pointer-events:none;opacity:0.2;-webkit-filter:grayscale(0.5);filter:grayscale(0.5)}:host(.lar-node-loading){pointer-events:none}:host(.lar-node-loading) .lar-icon-small{-webkit-animation:pulse 1.5s ease-in-out infinite;animation:pulse 1.5s ease-in-out infinite}@-webkit-keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0.6;-webkit-transform:scale(0.95);transform:scale(0.95)}}@keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0.6;-webkit-transform:scale(0.95);transform:scale(0.95)}}:host(.lar-node-small) .lar-node-box{border-radius:var(--lar-node-small-box-border-radius, 0.5rem);text-align:left;height:var(--lar-node-small-box-height, 4rem);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.lar-node-small) .lar-node-box:before{display:none}:host(.lar-node-small) .lar-icon-big{padding:var(--lar-node-small-icon-padding-top, 0.5rem) var(--lar-node-small-icon-padding-right, 0.5rem) var(--lar-node-small-icon-padding-bottom, 0.5rem) var(--lar-node-small-icon-padding-left, 0.5rem);border-radius:var(--lar-node-icon-border-radius, 50%);width:var(--lar-node-small-icon-size, 1.8rem);height:var(--lar-node-small-icon-size, 1.8rem);display:inline-block;margin-right:0.5rem;margin-left:0.5rem}:host(.lar-node-small) .lar-node-middle{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:left;justify-content:left}:host(.lar-node-small) .lar-value-badge{position:static;margin-left:auto;margin-right:0.5rem}.titles-slot:empty{display:none}.lar-node-box{border-radius:var(--lar-node-box-border-radius, 0.5rem);position:relative;cursor:pointer;overflow:visible;background:var(--lar-background-color, #000);min-height:8rem}.lar-node-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.875rem;padding:2rem 1rem 1rem 1rem;min-height:4.25rem;position:relative;border-radius:1rem}@media (max-width: 576px){.lar-node-content{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}}.lar-icon-main{-ms-flex-negative:0;flex-shrink:0;width:2.75rem;height:2.75rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.04);border-radius:50%}.lar-icon-main lar-icon{width:1.5rem;height:1.5rem}.lar-icon-big{padding:var(--lar-node-icon-padding-top, 1.2rem) var(--lar-node-icon-padding-right, 1.2rem) var(--lar-node-icon-padding-bottom, 1.2rem) var(--lar-node-icon-padding-left, 1.2rem);border-radius:var(--lar-node-icon-border-radius, 50%);width:var(--lar-node-icon-size, 3rem);height:var(--lar-node-icon-size, 3rem);display:inline-block;background:rgba(0, 0, 0, 0.03);position:relative;z-index:1}.lar-node-titles-wrapper{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:0.125rem;padding-right:0.5rem}.lar-node-right{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.75rem;margin-left:auto}.lar-node-right .titles-slot{position:static;top:auto;right:auto}@media (max-width: 576px){.lar-node-right{width:100%;margin-left:0;margin-top:-0.25rem;-ms-flex-pack:end;justify-content:flex-end}}.lar-node-middle{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:4rem}.lar-value-badge{position:absolute;top:0.5rem;right:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.375rem;padding:0.25rem 0.5rem;background:rgba(0, 0, 0, 0.06);border-radius:0.5rem;z-index:10;max-width:50%;margin-left:0.75rem}@media (max-width: 576px){.lar-value-badge{top:0.625rem;right:0.625rem;max-width:45%;margin-left:1rem}}.lar-value-badge:has(.lar-icon-small):not(:has(.lar-value)){padding:0.25rem;background:transparent}.lar-value-badge .lar-icon-small{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1rem;height:1rem}.lar-value-badge .lar-icon-small lar-icon{width:100%;height:100%}.lar-value-badge .lar-value{font-size:0.75rem;font-weight:600;letter-spacing:0.02em;white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;line-height:1.2;-ms-flex:1;flex:1;min-width:0}@media (max-width: 576px){.lar-value-badge .lar-value{font-size:0.8125rem}}.lar-icon-small lar-icon,.lar-icon-big lar-icon{display:block;width:100%;height:100%;position:relative;z-index:2}.lar-icon-small:empty,.lar-icon-big:empty{display:none !important}.spacer{margin-top:1rem;margin-bottom:1rem}.defaultslot,.defaultslotelements{display:none}@media (max-width: 320px){:host{max-width:100%}}:host(.lar-color-primary) .lar-node-box lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-primary) .lar-icon-big lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-node-small.lar-color-primary) .lar-icon-big lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-secondary) .lar-node-box lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-secondary) .lar-icon-big lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-node-small.lar-color-secondary) .lar-icon-big lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-tertiary) .lar-node-box lar-icon{fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-color-tertiary) .lar-icon-big lar-icon{fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-node-small.lar-color-tertiary) .lar-icon-big lar-icon{fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-color-success) .lar-node-box lar-icon{fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-color-success) .lar-icon-big lar-icon{fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-node-small.lar-color-success) .lar-icon-big lar-icon{fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-color-warning) .lar-node-box lar-icon{fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-color-warning) .lar-icon-big lar-icon{fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-node-small.lar-color-warning) .lar-icon-big lar-icon{fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-color-danger) .lar-node-box lar-icon{fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-color-danger) .lar-icon-big lar-icon{fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-node-small.lar-color-danger) .lar-icon-big lar-icon{fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-color-light) .lar-node-box lar-icon{fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-color-light) .lar-icon-big lar-icon{fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-node-small.lar-color-light) .lar-icon-big lar-icon{fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-color-medium) .lar-node-box lar-icon{fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-color-medium) .lar-icon-big lar-icon{fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-node-small.lar-color-medium) .lar-icon-big lar-icon{fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-color-dark) .lar-node-box lar-icon{fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}:host(.lar-color-dark) .lar-icon-big lar-icon{fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}:host(.lar-node-small.lar-color-dark) .lar-icon-big lar-icon{fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}";
const Node = /*@__PURE__*/ proxyCustomElement(class Node extends H {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
this.request = createEvent(this, "request");
this.willPresent = createEvent(this, "larnodewillpresent");
this.didPresent = createEvent(this, "larnodedidpresent");
this.willDismiss = createEvent(this, "larnodewilldismiss");
this.didDismiss = createEvent(this, "larnodediddismiss");
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" })));
}
get el() { return this; }
static get style() { return nodeCss; }
}, [257, "lar-node", {
"color": [1],
"loading": [4],
"icon": [1],
"iconSmall": [1025, "icon-small"],
"hideTitles": [4, "hide-titles"],
"subTitle": [1, "sub-title"],
"supTitle": [1, "sup-title"],
"mainTitle": [1, "main-title"],
"log": [4],
"value": [1],
"valueTranslationValues": [1, "value-translation-values"],
"colorIconSmall": [1, "color-icon-small"],
"colorIcon": [1, "color-icon"],
"colorModal": [1, "color-modal"],
"colorInputs": [1, "color-inputs"],
"disabled": [4],
"headerSizeModal": [1, "header-size-modal"],
"nodeSize": [1, "node-size"],
"component": [1],
"componentProps": [16],
"getModalComponent": [64],
"openModal": [64],
"error": [64],
"response": [64],
"closeModal": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-node", "lar-backdrop", "lar-icon", "lar-modal", "lar-node-titles", "lar-notify", "lar-translate"];
components.forEach(tagName => { switch (tagName) {
case "lar-node":
if (!customElements.get(tagName)) {
customElements.define(tagName, Node);
}
break;
case "lar-backdrop":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lar-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lar-modal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lar-node-titles":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lar-notify":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "lar-translate":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { Node as N, defineCustomElement as d };
//# sourceMappingURL=p-Dsy6MkCW.js.map
//# sourceMappingURL=p-Dsy6MkCW.js.map