@larva.io/webcomponents/dist/esm/lar-range.entry.js

Fentrica SmartUnits WebComponents package

/*!
 * (C) Fentrica http://fentrica.com - Seee LICENSE.md
 */
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-C4h1muVj.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
    static get watchers() { return {
        "value": ["changeToggle"]
    }; }
};
LarvaRangeNode.style = rangeCss;

export { LarvaRangeNode as lar_range };
//# sourceMappingURL=lar-range.entry.js.map