webwriter-chart/types/helper-components/LimitedNumberInput.js

ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
import { LitElementWw } from "@webwriter/lit";
import { html } from "lit";
import { customElement, property } from "lit/decorators.js";
let NumberInput = class NumberInput extends LitElementWw {
    #value_accessor_storage = 0;
    get value() { return this.#value_accessor_storage; }
    set value(value) { this.#value_accessor_storage = value; }
    #min_accessor_storage = Number.MIN_SAFE_INTEGER;
    get min() { return this.#min_accessor_storage; }
    set min(value) { this.#min_accessor_storage = value; }
    #max_accessor_storage = Number.MAX_SAFE_INTEGER;
    get max() { return this.#max_accessor_storage; }
    set max(value) { this.#max_accessor_storage = value; }
    #label_accessor_storage = "";
    get label() { return this.#label_accessor_storage; }
    set label(value) { this.#label_accessor_storage = value; }
    #disabled_accessor_storage = false;
    get disabled() { return this.#disabled_accessor_storage; }
    set disabled(value) { this.#disabled_accessor_storage = value; }
    inputEvent(e) {
        const value = Number(e.target.value);
        this.value = value;
        if (isNaN(value))
            this.value = 0;
        if (this.min !== undefined && value < this.min)
            this.value = this.min;
        if (this.max !== undefined && value > this.max)
            this.value = this.max;
        e.target.value = this.value;
        this.dispatchEvent(new CustomEvent("wwci-limited-number-input", {
            detail: { value: this.value },
            composed: true,
        }));
    }
    render() {
        return html ` <sl-input
      type="number"
      label=${this.label}
      value=${this.value}
      ?disabled=${this.disabled}
      @sl-input=${this.inputEvent}
      sl-change=${this.inputEvent}
    ></sl-input>`;
    }
    static get scopedElements() {
        return {
            "sl-input": SlInput,
        };
    }
};
__decorate([
    property({ type: Number })
], NumberInput.prototype, "value", null);
__decorate([
    property({ type: Number })
], NumberInput.prototype, "min", null);
__decorate([
    property({ type: Number })
], NumberInput.prototype, "max", null);
__decorate([
    property({ type: String })
], NumberInput.prototype, "label", null);
__decorate([
    property({ type: Boolean })
], NumberInput.prototype, "disabled", null);
NumberInput = __decorate([
    customElement("wwci-limited-number-input")
], NumberInput);
export { NumberInput };