@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
522 lines (521 loc) • 19.3 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h } from "@stencil/core";
import { i18n } from "../../utils/i18n";
export class TwoNCommanderDoor {
constructor() {
/////// LarvaNode base properties
this.icon = 'door';
this.color = 'primary';
this.allowIndicationAutoColoring = false;
this.log = false;
this.nodeSize = 'default';
/////// LarvaNode base properties - end
this.loading = true;
this.status = 'Unknown';
this.lockdown = 'Unknown';
this.doorState = 'Unknown';
this.doorSwitchState = 'Unknown';
}
async input(data) {
var _a, _b, _c, _d;
this.loading = false;
this.err = data === null || data === void 0 ? void 0 : data.err;
this.status = (_a = data === null || data === void 0 ? void 0 : data.status) !== null && _a !== void 0 ? _a : 'Unknown';
this.lockdown = (_b = data === null || data === void 0 ? void 0 : data.lockdown) !== null && _b !== void 0 ? _b : 'Unknown';
this.doorState = (_c = data === null || data === void 0 ? void 0 : data.doorState) !== null && _c !== void 0 ? _c : 'Unknown';
this.doorSwitch = data === null || data === void 0 ? void 0 : data.doorSwitch;
this.doorSwitchState = (_d = data === null || data === void 0 ? void 0 : data.doorSwitchState) !== null && _d !== void 0 ? _d : 'Unknown';
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.loading = true;
this.output.emit();
}
handleToggle() {
if (this.doorSwitch === undefined)
return;
// Request: doorSwitchState is 'True' (Unlocked) then send "Off" (Lock), else "On" (Unlock)
const action = this.doorSwitchState === 'True' ? 'Off' : 'On';
this.output.emit({
doorSwitch: action
});
this.loading = true;
}
render() {
const isLockdown = this.lockdown === 'Lockdown' || this.lockdown === 'PartialLockdown';
const isUnlocked = this.doorSwitchState === 'True';
const hasError = !!this.err;
// Icon Logic
let iconSmall = 'door';
if (hasError || isLockdown) {
iconSmall = 'warning';
}
else if (this.doorState !== undefined) {
iconSmall = isUnlocked ? 'unlock' : 'lock';
}
else {
// Feedback based on Door Status if switch not present
if (this.doorState === 'Opened')
iconSmall = 'unlock';
else if (this.doorState === 'Closed')
iconSmall = 'lock';
}
// Value Text Logic
let value = this.status;
if (hasError) {
value = this.err || 'door.error';
}
else if (isLockdown) {
value = i18n.t(`twoNCommanderDoor.lockdown.${this.lockdown}`);
}
else {
if (this.doorState !== 'Unknown' && this.doorSwitchState !== 'Unknown') {
value = i18n.t('twoNCommanderDoor.format', {
doorSwitchState: i18n.t(`twoNCommanderDoor.doorSwitchState.${this.doorSwitchState}`),
doorState: i18n.t(`twoNCommanderDoor.doorState.${this.doorState}`)
});
}
else if (this.doorSwitchState !== 'Unknown') {
value = i18n.t(`twoNCommanderDoor.doorSwitchState.${this.doorSwitchState}`);
}
else if (this.doorState !== 'Unknown') {
value = i18n.t(`twoNCommanderDoor.doorState.${this.doorState}`);
}
}
// Color Logic
let calculatedColor = this.colorIconSmall;
if (this.allowIndicationAutoColoring && !this.loading) {
if (hasError || isLockdown) {
calculatedColor = 'danger';
}
else if (isUnlocked) {
calculatedColor = 'danger';
}
else if (this.status === 'Online') {
calculatedColor = 'success';
}
else {
calculatedColor = 'medium';
}
}
const colorIconSmall = this.allowIndicationAutoColoring ? calculatedColor : this.colorIconSmall;
// Button Props
const showButton = this.doorSwitch !== undefined;
const buttonDisabled = this.loading || hasError || isLockdown || this.status !== 'Online';
// If Unlocked (True) -> Button should Lock -> Label 'Lock', Icon 'Lock'
// If Locked (False/Unknown) -> Button should Unlock -> Label 'Unlock', Icon 'Unlock'
const buttonLabel = isUnlocked ? 'door.lock' : 'door.unlock';
const buttonIcon = isUnlocked ? 'lock' : 'unlock';
const componentProps = showButton ? {
onClick: () => this.handleToggle(),
value: buttonLabel,
icon: buttonIcon,
disabled: buttonDisabled,
color: this.colorInputs || this.color
} : undefined;
return (h("lar-node", { key: 'bfc315c7977bf9ded6c6e01231c8a4bf97a1a62c', value: value, hideTitles: this.hideTitles, iconSmall: iconSmall, colorIconSmall: colorIconSmall, icon: this.icon, color: this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.colorModal, colorInputs: this.colorInputs, nodeSize: this.nodeSize, log: this.log, loading: this.loading, component: showButton ? "lar-2n-commander-door-content" : undefined, componentProps: componentProps }, h("slot", { key: '9e195d498939920adbf3c81d4d628e37a4e388b1' })));
}
static get is() { return "lar-2n-commander-door"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["2n-commander-door.scss"]
};
}
static get styleUrls() {
return {
"$": ["2n-commander-door.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon",
"defaultValue": "'door'"
},
"color": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color",
"defaultValue": "'primary'"
},
"colorModal": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-modal"
},
"colorInputs": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-inputs"
},
"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": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-icon-small"
},
"allowIndicationAutoColoring": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "allow-indication-auto-coloring",
"defaultValue": "false"
},
"hideTitles": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "hide-titles"
},
"supTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sup-title"
},
"subTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sub-title"
},
"log": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "log",
"defaultValue": "false"
},
"mainTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "main-title"
},
"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": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "node-size",
"defaultValue": "'default'"
},
"options": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "options"
}
};
}
static get states() {
return {
"loading": {},
"err": {},
"status": {},
"lockdown": {},
"doorState": {},
"doorSwitch": {},
"doorSwitchState": {}
};
}
static get events() {
return [{
"method": "output",
"name": "output",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DataOut",
"resolved": "DataOut",
"references": {
"DataOut": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::DataOut"
}
}
}
}, {
"method": "request",
"name": "request",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"input": {
"complexType": {
"signature": "(data: DataIn) => Promise<void>",
"parameters": [{
"name": "data",
"type": "DataIn",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"DataIn": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::DataIn"
},
"DeviceStatus": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::DeviceStatus"
},
"LockdownState": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::LockdownState"
},
"DoorStatus": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::DoorStatus"
},
"SwitchState": {
"location": "import",
"path": "./2n-commander-door.interface",
"id": "src/components/2n-commander-door/2n-commander-door.interface.ts::SwitchState"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=2n-commander-door.js.map