@ixfx/components 0.2.3 → 0.2.4

package/dist/editable-label/editable-number.js

@@ -0,0 +1,702 @@
+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 { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { KEY_STEP_DIVISOR, resolveStep } from '../keyboard.js';
+import { prominenceStyles } from '../styles/prominence.js';
+import { EditableLabel } from './editable-label.js';
+const DRAG_THRESHOLD_PX = 3;
+let EditableNumber = class EditableNumber extends EditableLabel {
+    // ── Drag state (not reactive — managed imperatively to avoid Lit cycles) ──
+    #dragStartY;
+    #dragStartValue;
+    #dragging;
+    #hasDragged;
+    #dragCurrentValue;
+    #lastInputValue;
+    #firstUpdateComplete;
+    constructor() {
+        super();
+        this.dragSensitivity = 1;
+        this.noDrag = false;
+        this.precision = 0;
+        // ── Drag state (not reactive — managed imperatively to avoid Lit cycles) ──
+        this.#dragStartY = 0;
+        this.#dragStartValue = 0;
+        this.#dragging = false;
+        this.#hasDragged = false;
+        this.#dragCurrentValue = 0;
+        this.#lastInputValue = ``;
+        this.#firstUpdateComplete = false;
+        this._stopNativeInput = (e) => {
+            e.stopPropagation();
+        };
+        this._handleMouseEnter = () => {
+            if (this.displayTextLogic !== `transient` || this._editing)
+                return;
+            this._hovering = true;
+            this._clearTransientTimer();
+            this._transientTimer = window.setTimeout(() => {
+                this._transientShowingValue = true;
+                this._requestDisplayUpdate();
+            }, this.appearDelay);
+        };
+        this._handleMouseLeave = () => {
+            if (this.displayTextLogic !== `transient` || this._editing)
+                return;
+            this._hovering = false;
+            this._clearTransientTimer();
+            if (this._transientShowingValue) {
+                this._transientTimer = window.setTimeout(() => {
+                    if (!this._hovering) {
+                        this._transientShowingValue = false;
+                        this._requestDisplayUpdate();
+                    }
+                }, this.disappearDelay);
+            }
+        };
+        // ── Override parent interaction — focus only, edit via keypress ───────────
+        /** Click just focuses; edit mode is entered by pressing a key while focused. */
+        this._handleClick = () => {
+            if (this.disabled)
+                return;
+            this.renderRoot?.querySelector(`.number`)?.focus();
+        };
+        /** Suppress auto-edit-on-focus from editor mode; keydown handles it instead. */
+        this._handleFocus = () => { };
+        // ── Override parent's input handling — fire 'input' events on each keypress ──
+        this._handleBeforeInput = (e) => {
+            if (e.inputType !== `insertText` || !e.data) {
+                return;
+            }
+            if (!this._isAllowedInput(e.data)) {
+                e.preventDefault();
+                return;
+            }
+            const contentEl = this._contentEl;
+            if (!contentEl) {
+                return;
+            }
+            const currentContent = contentEl.textContent ?? ``;
+            const insertPosition = contentEl.selectionStart ?? currentContent.length;
+            const newValue = currentContent.slice(0, insertPosition) + e.data + currentContent.slice(insertPosition);
+            if (newValue !== this.#lastInputValue) {
+                this.#lastInputValue = newValue;
+                this.dispatchEvent(new CustomEvent(`input`, {
+                    detail: { value: newValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleKeydown = (e) => {
+            if (!this._editing) {
+                return;
+            }
+            if (e.key === `Enter`) {
+                e.preventDefault();
+                this._tryCommit();
+                if (this.mode === `editor`)
+                    this._contentEl?.blur();
+            }
+            else if (e.key === `Escape`) {
+                e.preventDefault();
+                this.dispatchEvent(new CustomEvent(`cancelled`, {
+                    detail: { value: this._prevValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this._cancelEdit();
+                this.dispatchEvent(new CustomEvent(`change`, {
+                    detail: { value: this._prevValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+                if (this.mode === `editor`)
+                    this._contentEl?.blur();
+            }
+        };
+        // ── Drag event handlers ───────────────────────────────────────────────────
+        this._onKeyDown = (e) => {
+            if (this._editing || this.disabled)
+                return;
+            if (this._handleArrowKey(e)) {
+                return;
+            }
+            // Printable characters while focused → enter edit mode.
+            // Enter is intentionally excluded: the parent handles Enter for commit,
+            // and including it here would re-enter edit mode immediately after commit.
+            if (e.key.length === 1) {
+                this._onUserInteraction();
+                this._beginEdit();
+            }
+        };
+        this._onPointerDown = (e) => {
+            if (e.button !== 0)
+                return; // left button only
+            if (this._editing)
+                return; // let contenteditable handle it
+            if (this.disabled || this.noDrag)
+                return;
+            e.preventDefault(); // suppress browser text-select / native drag
+            this.renderRoot?.querySelector(`.number`)?.focus(); // restore focus manually
+            this.#dragStartY = e.clientY;
+            this.#dragStartValue = this._parseValue();
+            this.#dragCurrentValue = this.#dragStartValue;
+            this.#dragging = false;
+            this.#hasDragged = false;
+            this.setPointerCapture(e.pointerId);
+        };
+        this._onPointerMove = (e) => {
+            if (!(e.buttons & 1))
+                return; // left button must be held
+            if (this._editing)
+                return;
+            if (this.disabled || this.noDrag)
+                return;
+            const deltaY = this.#dragStartY - e.clientY; // up = positive
+            if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX)
+                return;
+            this.#dragging = true;
+            this.#hasDragged = true;
+            this.toggleAttribute(`dragging`, true);
+            this._onUserInteraction();
+            const raw = this.#dragStartValue + deltaY * this.dragSensitivity * (this.step || 1);
+            const snapped = this._clamp(this._snap(raw));
+            // When step is set, snapping already gives the right precision.
+            // When step is unset, round to `precision` decimal places.
+            this.#dragCurrentValue = this.step !== undefined
+                ? snapped
+                : Number.parseFloat(snapped.toFixed(this.precision));
+            const dragValueStr = this.step !== undefined
+                ? this._formatNumber(this.#dragCurrentValue)
+                : this.#dragCurrentValue.toFixed(this.precision);
+            if (dragValueStr !== this.#lastInputValue) {
+                this.#lastInputValue = dragValueStr;
+                this.dispatchEvent(new CustomEvent(`input`, {
+                    detail: { value: dragValueStr },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            // Update display using parent's displayTextLogic handling
+            this._requestDisplayUpdate();
+            this._updateValueCss(this._normalizedValue(this.#dragCurrentValue));
+        };
+        this._onPointerUp = (e) => {
+            if (this.hasPointerCapture(e.pointerId))
+                this.releasePointerCapture(e.pointerId);
+            if (!this.#dragging)
+                return;
+            if (this.disabled || this.noDrag)
+                return;
+            this.#dragging = false;
+            this.toggleAttribute(`dragging`, false);
+            // Format with step-based or precision-based dp so trailing zeros are preserved
+            // in the stored string (e.g. "5.0" when precision=1, not "5").
+            const finalStr = this.step !== undefined
+                ? this._formatNumber(this.#dragCurrentValue)
+                : this.#dragCurrentValue.toFixed(this.precision);
+            const prev = this.value;
+            this.value = finalStr;
+            if (finalStr !== prev) {
+                this.dispatchEvent(new CustomEvent(`change`, {
+                    detail: { value: finalStr },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._interceptClick = (e) => {
+            if (this.#hasDragged) {
+                e.stopImmediatePropagation();
+                this.#hasDragged = false;
+            }
+        };
+        // Override parent defaults for a number input context
+        this.mode = `editor`;
+        this.entryMode = `number`;
+        this.value = `0`;
+    }
+    // ── Render ───────────────────────────────────────────────────────────────────
+    render() {
+        return html `
+      ${this.fillStyle ? html `<div class="track"></div>` : ``}
+      ${this.fillStyle ? html `<div class="value"><div class="bar"></div></div>` : ``}
+      <div
+        class="number"
+        part="content"
+        tabindex="${this.disabled ? -1 : 0}"
+        contenteditable="${this._editing ? `plaintext-only` : `false`}"
+        data-placeholder="${this.placeholder}"
+        @click=${this._handleClick}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+        @keydown=${this._handleKeydown}
+        @beforeinput=${this._handleBeforeInput}
+        @input=${this._stopNativeInput}
+      ></div>
+    `;
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(`pointerdown`, this._onPointerDown);
+        this.addEventListener(`pointermove`, this._onPointerMove);
+        this.addEventListener(`pointerup`, this._onPointerUp);
+        this.addEventListener(`keydown`, this._onKeyDown);
+        this.addEventListener(`click`, this._interceptClick, { capture: true });
+        this.addEventListener(`mouseenter`, this._handleMouseEnter);
+        this.addEventListener(`mouseleave`, this._handleMouseLeave);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(`pointerdown`, this._onPointerDown);
+        this.removeEventListener(`pointermove`, this._onPointerMove);
+        this.removeEventListener(`pointerup`, this._onPointerUp);
+        this.removeEventListener(`keydown`, this._onKeyDown);
+        this.removeEventListener(`click`, this._interceptClick);
+        this.removeEventListener(`mouseenter`, this._handleMouseEnter);
+        this.removeEventListener(`mouseleave`, this._handleMouseLeave);
+    }
+    /** Override to use .number instead of .content for text display */
+    get _contentEl() {
+        const el = this.renderRoot?.querySelector(`.number`);
+        return el ?? undefined;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // For 'show' mode, start by showing displayText at rest
+        if (this.displayTextLogic === `show`) {
+            this._showModeWaitingToHide = true;
+        }
+        this._updateValueCss(this._normalizedValue());
+        this._requestDisplayUpdate();
+    }
+    _onUserInteraction() {
+        if (this.displayTextLogic === `show` && !this._editing) {
+            this._clearTransientTimer();
+            this._showModeWaitingToHide = false;
+            this._requestDisplayUpdate();
+            this._transientTimer = window.setTimeout(() => {
+                this._showModeWaitingToHide = true;
+                this._requestDisplayUpdate();
+            }, this.disappearDelay);
+            return;
+        }
+        if (this.displayTextLogic === `transient` && !this._editing) {
+            this._clearTransientTimer();
+            this._transientShowingValue = true;
+            this._requestDisplayUpdate();
+            this._transientTimer = window.setTimeout(() => {
+                if (!this._hovering) {
+                    this._transientShowingValue = false;
+                    this._requestDisplayUpdate();
+                }
+            }, this.disappearDelay);
+            return;
+        }
+        super._onUserInteraction();
+    }
+    _onValueChange() {
+        if (this.displayTextLogic !== `show` || this._editing)
+            return;
+        this._clearTransientTimer();
+        this._showModeWaitingToHide = false;
+        this._requestDisplayUpdate();
+        this._transientTimer = window.setTimeout(() => {
+            this._showModeWaitingToHide = true;
+            this._requestDisplayUpdate();
+        }, this.disappearDelay);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Note: We do NOT call _onValueChange here for 'show' mode.
+        // The parent class handles display updates via _requestDisplayUpdate
+        // in firstUpdated. Additional value changes are handled via
+        // drag/keyboard events that call _onValueChange directly.
+        if (!this._editing) {
+            this._updateValueCss(this._normalizedValue());
+        }
+    }
+    _updateValueCss(normalized) {
+        this.style.setProperty(`--value`, String(normalized));
+        let valueStart = 0;
+        let valueEnd = normalized;
+        if (this.linearStyle === `bipolar`) {
+            if (normalized <= 0.5) {
+                valueStart = normalized;
+                valueEnd = 0.5;
+            }
+            else {
+                valueStart = 0.5;
+                valueEnd = normalized;
+            }
+        }
+        else if (this.linearStyle === `unipolar`) {
+            valueStart = 0.5 - normalized * 0.5;
+            valueEnd = 0.5 + normalized * 0.5;
+        }
+        this.style.setProperty(`--value-start`, String(valueStart));
+        this.style.setProperty(`--value-end`, String(valueEnd));
+        // For circular offset mode, compute pixel offset from center
+        // and set component dimensions for radius calculation
+        if (this.fillStyle === `circular` && this.circularStyle === `offset`) {
+            const h = this.offsetHeight;
+            const w = this.offsetWidth;
+            const r = h / 2 - 2; // radius with margin to prevent clipping at top/bottom
+            // Circle edges must stay 2px inside component edges:
+            // - at value=0: circle left edge at 2px
+            // - at value=1: circle right edge at w-2px
+            const leftEdge = 2;
+            const rightEdge = w - 2;
+            const valueCenterPx = leftEdge + r + normalized * (rightEdge - leftEdge - 2 * r);
+            this.style.setProperty(`--radius`, `${r}px`);
+            this.style.setProperty(`--value-center-px`, `${valueCenterPx}px`);
+            this.style.setProperty(`--component-width-px`, `${w}px`);
+            this.style.setProperty(`--component-height-px`, `${h}px`);
+        }
+    }
+    _getDisplayText() {
+        // In override mode, always show displayText (even when dragging or editing)
+        if (this._shouldUseDisplayText()) {
+            return this.displayText ?? ``;
+        }
+        // For transient mode, show the drag value while dragging
+        if (this.#dragging) {
+            const formatted = this.step !== undefined
+                ? this._formatNumber(this.#dragCurrentValue)
+                : this.#dragCurrentValue.toFixed(this.precision);
+            return this.formatter ? this.formatter(formatted) : formatted;
+        }
+        // Normal case: when a custom formatter is set, pass raw value so formatter
+        // can apply its own precision logic (e.g. "0.5" → "50%" without precision loss)
+        if (this.formatter) {
+            const raw = Number.parseFloat(this.value);
+            return this.formatter(Number.isNaN(raw) ? this.value : String(raw));
+        }
+        return this._formatDisplay();
+    }
+    // ── Clamp before parent commits (overrides parent's private _tryCommit) ──
+    _tryCommit() {
+        const el = this.renderRoot?.querySelector(`.number`);
+        if (el) {
+            const n = Number.parseFloat(el.textContent?.trim() ?? ``);
+            if (!Number.isNaN(n)) {
+                el.textContent = this._formatNumber(this._clamp(this._snap(n)));
+            }
+        }
+        super._tryCommit();
+    }
+    _handleArrowKey(e) {
+        const range = (this.max ?? 100) - (this.min ?? 0);
+        if (range === 0)
+            return false;
+        const shiftDivisor = e.shiftKey ? KEY_STEP_DIVISOR : 1;
+        const effectiveStep = resolveStep(range, undefined, this.step) / shiftDivisor;
+        let delta = 0;
+        let handled = false;
+        switch (e.key) {
+            case `ArrowUp`:
+            case `ArrowRight`:
+                delta = effectiveStep;
+                handled = true;
+                break;
+            case `ArrowDown`:
+            case `ArrowLeft`:
+                delta = -effectiveStep;
+                handled = true;
+                break;
+            case `Home`:
+                delta = -(this._parseValue() - (this.min ?? 0));
+                handled = true;
+                break;
+            case `End`:
+                delta = (this.max ?? 0) - this._parseValue();
+                handled = true;
+                break;
+        }
+        if (handled) {
+            e.preventDefault();
+            const prev = this.value;
+            const current = this._parseValue();
+            const newValue = this._clamp(this._snap(current + delta));
+            const newValueStr = this.step !== undefined
+                ? this._formatNumber(newValue)
+                : newValue.toFixed(this.precision);
+            this.value = newValueStr;
+            this._requestDisplayUpdate();
+            this._updateValueCss(this._normalizedValue(newValue));
+            if (newValueStr !== prev) {
+                this.dispatchEvent(new CustomEvent(`input`, {
+                    detail: { value: newValueStr },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            requestAnimationFrame(() => {
+                if (this.value !== prev) {
+                    this.dispatchEvent(new CustomEvent(`change`, {
+                        detail: { value: this.value },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            });
+            return true;
+        }
+        return false;
+    }
+    // ── Number helpers ────────────────────────────────────────────────────────
+    _parseValue() {
+        return Number.parseFloat(this.value) || 0;
+    }
+    /**
+     * Formats the stored value for display, inferring decimal places from the value
+     * string itself. This preserves typed precision (e.g. "0.1234" stays "0.1234")
+     * and also respects trailing zeros written by drag storage (e.g. "5.0" stays "5.0").
+     */
+    _formatDisplay() {
+        const n = Number.parseFloat(this.value);
+        if (Number.isNaN(n))
+            return this.value;
+        if (this.precision !== undefined) {
+            return n.toFixed(this.precision);
+        }
+        const dot = this.value.indexOf(`.`);
+        const dp = dot >= 0 ? this.value.length - dot - 1 : 0;
+        return n.toFixed(dp);
+    }
+    _clamp(n) {
+        if (this.min !== undefined)
+            n = Math.max(this.min, n);
+        if (this.max !== undefined)
+            n = Math.min(this.max, n);
+        return n;
+    }
+    _snap(n) {
+        if (!this.step)
+            return n;
+        return Math.round(n / this.step) * this.step;
+    }
+    _inferDecimals(n) {
+        if (this.step !== undefined) {
+            const s = String(this.step);
+            const dot = s.indexOf(`.`);
+            return dot >= 0 ? s.length - dot - 1 : 0;
+        }
+        // No step set: infer from the value being formatted so floats are preserved
+        const s = String(n ?? this._parseValue());
+        const dot = s.indexOf(`.`);
+        return dot >= 0 ? s.length - dot - 1 : 0;
+    }
+    _formatNumber(n) {
+        return n.toFixed(this._inferDecimals(n));
+    }
+    /** Returns a 0..1 fraction for the given value within [min, max]. */
+    _normalizedValue(n = this._parseValue()) {
+        if (this.min === undefined || this.max === undefined)
+            return 0;
+        if (this.max === this.min)
+            return 0;
+        return Math.max(0, Math.min(1, (n - this.min) / (this.max - this.min)));
+    }
+    // ── Styles ───────────────────────────────────────────────────────────────
+    static { this.styles = [
+        prominenceStyles,
+        ...EditableLabel.styles,
+        css `
+    :host {
+      font-size: var(--text-s,11px);
+      --value: 0;
+      --value-start: 0;
+      --value-end: 0;
+      --_fill-color-alpha: color-mix(
+        in oklch,
+        var(--fill-color, var(--accent, oklch(60% 0.15 140))) calc(var(--fill-opacity, 0.25) * 100%),
+        transparent
+      );
+    }
+
+    /* ── Layout (when fill-style is enabled) ── */
+    :host([fill-style]) {
+      display: grid;
+      position: relative;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+      min-height: 1.5em;
+      min-width: 5em;
+    }
+
+    :host([fill-style]) .track,
+    :host([fill-style]) .value {
+      grid-area: 1 / 1;
+      position: absolute;
+      inset: 0;
+    }
+
+    /* Track background styling */
+    :host([fill-style]) .track {
+      z-index: 0;
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+    }
+
+    :host([fill-style]) .value {
+      z-index: 1;
+    }
+
+    :host([fill-style="linear"]) .track {
+      border-radius: var(--radius-s, 3px);
+    }
+
+    :host([fill-style="circular"]) .track {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    /* Linear: all linear-styles use .bar positioned via --value-start and --value-end */
+    :host([fill-style="linear"]) .value {
+      overflow: hidden;
+    }
+
+    :host([fill-style="linear"]) .bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(var(--value-start, 0) * 100%);
+      width: calc((var(--value-end, 0) - var(--value-start, 0)) * 100%);
+      background: var(--fill-image, var(--_fill-color-alpha));
+    }
+
+    /* Circular grow: filled circle growing from center */
+    :host([fill-style="circular"][circular-style="grow"]) .value,
+    :host([fill-style="circular"]:not([circular-style])) .value {
+      background: var(--fill-image, var(--_fill-color-alpha));
+      clip-path: circle(calc(var(--value) * 50%) at 50% 50%);
+    }
+
+    /* Circular offset: value circle slides left/right from center.
+       Track circle is centered, filling the height.
+       Value circle is same size, offset by --value-offset-px.
+       At value=0.5: value circle centered on track (invisible when overlaid)
+       At value=0: value circle at far left
+       At value=1: value circle at far right
+    */
+    :host([fill-style="circular"][circular-style="offset"]) {
+      min-width: 80px;
+      min-height: 26px;
+      overflow: hidden;
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .track {
+      position: absolute;
+      top: 50%;
+      border-radius: 50%;
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+      width: calc(var(--radius, 11px) * 2);
+      height: calc(var(--radius, 11px) * 2);
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .value {
+      position: absolute;
+      top: 50%;
+      background: var(--fill-image, var(--_fill-color-alpha));
+      border-radius: 50%;
+      width: calc(var(--radius, 11px) * 2);
+      height: calc(var(--radius, 11px) * 2);
+      transform: translate(calc(var(--value-center-px, 13px) - var(--radius, 11px)), -50%);
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .number {
+      border-radius: 0;
+    }
+
+    /* Circular dot: full circle */
+    :host([fill-style="circular"][circular-style="dot"]) .value {
+      background: var(--fill-image, var(--_fill-color-alpha));
+    }
+
+    /* ── Number (top layer - text display) ── */
+    :host([fill-style]) .number {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: inherit;
+      font-size: inherit;
+      color: inherit;
+      padding: var(--space-xs, 3px) var(--space-s, 4px);
+    }
+
+    :host([fill-style="circular"]) .number {
+      border-radius: 50%;
+    }
+
+    /* Drag cursor + no text selection while not in text-edit mode */
+    :host(:not([disabled]):not([no-drag])) .number:not([contenteditable="plaintext-only"]) {
+      cursor: ns-resize;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: none;
+    }
+
+    /* Focus outline */
+    :host .number {
+      outline: none;
+    }
+
+    :host .number:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    /* ── Circular host sizing ── */
+    :host([fill-style="circular"][circular-style="grow"]),
+    :host([fill-style="circular"]:not([circular-style])) {
+      aspect-ratio: 1;
+    }
+  `,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], EditableNumber.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], EditableNumber.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], EditableNumber.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, attribute: `drag-sensitivity` })
+], EditableNumber.prototype, "dragSensitivity", void 0);
+__decorate([
+    property({ attribute: `fill-style` })
+], EditableNumber.prototype, "fillStyle", void 0);
+__decorate([
+    property({ attribute: `linear-style` })
+], EditableNumber.prototype, "linearStyle", void 0);
+__decorate([
+    property({ attribute: `circular-style` })
+], EditableNumber.prototype, "circularStyle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `no-drag` })
+], EditableNumber.prototype, "noDrag", void 0);
+__decorate([
+    property({ type: Number })
+], EditableNumber.prototype, "precision", void 0);
+EditableNumber = __decorate([
+    customElement(`ixfx-editable-number`)
+], EditableNumber);
+export { EditableNumber };
+//# sourceMappingURL=editable-number.js.map