@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
292 lines (285 loc) • 12.2 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, h } from './p-AOwgnAK2.js';
import { i as isArray, a as isObject } from './p-Cvhpe3ZV.js';
import { i as isNumber } from './p-CNlCQBQJ.js';
import { d as baseClone } from './p-CTDfPEUz.js';
import { D as DoorState } from './p-B-CH3G6g.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';
/** Used to compose bitmasks for cloning. */
var CLONE_SYMBOLS_FLAG = 4;
/**
* Creates a shallow clone of `value`.
*
* **Note:** This method is loosely based on the
* [structured clone algorithm](https://mdn.io/Structured_clone_algorithm)
* and supports cloning arrays, array buffers, booleans, date objects, maps,
* numbers, `Object` objects, regexes, sets, strings, symbols, and typed
* arrays. The own enumerable properties of `arguments` objects are cloned
* as plain objects. An empty object is returned for uncloneable values such
* as error objects, functions, DOM nodes, and WeakMaps.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to clone.
* @returns {*} Returns the cloned value.
* @see _.cloneDeep
* @example
*
* var objects = [{ 'a': 1 }, { 'b': 2 }];
*
* var shallow = _.clone(objects);
* console.log(shallow[0] === objects[0]);
* // => true
*/
function clone(value) {
return baseClone(value, CLONE_SYMBOLS_FLAG);
}
const slidingDoorCss = "slot-fb[hidden],slot[hidden]{display:initial !important}lar-button-group{display:-ms-flexbox;display:flex;gap:0.5rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;max-width:400px;margin:2rem auto;padding:0.4rem;background:rgba(0, 0, 0, 0.03);border-radius:0.8rem;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5)}lar-button-group lar-button{-ms-flex:1;flex:1;min-height:3.5rem;font-weight:600;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.05em;border-radius:0.5rem;-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1)}lar-button-group lar-button:active{-webkit-transform:scale(0.97);transform:scale(0.97)}";
const SlidingDoorNode = /*@__PURE__*/ proxyCustomElement(class SlidingDoorNode 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 = 'off';
/**
* 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';
/**
* Disable quck actions
*/
this.disableQuickActions = false;
/**
* Allow node indication color automatic change based on feedback/node value. Defaults to false
*/
this.allowIndicationAutoColoring = false;
/**
* Is logging for this component enabled (lar-log subcomponent loaded)
*/
this.log = true;
/**
* Node size
*/
this.nodeSize = 'default';
/////// LarvaNode base properties and events - end
this.loading = true;
this.fullState = {
doorState: undefined,
doorStateString: DoorState.UNKNOWN,
slidingTimerRunning: false,
slidingTimerElapsed: 0,
slidingTimerTimeout: 0,
slidingTimerStartedAt: 0,
stopEnabled: false
};
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.output.emit({ command: 'get' });
}
/**
* Larva error input
*/
async error(data) {
if (this.node) {
this.node.error(data);
}
this.loading = false;
}
/**
* Input Larva event message (see above)
*/
async input(data) {
if (isArray(data)) ;
else if (isObject(data)) {
const lastState = clone(this.fullState);
this.fullState = data;
if (this.fullState.slidingTimerRunning && isNumber(this.fullState.slidingTimerElapsed) && isNumber(this.fullState.slidingTimerTimeout)) {
if (!this.timer || lastState.slidingTimerStartedAt !== this.fullState.slidingTimerStartedAt) {
// restart the timer if slidingTimerStartedAt has changed
this.startTimer();
}
}
if (!this.fullState.slidingTimerRunning && this.timer) {
this.resetTimer();
}
}
this.loading = false;
}
resetTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
startTimer() {
this.timerValue = this.fullState.slidingTimerElapsed;
const intervalTime = 1000;
this.resetTimer();
this.timer = setInterval(() => {
try {
if (!this.fullState.slidingTimerRunning || this.timerValue > this.fullState.slidingTimerTimeout) {
this.resetTimer();
// timer should have been stopped by now
// make read request to get the state
this.output.emit({ command: 'get' });
this.loading = true;
}
this.timerValue += intervalTime;
}
catch (err) {
console.error(err);
}
}, intervalTime);
}
sendCommand(cmd) {
this.output.emit({ command: cmd });
this.loading = true;
}
render() {
let value = this.loading ? '' : 'slidingDoor.stateUnknown';
let iconSmall = '';
let colorIconSmall = this.colorIconSmall;
switch (this.fullState.doorStateString) {
case DoorState.CLOSED: {
value = 'slidingDoor.stateClosed';
iconSmall = 'lock';
colorIconSmall = this.allowIndicationAutoColoring ? 'success' : this.colorIconSmall;
break;
}
case DoorState.OPEN: {
value = 'slidingDoor.stateOpen';
iconSmall = 'unlock';
colorIconSmall = this.allowIndicationAutoColoring ? 'danger' : this.colorIconSmall;
break;
}
case DoorState.OPENING: {
iconSmall = 'moving-cogs';
value = 'slidingDoor.stateOpening';
break;
}
case DoorState.CLOSING: {
iconSmall = 'moving-cogs';
value = 'slidingDoor.stateClosing';
break;
}
}
const componentProps = {
doorState: this.fullState.doorStateString,
stopEnabled: Boolean(this.fullState.stopEnabled),
color: this.colorInputs || this.color,
loading: this.loading,
onSendcommand: (ev) => this.sendCommand(ev.detail),
};
return (h("lar-node", { key: '390a6cfd0d7a6325c6b58d536c3837361ead69d6', value: value, hideTitles: this.hideTitles, icon: this.icon, iconSmall: iconSmall, color: this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.colorModal, colorInputs: this.colorInputs, colorIconSmall: colorIconSmall, loading: this.loading, log: this.log, nodeSize: this.nodeSize, component: "sliding-door-content", componentProps: componentProps }, this.disableQuickActions === false &&
h("lar-button-push", { key: '9c30b34b67b21e064356b40937db5cb293cf7151', size: "small", slot: "titles", color: this.colorInputs || this.color, disabled: this.loading || this.fullState.slidingTimerRunning || !this.fullState.doorStateString || this.fullState.doorStateString === DoorState.UNKNOWN || this.fullState.doorStateString === DoorState.OPENING || this.fullState.doorStateString === DoorState.CLOSING, onClick: ev => this.fullState.doorStateString === DoorState.CLOSED ? this.sendCommand('open') : this.sendCommand('close') }), h("slot", { key: '7d45b188ba352f169058e0c0af03204badb1b11a' })));
}
get el() { return this; }
static get style() { return slidingDoorCss; }
}, [257, "lar-sliding-door", {
"icon": [1025],
"color": [1025],
"colorModal": [1025, "color-modal"],
"colorInputs": [1025, "color-inputs"],
"colorIconSmall": [1, "color-icon-small"],
"disableQuickActions": [4, "disable-quick-actions"],
"allowIndicationAutoColoring": [4, "allow-indication-auto-coloring"],
"hideTitles": [4, "hide-titles"],
"supTitle": [1, "sup-title"],
"subTitle": [1, "sub-title"],
"log": [4],
"mainTitle": [1, "main-title"],
"nodeSize": [1, "node-size"],
"loading": [32],
"doorState": [32],
"fullState": [32],
"timerValue": [32],
"error": [64],
"input": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-sliding-door", "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-sliding-door":
if (!customElements.get(tagName)) {
customElements.define(tagName, SlidingDoorNode);
}
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 LarSlidingDoor = SlidingDoorNode;
const defineCustomElement = defineCustomElement$1;
export { LarSlidingDoor, defineCustomElement };
//# sourceMappingURL=lar-sliding-door.js.map
//# sourceMappingURL=lar-sliding-door.js.map