@ixfx/components 0.2.2 → 0.2.4

package/dist/range/range.d.ts

@@ -0,0 +1,23 @@
+import type { TooltipOrientations } from "../util/tooltip.js";
+import { LitElement } from "lit";
+export declare class RangeElement extends LitElement {
+    #private;
+    tooltip: boolean;
+    tooltipOrientation: TooltipOrientations;
+    orientation: `horizontal` | `vertical`;
+    disabled: boolean;
+    min: number;
+    max: number;
+    set value(v: number);
+    get value(): number;
+    step: number;
+    onRangeInput(event: InputEvent): void;
+    protected render(): unknown;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementMap {
+        "ixfx-range": RangeElement;
+    }
+}
+//# sourceMappingURL=range.d.ts.map

package/dist/range/range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/range/range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,qBACa,YAAa,SAAQ,UAAU;;IAE1C,OAAO,UAAQ;IAGf,kBAAkB,EAAE,mBAAmB,CAAS;IAGhD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,QAAQ,UAAS;IAGjB,GAAG,SAAK;IAGR,GAAG,SAAO;IAEV,IACI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,IAAI,KAAK,IAJI,MAAM,CAMlB;IAKD,IAAI,SAAK;IAET,YAAY,CAAC,KAAK,EAAE,UAAU;IAe9B,SAAS,CAAC,MAAM,IAAI,OAAO;IAiB3B,MAAM,CAAC,MAAM,4BA+DX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,cAAc;QACtB,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}

package/dist/range/range.js

@@ -0,0 +1,153 @@
+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, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { prominenceStyles } from "../styles/prominence.js";
+import { tooltipValueStyles } from "../styles/tooltip.js";
+let RangeElement = class RangeElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tooltip = true;
+        this.tooltipOrientation = `top`;
+        this.orientation = `horizontal`;
+        this.disabled = false;
+        this.min = 0;
+        this.max = 100;
+        this.#value = 0;
+        this.step = 0;
+    }
+    set value(v) {
+        this.#value = v;
+    }
+    get value() {
+        return this.#value;
+    }
+    #value;
+    onRangeInput(event) {
+        const valueNum = event.target.valueAsNumber;
+        const valueStr = event.target.value;
+        this.#value = valueNum;
+        if (this.tooltip) {
+            const o = this.shadowRoot?.querySelector(`output`);
+            if (o) {
+                o.value = valueStr;
+            }
+            else {
+                console.warn(`Output element not found`);
+            }
+        }
+    }
+    render() {
+        const tt = this.tooltip
+            ? html `<ixfx-tooltip
+          style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)"
+          .orientation=${this.tooltipOrientation}
+          anchor="--thumb-tooltip"
+          .value=${this.value}></ixfx-tooltip>`
+            : nothing;
+        const verticalStyle = this.orientation === `vertical`
+            ? `writing-mode: vertical-lr; direction: rtl;`
+            : nothing;
+        return html `
+      <input ?disabled=${this.disabled} step=${this.step} min=${this.min} max=${this.max} value=${this.value} @input=${this.onRangeInput} type="range" style=${verticalStyle}>
+      ${tt}
+    `;
+    }
+    static { this.styles = [
+        prominenceStyles,
+        tooltipValueStyles,
+        css `
+    :host {
+      display: inline-block;
+      --value-label-color: unset;
+      --thumb-background: ButtonFace;
+      --thumb-radius: 50%;
+      --thumb-width: 1em;
+      --thumb-height: 1em;
+    }
+
+    :host([orientation="vertical"]) {
+      display: block;
+      width: 1.5em;
+      height: 200px;
+    }
+
+    [type="range"] {
+      width: 100%;
+      height: 1.5em;
+      accent-color: var(--accent, AccentColor);
+    }
+
+    :host([orientation="vertical"]) [type="range"] {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      width: 1.5em;
+      height: 100%;
+    }
+
+    [type="range"]::-webkit-slider-thumb {
+      width: var(--thumb-width);
+      height: var(--thumb-height);
+      border-radius: var(--thumb-radius);
+      background: var(--thumb-background);
+      anchor-name: --thumb-tooltip;
+    }
+
+    :host([orientation="vertical"]) [type="range"]::-webkit-slider-thumb {
+      width: var(--thumb-height);
+      height: var(--thumb-width);
+    }
+
+    [type="range"]::-moz-range-thumb {
+      width: var(--thumb-width);
+      height: var(--thumb-height);
+      border-radius: var(--thumb-radius);
+      background: var(--thumb-background);
+      box-shadow: var(--shadow-m);
+      anchor-name: --thumb-tooltip;
+    }
+
+    :host([orientation="vertical"]) [type="range"]::-moz-range-thumb {
+      width: var(--thumb-height);
+      height: var(--thumb-width);
+    }
+
+    [type="range"]:focus {
+      outline: none;
+    }
+  `,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean })
+], RangeElement.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String, attribute: `tooltip-orientation` })
+], RangeElement.prototype, "tooltipOrientation", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], RangeElement.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], RangeElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], RangeElement.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], RangeElement.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], RangeElement.prototype, "value", null);
+__decorate([
+    property({ type: Number })
+], RangeElement.prototype, "step", void 0);
+RangeElement = __decorate([
+    customElement(`ixfx-range`)
+], RangeElement);
+export { RangeElement };
+//# sourceMappingURL=range.js.map

package/dist/range/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sourceRoot":"","sources":["../../src/range/range.ts"],"names":[],"mappings":"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"}

package/dist/range-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './range-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/range-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/range-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/range-input/index.js

@@ -0,0 +1,2 @@
+export * from './range-input.js';
+//# sourceMappingURL=index.js.map

package/dist/range-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/range-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/range-input/range-input.d.ts

@@ -0,0 +1,92 @@
+/**
+ * <ixfx-range-input> — styled range input with no label.
+ *
+ * A thin wrapper around <input type="range"> that adds the same
+ * fancy track/thumb/fill styling as the linear-value components,
+ * without the label display.
+ *
+ * Supports horizontal (default) and vertical orientation in a single element.
+ * Set orientation="vertical" attribute to switch.
+ *
+ * CSS Variables:
+ *   --track-thickness            Track cross-axis size (default 1.5em)
+ *   --thumb-color                Thumb fill (default var(--surface-2-text))
+ *   --thumb-color-active         Thumb fill on hover/active (default var(--accent))
+ *   --thumb-size                 Thumb cross-axis size (default var(--track-thickness))
+ *   --thumb-thickness            Thumb inline size (default 2em)
+ *   --thumb-radius               Thumb border-radius (default 0)
+ *   --thumb-border               Thumb border (default none)
+ *   --thumb-shadow               Thumb box-shadow (default none)
+ *   --background-track           Unfilled track background (default var(--surface-4))
+ *   --background-track-hover     Unfilled track on hover (default --background-track)
+ *   --background-track-value     Filled track color (default var(--surface-6))
+ *   --background-track-value-hover   Filled track on hover (default var(--accent))
+ *   --background-track-value-active  Filled track on active (default var(--accent))
+ *
+ * Optional vertical-specific overrides (fall back to horizontal vars when unset):
+ *   --background-track-vertical
+ *   --background-track-value-vertical
+ *   --background-track-value-hover-vertical
+ *   --background-track-value-active-vertical
+ *
+ * Tooltip:
+ *   tooltip               Boolean attribute — enables value tooltip on hover/focus
+ *   tooltip-orientation   'top' (default) | 'right'
+ *   labelFormatter        Function property (not attribute): (rawValue: number, scaledValue: number) => string
+ *                         rawValue  = native input value within min..max
+ *                         scaledValue = normalised 0..1 position
+ *
+ * Swipeable mode:
+ *   swipeable   Boolean attribute — enables swipe-to-draw gesture.
+ *               When active, pressing down on the slider or entering it while the
+ *               pointer is pressed sets the value from the cursor coordinate.
+ *               Pointer capture is NOT held, so the cursor can move to adjacent
+ *               swipeable sliders and update them too (step-sequencer style).
+ *               Kill-axis exit (above/below for horizontal, left/right for vertical)
+ *               freezes the value; re-entering re-engages.
+ *
+ * Events:
+ *   input  — CustomEvent<{ value: number }>
+ *   change — CustomEvent<{ value: number }>
+ *             In swipeable mode fires on pointerleave (or pointerup if released
+ *             while still inside). In normal mode delegates to native change.
+ */
+import type { CSSResultGroup } from 'lit';
+import type { TooltipElement, TooltipOrientations } from '../util/tooltip.js';
+import { LitElement } from 'lit';
+export declare class RangeInput extends LitElement {
+    min: number;
+    max: number;
+    value: number;
+    step: number;
+    orientation: `horizontal` | `vertical`;
+    swipeable: boolean;
+    tooltip: boolean;
+    tooltipOrientation: TooltipOrientations;
+    labelFormatter?: (rawValue: number, scaledValue: number) => string;
+    _inputEl: HTMLInputElement;
+    _tooltipEl?: TooltipElement | null;
+    /** True if this slider changed its value during the current pointer visit. */
+    private _swipeModified;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _valueFromPointer;
+    private _applySwipeValue;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerEnter;
+    private _onPointerLeave;
+    private _onWindowPointerUp;
+    updated(changedProperties: Map<string, unknown>): void;
+    _handleInput: (e: Event) => void;
+    _formatTooltipLabel(): string;
+    _handleChange: () => void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-range-input': RangeInput;
+    }
+}
+//# sourceMappingURL=range-input.d.ts.map

package/dist/range-input/range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.d.ts","sourceRoot":"","sources":["../../src/range-input/range-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAQrD,qBACa,UAAW,SAAQ,UAAU;IACZ,GAAG,SAAK;IACR,GAAG,SAAK;IACR,KAAK,SAAK;IACV,IAAI,SAAQ;IACG,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACrD,SAAS,UAAS;IACjC,OAAO,UAAS;IACiB,kBAAkB,EAAE,mBAAmB,CAAS;IAC9E,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IAGnG,QAAQ,EAAG,gBAAgB,CAAC;IAG5B,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAEnC,8EAA8E;IAC9E,OAAO,CAAC,cAAc,CAAS;IAEtB,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,eAAe,CAMrB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,kBAAkB,CAKxB;IAEO,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAgB/D,YAAY,GAAI,GAAG,KAAK,KAAG,IAAI,CAQ7B;IAEF,mBAAmB,IAAI,MAAM;IAQ7B,aAAa,QAAO,IAAI,CAGtB;IAEO,MAAM;IA4Bf,MAAM,CAAC,MAAM,EAAE,cAAc,CAwR1B;CACJ;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,UAAU,CAAC;KAChC;CACF"}