@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
356 lines (351 loc) • 16.7 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h } from './p-AOwgnAK2.js';
import { R as ReportCodesHelpers } from './p-BN3DZ42s.js';
import { h as has } from './p-c4sz8_hg.js';
import { d as defineCustomElement$a } from './p-B7x5gzZv.js';
import { d as defineCustomElement$9 } from './p-BiG3U7GV.js';
import { d as defineCustomElement$8 } from './p-CihB8b9m.js';
import { d as defineCustomElement$7 } from './p-C9VBtzS4.js';
import { d as defineCustomElement$6 } from './p-9A4J2Z7t.js';
import { d as defineCustomElement$5 } from './p-Dsy6MkCW.js';
import { d as defineCustomElement$4 } from './p-CNwVOfNs.js';
import { d as defineCustomElement$3 } from './p-Bk24sn12.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 Area = /*@__PURE__*/ proxyCustomElement(class Area extends H {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
this.output = createEvent(this, "output");
this.request = createEvent(this, "request");
/////// LarvaNode base properties
/**
* Component main icon
*/
this.icon = 'security';
/**
* The color to use from your application's color palette.
* Detrouble options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
this.color = 'primary';
/**
* Allow node indication color automatic change based on feedback/node value. Defaults to false
*/
this.allowIndicationAutoColoring = false;
/**
* Allow node color automatic change based on feedback/node value. Defaults to true
*/
this.allowNodeAutoColoring = true;
/**
* Enable quick action for security node
*/
this.enableSecurityQuickActions = false;
/**
* Is logging for this component enabled (lar-log subcomponent loaded)
*/
this.log = false;
/**
* Node size
*/
this.nodeSize = 'default';
/////// LarvaNode base properties and events - end
this.troubles = [];
this.zones = [];
this.armed = false;
this.zoneopened = false;
this.exitDelayActive = false;
this.entryDelayActive = false;
this.transactionDelay = 0;
this.alarm = false;
this.loading = true;
}
/**
* Larva input message
*/
async input(data) {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (!this.validateData(data)) {
// this may be some success response ors.
return;
}
// 8.5 Indications - Table 8 – Indication - I&HAS set / I&HAS unset
this.armed = ((_a = data.state) === null || _a === void 0 ? void 0 : _a.armed) ? true : false;
// 8.5 Indications - Table 8 – Indication - Entry indication (see 8.3.8.2) & Completion of setting (see 8.3.7) & Setting (see 8.3.4)
this.exitDelayActive = ((_b = data.state) === null || _b === void 0 ? void 0 : _b.exit_delay_active) ? true : false;
this.entryDelayActive = ((_c = data.state) === null || _c === void 0 ? void 0 : _c.entry_delay_active) ? true : false;
if (this.exitDelayActive || this.entryDelayActive) {
this.transactionDelay = this.exitDelayActive ? (_d = data.state) === null || _d === void 0 ? void 0 : _d.exit_delay_expires_in_seconds : (_e = data.state) === null || _e === void 0 ? void 0 : _e.entry_delay_expires_in_seconds;
this.transactionDelay = this.transactionDelay || 0;
this.transactionDelay = Math.round(this.transactionDelay);
}
// 8.5 Indications - Table 8 – Indication - Hold-up alarm condition, Intruder alarm condition
this.alarm = ((_f = data.state) === null || _f === void 0 ? void 0 : _f.alarm) ? true : false;
// 8.5 Indications - Table 8 – Indication - Fault conditions (see Table 1), Tamper condition, Alert indication
this.troubles = Array.isArray((_g = data.state) === null || _g === void 0 ? void 0 : _g.troubles) ? (_h = data.state) === null || _h === void 0 ? void 0 : _h.troubles : [];
// show only unacked troubles
this.troubles = this.troubles.filter(e => e.acked === null || e.acked === undefined);
// 8.5 Indications - Table 8 – Indication - Individual intrusion detector indication
this.zones = Array.isArray(data.zones) ? data.zones : [];
this.zonesString = JSON.stringify(this.zones);
this.troublesString = JSON.stringify(this.troubles);
this.loading = false;
}
/**
* Larva error input
*/
async error(data) {
if (this.node) {
this.node.error(data);
}
this.loading = false;
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.output.emit();
}
validateData(data) {
if (has(data, 'id') && has(data, 'state') && has(data, 'state.armed')) {
return true;
}
if (!has(data, 'success')) {
console.error('Area Invalid input message', data);
}
return false;
}
arm() {
this.loading = true;
return this.output.emit({ command: 'arm' });
}
partialArm(data) {
this.loading = true;
this.output.emit({ command: 'arm', override_zones: data.bypassZones, override_troubles: data.overrideTroubles });
}
disarm() {
this.loading = true;
this.output.emit({ command: 'disarm' });
}
render() {
let value = this.loading ? ' ' : 'area.disarmed';
let iconSmall = 'unlock';
let valueTranslationValues;
let iconSmallColor = this.colorIconSmall;
if (this.transactionDelayTimeout !== undefined) {
clearTimeout(this.transactionDelayTimeout);
this.transactionDelayTimeout = undefined;
}
// if ARMED, detect how its armed
if (this.armed) {
const bypassedZone = this.zones.find(z => z.overridden === true) ? true : false;
const bypassedTrouble = this.troubles.find(t => t.overridden === true) ? true : false;
const newTroubles = this.troubles.find(t => !t.overridden) ? true : false;
if (bypassedZone && bypassedTrouble) {
value = 'area.partalArmedWithTrouble';
iconSmall = 'halflock_trouble';
}
else if (bypassedTrouble) {
value = 'area.armedWithTouble';
iconSmall = 'lock_trouble';
}
else if (bypassedZone) {
value = 'area.partalArmed';
iconSmall = 'halflock';
}
else {
value = 'area.armed';
iconSmall = 'lock';
}
if (newTroubles) {
iconSmall = 'warning';
}
}
// if unarmed and we have troubles, change icon to warning
if (this.troubles.length > 0 && !this.armed) {
iconSmall = 'warning';
}
// exit delay indiction
if ((this.exitDelayActive || this.entryDelayActive) && this.transactionDelay > 0) {
value = this.exitDelayActive ? 'area.exitdelay' : 'area.entrydelay';
valueTranslationValues = { seconds: String(this.transactionDelay) };
this.transactionDelayTimeout = window.setTimeout(() => {
if (this.transactionDelay === 0) {
clearTimeout(this.transactionDelayTimeout);
}
else {
this.transactionDelay--;
}
forceUpdate(this.el);
}, 1000);
}
// if we have alarm state
// detect what alarm we have
if (this.alarm) {
const alarms = [];
const unresolvedRroubles = this.troubles.filter(t => (t.resolved === '' || t.resolved === null || t.resolved === undefined));
const intruderAlarm = unresolvedRroubles.find(t => (t.type_id === 0)) ? true : false;
const zoneAlarms = unresolvedRroubles.filter(t => { var _a; return t.type_id === 3 && !!((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); });
const fireAlarm = zoneAlarms.find(t => { var _a; return ReportCodesHelpers.isFireAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const medicalAlarm = zoneAlarms.find(t => { var _a; return ReportCodesHelpers.isMedicalAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const panicAlarm = zoneAlarms.find(t => { var _a; return ReportCodesHelpers.isPanicAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const otherAlarm = zoneAlarms.find(t => { var _a; return ReportCodesHelpers.isOtherAreaAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
if (intruderAlarm) {
alarms.push('intruder');
}
if (fireAlarm) {
alarms.push('fire');
}
if (medicalAlarm) {
alarms.push('medical');
}
if (panicAlarm) {
alarms.push('panic');
}
if (otherAlarm) {
alarms.push('other');
}
if (alarms.length === 0) {
alarms.push('other');
}
value = alarms.length > 1 ? 'area.alarms.multiple' : 'area.alarms.' + alarms[0];
iconSmall = alarms.length > 1 ? 'alarm' : alarms[0] + '_alarm';
}
if (this.allowIndicationAutoColoring && this.alarm) {
iconSmallColor = this.allowNodeAutoColoring === true ? 'light' : 'danger'; // node is collored, do not color icon
}
else if (this.allowIndicationAutoColoring) {
switch (iconSmall) {
case 'halflock_trouble':
case 'lock_trouble':
case 'halflock':
case 'warning':
iconSmallColor = 'warning';
break;
case 'unlock':
iconSmallColor = 'danger';
break;
case 'lock':
iconSmallColor = 'success';
break;
}
}
const componentProps = {
color: this.colorInputs || this.color,
colorModal: this.colorModal || this.color,
zones: this.zonesString,
troubles: this.troublesString,
armed: this.armed,
alarm: this.alarm,
zoneopened: this.zones.find(z => (z.state === 'open')) ? true : false,
hastroubles: this.troubles.length > 0,
icon: this.icon,
loading: this.loading,
onArm: () => this.arm(),
onDisarm: () => this.disarm(),
onOutput: (evt) => {
this.loading = true;
this.output.emit(evt.detail);
},
};
return [
h("lar-node", { key: 'f4d76b79f0f754bd1c672f2c10e853ac11838452', value: value, hideTitles: this.hideTitles, valueTranslationValues: valueTranslationValues, iconSmall: iconSmall, icon: this.icon, colorIconSmall: iconSmallColor, color: this.alarm && this.allowNodeAutoColoring === true ? 'danger' : this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.alarm && this.allowNodeAutoColoring === true ? 'danger' : this.colorModal, colorInputs: this.colorInputs, log: this.log, loading: this.loading, nodeSize: this.nodeSize, component: "lar-area-content", componentProps: componentProps }, this.enableSecurityQuickActions === true &&
h("lar-button-push", { key: 'b2a6c303bb9c096c499229f2d3acd77e31f1bd2a', size: "small", slot: "titles", color: this.colorInputs || this.color, disabled: this.loading || (this.zoneopened && !this.armed) || this.troubles.length > 0, onClick: ev => this.armed ? this.disarm() : this.arm() }), h("slot", { key: '8283b482e42c33b91a44cc1882be1e648a9e1920' })),
];
}
get el() { return this; }
static get style() { return areaCss; }
}, [257, "lar-area", {
"icon": [1025],
"color": [1025],
"colorModal": [1025, "color-modal"],
"colorInputs": [1025, "color-inputs"],
"colorIconSmall": [1, "color-icon-small"],
"allowIndicationAutoColoring": [4, "allow-indication-auto-coloring"],
"allowNodeAutoColoring": [4, "allow-node-auto-coloring"],
"enableSecurityQuickActions": [4, "enable-security-quick-actions"],
"hideTitles": [4, "hide-titles"],
"supTitle": [1, "sup-title"],
"subTitle": [1, "sub-title"],
"log": [4],
"mainTitle": [1, "main-title"],
"nodeSize": [1, "node-size"],
"zonesString": [32],
"armed": [32],
"zoneopened": [32],
"exitDelayActive": [32],
"entryDelayActive": [32],
"transactionDelay": [32],
"alarm": [32],
"troublesString": [32],
"loading": [32],
"input": [64],
"error": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-area", "lar-backdrop", "lar-button", "lar-button-push", "lar-icon", "lar-modal", "lar-node", "lar-node-titles", "lar-notify", "lar-translate"];
components.forEach(tagName => { switch (tagName) {
case "lar-area":
if (!customElements.get(tagName)) {
customElements.define(tagName, Area);
}
break;
case "lar-backdrop":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "lar-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "lar-button-push":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "lar-icon":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "lar-modal":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lar-node":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lar-node-titles":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lar-notify":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lar-translate":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const LarArea = Area;
const defineCustomElement = defineCustomElement$1;
export { LarArea, defineCustomElement };
//# sourceMappingURL=lar-area.js.map
//# sourceMappingURL=lar-area.js.map