@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
227 lines (222 loc) • 8.23 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, h } from './p-AOwgnAK2.js';
import { d as defineCustomElement$9 } from './p-B7x5gzZv.js';
import { d as defineCustomElement$8 } from './p-C9VBtzS4.js';
import { d as defineCustomElement$7 } from './p-9A4J2Z7t.js';
import { d as defineCustomElement$6 } from './p-Dsy6MkCW.js';
import { d as defineCustomElement$5 } from './p-CNwVOfNs.js';
import { d as defineCustomElement$4 } from './p-Bk24sn12.js';
import { d as defineCustomElement$3 } from './p-BAe61gUe.js';
import { d as defineCustomElement$2 } from './p-B-fmI6sr.js';
const rangeCss = "slot-fb[hidden],slot[hidden]{display:initial !important}.center{text-align:center;padding:1rem 1.5rem}.center lar-button{margin-bottom:1.5rem;-webkit-box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.08)}.center lar-slider{margin:0 auto;max-width:100%}";
const LarvaRangeNode = /*@__PURE__*/ proxyCustomElement(class LarvaRangeNode 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';
/**
* Disable quck actions
*/
this.disableQuickActions = 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.checked = false;
this.value = 0;
this.step = 1;
this.min = 0;
this.max = 100;
this.loading = true;
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.output.emit({}); // getFullState
}
/**
* Larva error input
*/
async error(data) {
if (this.node) {
this.node.error(data);
}
this.loading = false;
// revert last switch back if error response
this.checked = !this.checked;
}
changeToggle() {
this.checked = Boolean(this.value);
}
/**
* Larva input message
*/
async input(data) {
let value = parseFloat(data.value);
if (isNaN(value)) {
console.error(`lar-range receuived invalid message: ${JSON.stringify(data)}`);
value = 0;
}
if (data.step) {
const step = parseFloat(data.step);
this.step = isNaN(step) ? this.step : step;
}
if (data.min) {
const min = parseFloat(data.min);
this.min = isNaN(min) ? this.min : min;
}
if (data.max) {
const max = parseFloat(data.max);
this.max = isNaN(max) ? this.max : max;
}
this.value = value;
this.loading = false;
}
handleChange(value) {
this.value = value;
}
handleChangeToggle(value) {
if (value === this.checked) {
return;
}
if (value) {
this.value = this.max;
}
else {
this.value = this.min;
}
this.handleBlur();
}
handleBlur() {
if (!Number.isNaN(this.value) && this.loading === false) {
this.loading = true;
this.output.emit(this.value);
}
}
render() {
const componentProps = {
onButtonclick: () => this.handleChangeToggle(!this.checked),
onLarchange: (ev) => this.handleChange(ev.detail.value),
onLarblur: () => this.handleBlur(),
buttonValue: this.checked ? 'onoff.switchoff' : 'onoff.switchon',
disabled: this.loading,
color: this.colorInputs || this.color,
value: this.value,
min: this.min,
max: this.max,
step: this.step
};
return [
h("lar-node", { key: 'edabbcc159c8be5bb1790634042de765dc12a48d', value: String(this.value || 0), hideTitles: this.hideTitles, icon: this.icon, color: this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.colorModal, colorInputs: this.colorInputs, colorIconSmall: this.colorIconSmall, loading: this.loading, log: this.log, nodeSize: this.nodeSize, component: "range-content", componentProps: componentProps }, this.disableQuickActions === false &&
h("lar-toggle", { key: 'd74da38497e68e1df21a0381bce32a7dd3e0c36a', slot: "titles", onLarchange: ev => this.handleChangeToggle(ev.detail.checked), checked: this.checked, color: this.colorInputs || this.color }), h("slot", { key: 'e31a84a20b75ee585d1dcc5a722f76bd7dae0ab0' }))
];
}
get el() { return this; }
static get watchers() { return {
"value": ["changeToggle"]
}; }
static get style() { return rangeCss; }
}, [257, "lar-range", {
"icon": [1025],
"color": [1025],
"colorModal": [1025, "color-modal"],
"colorInputs": [1025, "color-inputs"],
"colorIconSmall": [1, "color-icon-small"],
"disableQuickActions": [4, "disable-quick-actions"],
"hideTitles": [4, "hide-titles"],
"supTitle": [1, "sup-title"],
"subTitle": [1, "sub-title"],
"log": [4],
"mainTitle": [1, "main-title"],
"nodeSize": [1, "node-size"],
"checked": [32],
"value": [32],
"step": [32],
"min": [32],
"max": [32],
"loading": [32],
"error": [64],
"input": [64]
}, undefined, {
"value": ["changeToggle"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-range", "lar-backdrop", "lar-icon", "lar-modal", "lar-node", "lar-node-titles", "lar-notify", "lar-toggle", "lar-translate"];
components.forEach(tagName => { switch (tagName) {
case "lar-range":
if (!customElements.get(tagName)) {
customElements.define(tagName, LarvaRangeNode);
}
break;
case "lar-backdrop":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "lar-icon":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "lar-modal":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "lar-node":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lar-node-titles":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lar-notify":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lar-toggle":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lar-translate":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const LarRange = LarvaRangeNode;
const defineCustomElement = defineCustomElement$1;
export { LarRange, defineCustomElement };
//# sourceMappingURL=lar-range.js.map
//# sourceMappingURL=lar-range.js.map