@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
145 lines (140 loc) • 7.68 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, h } from './p-AOwgnAK2.js';
import { c as createModal } from './p-CAYqVU-x.js';
import { d as defineCustomElement$7 } from './p-B7x5gzZv.js';
import { d as defineCustomElement$6 } from './p-BiG3U7GV.js';
import { d as defineCustomElement$5 } from './p-h4DczB6k.js';
import { d as defineCustomElement$4 } from './p-C9VBtzS4.js';
import { d as defineCustomElement$3 } from './p-9A4J2Z7t.js';
import { d as defineCustomElement$2 } from './p-B-fmI6sr.js';
const areaCss = "slot-fb[hidden],slot[hidden]{display:initial !important}.details{padding:3rem 0 0 0}.details lar-button-group{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.actions{min-height:60px}lar-list-item{background-color:var(--lar-background-color-step-100, rgb(25.5, 25.5, 25.5)) !important;color:var(--lar-text-color, #fff) !important}.spacer{margin-top:1.5rem;margin-bottom:1.5rem}.circle{background-color:var(--lar-background-color-step-200, #333333) !important;border-radius:50%;display:inline-block;padding:0.5rem;width:2rem;height:2rem;margin-right:1rem}.circle lar-icon{display:block;width:100%;height:100%}.zone-list h4{margin:0;padding:0}.zone-list h4 lar-badge{margin-top:0.2rem;margin-right:0.3rem;font-weight:normal}.zone-selectors{text-align:center;margin-bottom:1rem}.zone-selectors lar-button{margin:0.2rem}.zone-list lar-badge{margin-top:0.3rem}lar-button.zone-group{--lar-button-font-size-small:.95rem;--lar-button-padding-top-small:.4rem;--lar-button-padding-bottom-small:.4rem;--lar-button-padding-left-small:.4rem;--lar-button-padding-right-small:.4rem}.center{text-align:center}";
const AreaContent = /*@__PURE__*/ proxyCustomElement(class AreaContent extends H {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
this.arm = createEvent(this, "arm");
this.disarm = createEvent(this, "disarm");
this.output = createEvent(this, "output");
this.armed = false;
this.zoneopened = false;
this.hastroubles = false;
this.alarm = false;
this.loading = true;
}
async showModal(title, subTitle, component) {
this.modal = await createModal({
mainTitle: title,
subTitle,
color: this.colorModal || this.color,
animation: 'bottom',
iconSmall: this.loading ? 'loading' : '',
colorHeaderInputs: this.color,
icon: this.icon,
headerSize: 'small',
onLarmodaldiddismiss: () => {
this.modal = undefined;
this.modalComponent = undefined;
},
component,
componentProps: {
zones: this.zones,
troubles: this.troubles,
onOutput: (evt) => this.output.emit(evt.detail),
color: this.color,
}
});
await this.modal.present();
this.modalComponent = await this.modal.getComponent();
}
async disconnectedCallback() {
var _a;
return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.dismiss();
}
render() {
if (this.modalComponent) {
this.modalComponent.element.setAttribute('zones', this.zones);
this.modalComponent.element.setAttribute('troubles', this.troubles);
this.modalComponent.element.setAttribute('color', this.color);
}
return [
h("div", { key: 'c723ffaffe3e0f7728aad82032a7aeda1e261a10', class: "actions" }, (this.armed || this.alarm)
?
h("lar-button", { onClick: () => this.disarm.emit(), color: this.color, disabled: this.loading }, h("lar-icon", { icon: "unlock" }), " ", h("lar-translate", { t: "area.disarm" }))
:
h("lar-button-group", null, h("lar-button", { disabled: this.zoneopened || this.loading, onClick: () => this.hastroubles ? this.showModal('area.overrideAndBypass', 'area.selectZonesToBypass', 'lar-area-bypass') : this.arm.emit(), color: this.color }, h("lar-icon", { icon: "lock" }), " ", h("lar-translate", { t: "area.arm" })), h("lar-button", { disabled: this.loading, onClick: () => this.showModal('area.partialarm', 'area.selectZonesToBypass', 'lar-area-bypass'), color: this.color === 'dark' ? 'light' : 'dark' }, h("lar-icon", { icon: "halflock" }), " ", h("lar-translate", { t: "area.partialarm" })))),
h("div", { key: '5d7b55566d25b648acd76d22faaf439fc562e05f', class: "details" }, h("lar-button-group", { key: 'e5b19daa536f58ff794ebe7786acb50352afc1da' }, this.hastroubles
&&
h("lar-button", { key: 'd1e4ffae39af91381d9ac83060f5ac8473310bff', color: "warning", size: "small", expand: "block", outline: true, onClick: () => this.showModal('area.troubles', '', 'lar-area-troubles') }, h("lar-icon", { key: '3fad9ce6e0c6a02029e116d23cecf2951dc4cf96', icon: "warning" }), "\u00A0", h("lar-translate", { key: '9a825a5ef5dd8ca817c7fb191d95b79704e3b40d', t: "area.troubles" })), h("lar-button", { key: '5f4d787a4d4573bf1961252e08d43e998a8b6351', color: this.color, size: "small", expand: "block", outline: true, onClick: () => this.showModal('area.zonemonitor', '', 'lar-area-zones') }, h("lar-translate", { key: '891581ff567c1ef2f3b00ac4db6aa0357cb40cf8', t: "area.zonemonitor" }), "\u00A0", this.zoneopened
?
h("lar-icon", { icon: "unlock" })
:
h("lar-icon", { icon: "lock" }))))
];
}
static get style() { return areaCss; }
}, [257, "lar-area-content", {
"color": [1],
"colorModal": [1, "color-modal"],
"zones": [1],
"troubles": [1],
"armed": [4],
"zoneopened": [4],
"hastroubles": [4],
"icon": [1],
"alarm": [4],
"loading": [4]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-area-content", "lar-backdrop", "lar-button", "lar-button-group", "lar-icon", "lar-modal", "lar-translate"];
components.forEach(tagName => { switch (tagName) {
case "lar-area-content":
if (!customElements.get(tagName)) {
customElements.define(tagName, AreaContent);
}
break;
case "lar-backdrop":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "lar-button":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lar-button-group":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lar-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lar-modal":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lar-translate":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const LarAreaContent = AreaContent;
const defineCustomElement = defineCustomElement$1;
export { LarAreaContent, defineCustomElement };
//# sourceMappingURL=lar-area-content.js.map
//# sourceMappingURL=lar-area-content.js.map