@ixfx/components 0.2.4 → 0.2.6

package/dist/xy-pad.js

@@ -1,192 +1,182 @@
-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 { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { t as resolveStep } from "./keyboard-De_vOHLg.js";
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/xy-pad.ts
 /**
- * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.
- *
- * Generic pad that accepts min/max/value for both axes with configurable labels.
- * Each axis can independently use logarithmic or linear scaling.
- * Y axis is inverted (top = high value).
- *
- * Properties
- *   xMin, xMax, x      – horizontal range and current value
- *   yMin, yMax, y      – vertical range and current value
- *   xScale, yScale     – 'log' (default) or 'linear'
- *   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)
- *   xLabel, yLabel     – axis labels (displayed in corners)
- *   showCrosshairs      – show X/Y axis lines (default: false)
- *   showGrid            – show background grid (default: false)
- *
- * CSS variables:
- *   --marker-size         – size of the position marker (default: 10cqb)
- *   --crosshair-color     – colour of both crosshair lines (default: surface-hh)
- *   --crosshair-width     – thickness of both crosshair lines (default: 2px)
- *   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color
- *   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width
- *   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color
- *   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width
- *   --grid-color          – colour of grid lines (default: surface-hh)
- *   --grid-width          – thickness of grid lines (default: 1px)
- *   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it
- *   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it
- *   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it
- *   hide-cursor           – boolean, hide cursor during drag and hover (default: false)
- *
- * Events
- *   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag
- *   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends
- *
- * Methods
- *   getRelativeX() – returns X position as 0–1 fraction
- *   getRelativeY() – returns Y position as 0–1 fraction
- *   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)
- */
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { KEY_STEP_DIVISOR, resolveStep } from './keyboard.js';
-import { prominenceStyles } from './styles/prominence.js';
-// ---------------------------------------------------------------------------
-// Scale helpers — log or linear, selected per-axis
-// ---------------------------------------------------------------------------
+* <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.
+*
+* Generic pad that accepts min/max/value for both axes with configurable labels.
+* Each axis can independently use logarithmic or linear scaling.
+* Y axis is inverted (top = high value).
+*
+* Properties
+*   xMin, xMax, x      – horizontal range and current value
+*   yMin, yMax, y      – vertical range and current value
+*   xScale, yScale     – 'log' (default) or 'linear'
+*   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)
+*   xLabel, yLabel     – axis labels (displayed in corners)
+*   showCrosshairs      – show X/Y axis lines (default: false)
+*   showGrid            – show background grid (default: false)
+*
+* CSS variables:
+*   --marker-size         – size of the position marker (default: 10cqb)
+*   --crosshair-color     – colour of both crosshair lines (default: surface-hh)
+*   --crosshair-width     – thickness of both crosshair lines (default: 2px)
+*   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color
+*   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width
+*   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color
+*   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width
+*   --grid-color          – colour of grid lines (default: surface-hh)
+*   --grid-width          – thickness of grid lines (default: 1px)
+*   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it
+*   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it
+*   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it
+*   hide-cursor           – boolean, hide cursor during drag and hover (default: false)
+*
+* Events
+*   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag
+*   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends
+*
+* Methods
+*   getRelativeX() – returns X position as 0–1 fraction
+*   getRelativeY() – returns Y position as 0–1 fraction
+*   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)
+*/
 function valueToFrac(value, min, max, scale) {
-    if (scale === `linear`)
-        return (value - min) / (max - min);
-    return Math.log(value / min) / Math.log(max / min);
+	if (scale === `linear`) return (value - min) / (max - min);
+	return Math.log(value / min) / Math.log(max / min);
 }
 function fracToValue(frac, min, max, scale) {
-    if (scale === `linear`)
-        return min + frac * (max - min);
-    return min * (max / min) ** frac;
+	if (scale === `linear`) return min + frac * (max - min);
+	return min * (max / min) ** frac;
 }
 function quantise(value, min, max, stops) {
-    if (!stops || stops <= 1)
-        return value;
-    const range = max - min;
-    const step = range / stops;
-    return Math.round((value - min) / step) * step + min;
+	if (!stops || stops <= 1) return value;
+	const step = (max - min) / stops;
+	return Math.round((value - min) / step) * step + min;
 }
 let XyPad = class XyPad extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.xMin = 1;
-        this.xMax = 100;
-        this.x = 50;
-        this.yMin = 1;
-        this.yMax = 100;
-        this.y = 50;
-        this.xScale = `linear`;
-        this.yScale = `linear`;
-        this.xLabel = `X`;
-        this.yLabel = `Y`;
-        this.showCrosshairs = false;
-        this.showGrid = false;
-        this.hideCursor = false;
-        this.disabled = false;
-        this._dragging = false;
-        this._dragStartX = 0;
-        this._dragStartY = 0;
-        this._pressedKeys = new Set();
-        this._onKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            if ([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key)) {
-                e.preventDefault();
-                this._pressedKeys.add(e.key);
-                this._handleKeyboardMove(e.shiftKey);
-            }
-            else if (e.key === `Home` || e.key === `End`) {
-                e.preventDefault();
-                const newX = e.key === `Home` ? this.xMin : this.xMax;
-                const newY = e.key === `Home` ? this.yMin : this.yMax;
-                if (newX !== this.x || newY !== this.y) {
-                    this.x = newX;
-                    this.y = newY;
-                    this.dispatchEvent(new CustomEvent(`input`, {
-                        detail: { x: this.x, y: this.y },
-                        bubbles: true,
-                        composed: true,
-                    }));
-                }
-            }
-        };
-        this._onKeyUp = (e) => {
-            this._pressedKeys.delete(e.key);
-        };
-        this._handleKeyboardMove = (shiftKey) => {
-            const shiftDivisor = shiftKey ? KEY_STEP_DIVISOR : 1;
-            const xRange = this.xMax - this.xMin;
-            const yRange = this.yMax - this.yMin;
-            const effectiveStopsX = this.stopsX ?? this.stops;
-            const effectiveStopsY = this.stopsY ?? this.stops;
-            const xStep = resolveStep(xRange, effectiveStopsX, undefined) / shiftDivisor;
-            const yStep = resolveStep(yRange, effectiveStopsY, undefined) / shiftDivisor;
-            let newX = this.x;
-            let newY = this.y;
-            if (this._pressedKeys.has(`ArrowLeft`)) {
-                newX = Math.max(this.xMin, this.x - xStep);
-            }
-            if (this._pressedKeys.has(`ArrowRight`)) {
-                newX = Math.min(this.xMax, this.x + xStep);
-            }
-            if (this._pressedKeys.has(`ArrowUp`)) {
-                newY = Math.min(this.yMax, this.y + yStep);
-            }
-            if (this._pressedKeys.has(`ArrowDown`)) {
-                newY = Math.max(this.yMin, this.y - yStep);
-            }
-            if (newX !== this.x || newY !== this.y) {
-                let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
-                let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
-                finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
-                finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
-                this.x = finalX;
-                this.y = finalY;
-                this.dispatchEvent(new CustomEvent(`input`, {
-                    detail: { x: this.x, y: this.y },
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        };
-        this._onPointerDown = (e) => {
-            e.preventDefault();
-            const pad = this.renderRoot.querySelector(`.xy-pad-area`);
-            pad?.focus();
-            if (pad)
-                pad.setPointerCapture(e.pointerId);
-            this._dragging = true;
-            this._dragStartX = this.x;
-            this._dragStartY = this.y;
-            this.setAttribute(`dragging`, ``);
-            this._updateFromPointer(e);
-            globalThis.addEventListener(`pointermove`, this._onPointerMove);
-            globalThis.addEventListener(`pointerup`, this._onPointerUp);
-        };
-        this._onPointerMove = (e) => {
-            if (!this._dragging)
-                return;
-            e.preventDefault();
-            this._updateFromPointer(e);
-        };
-        this._onPointerUp = () => {
-            const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;
-            this._dragging = false;
-            this.removeAttribute(`dragging`);
-            globalThis.removeEventListener(`pointermove`, this._onPointerMove);
-            globalThis.removeEventListener(`pointerup`, this._onPointerUp);
-            if (hasChanged) {
-                this.dispatchEvent(new CustomEvent(`change`, {
-                    detail: { x: this.x, y: this.y },
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        };
-    }
-    static { this.styles = [prominenceStyles, css `
+	constructor(..._args) {
+		super(..._args);
+		this.xMin = 1;
+		this.xMax = 100;
+		this.x = 50;
+		this.yMin = 1;
+		this.yMax = 100;
+		this.y = 50;
+		this.xScale = `linear`;
+		this.yScale = `linear`;
+		this.xLabel = `X`;
+		this.yLabel = `Y`;
+		this.showCrosshairs = false;
+		this.showGrid = false;
+		this.hideCursor = false;
+		this.disabled = false;
+		this._dragging = false;
+		this._dragStartX = 0;
+		this._dragStartY = 0;
+		this._pressedKeys = /* @__PURE__ */ new Set();
+		this._onKeyDown = (e) => {
+			if (this.disabled) return;
+			if ([
+				`ArrowLeft`,
+				`ArrowRight`,
+				`ArrowUp`,
+				`ArrowDown`
+			].includes(e.key)) {
+				e.preventDefault();
+				this._pressedKeys.add(e.key);
+				this._handleKeyboardMove(e.shiftKey);
+			} else if (e.key === `Home` || e.key === `End`) {
+				e.preventDefault();
+				const newX = e.key === `Home` ? this.xMin : this.xMax;
+				const newY = e.key === `Home` ? this.yMin : this.yMax;
+				if (newX !== this.x || newY !== this.y) {
+					this.x = newX;
+					this.y = newY;
+					this.dispatchEvent(new CustomEvent(`input`, {
+						detail: {
+							x: this.x,
+							y: this.y
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+			}
+		};
+		this._onKeyUp = (e) => {
+			this._pressedKeys.delete(e.key);
+		};
+		this._handleKeyboardMove = (shiftKey) => {
+			const shiftDivisor = shiftKey ? 10 : 1;
+			const xRange = this.xMax - this.xMin;
+			const yRange = this.yMax - this.yMin;
+			const effectiveStopsX = this.stopsX ?? this.stops;
+			const effectiveStopsY = this.stopsY ?? this.stops;
+			const xStep = resolveStep(xRange, effectiveStopsX, void 0) / shiftDivisor;
+			const yStep = resolveStep(yRange, effectiveStopsY, void 0) / shiftDivisor;
+			let newX = this.x;
+			let newY = this.y;
+			if (this._pressedKeys.has(`ArrowLeft`)) newX = Math.max(this.xMin, this.x - xStep);
+			if (this._pressedKeys.has(`ArrowRight`)) newX = Math.min(this.xMax, this.x + xStep);
+			if (this._pressedKeys.has(`ArrowUp`)) newY = Math.min(this.yMax, this.y + yStep);
+			if (this._pressedKeys.has(`ArrowDown`)) newY = Math.max(this.yMin, this.y - yStep);
+			if (newX !== this.x || newY !== this.y) {
+				let finalX = this.xSnapStep && this.xSnapStep > 0 ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
+				let finalY = this.ySnapStep && this.ySnapStep > 0 ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
+				finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
+				finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
+				this.x = finalX;
+				this.y = finalY;
+				this.dispatchEvent(new CustomEvent(`input`, {
+					detail: {
+						x: this.x,
+						y: this.y
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this._onPointerDown = (e) => {
+			e.preventDefault();
+			const pad = this.renderRoot.querySelector(`.xy-pad-area`);
+			pad?.focus();
+			if (pad) pad.setPointerCapture(e.pointerId);
+			this._dragging = true;
+			this._dragStartX = this.x;
+			this._dragStartY = this.y;
+			this.setAttribute(`dragging`, ``);
+			this._updateFromPointer(e);
+			globalThis.addEventListener(`pointermove`, this._onPointerMove);
+			globalThis.addEventListener(`pointerup`, this._onPointerUp);
+		};
+		this._onPointerMove = (e) => {
+			if (!this._dragging) return;
+			e.preventDefault();
+			this._updateFromPointer(e);
+		};
+		this._onPointerUp = () => {
+			const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;
+			this._dragging = false;
+			this.removeAttribute(`dragging`);
+			globalThis.removeEventListener(`pointermove`, this._onPointerMove);
+			globalThis.removeEventListener(`pointerup`, this._onPointerUp);
+			if (hasChanged) this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					x: this.x,
+					y: this.y
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [prominenceStyles, css`
     :host {
       display: block;
       width: 200px;
@@ -300,156 +290,146 @@ let XyPad = class XyPad extends LitElement {
       height:100%;
       text-align:center;
     }
-  `]; }
-    _updateFromPointer(e) {
-        const pad = this.renderRoot.querySelector(`.xy-pad-area`);
-        if (!pad)
-            return;
-        const rect = pad.getBoundingClientRect();
-        const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-        const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
-        const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);
-        const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);
-        let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
-        let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
-        const effectiveStopsX = this.stopsX ?? this.stops;
-        const effectiveStopsY = this.stopsY ?? this.stops;
-        finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
-        finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
-        this.x = finalX;
-        this.y = finalY;
-        this.dispatchEvent(new CustomEvent(`input`, {
-            detail: { x: this.x, y: this.y },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _setPctVars() {
-        const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));
-        const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));
-        const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;
-        const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;
-        this.style.setProperty(`--x-pct`, `${xPct}`);
-        this.style.setProperty(`--y-pct`, `${yPct}`);
-        // Calculate radius from center (50, 50) - distance as 0-100
-        const dx = xPct - 50;
-        const dy = yPct - 50;
-        const radiusPct = Math.sqrt(dx * dx + dy * dy);
-        this.style.setProperty(`--radius-pct`, `${radiusPct}`);
-    }
-    // ── Public API ─────────────────────────────────────────────────────────────
-    /**
-     * Returns X position as a 0–1 fraction.
-     */
-    getRelativeX() {
-        const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));
-        return valueToFrac(cx, this.xMin, this.xMax, this.xScale);
-    }
-    /**
-     * Returns Y position as a 0–1 fraction.
-     */
-    getRelativeY() {
-        const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));
-        return valueToFrac(cy, this.yMin, this.yMax, this.yScale);
-    }
-    /**
-     * Returns polar coordinates.
-     * - radius: 0–1 distance from center
-     * - angle: radians, 0 = right, clockwise (0 to 2π)
-     */
-    getPolar() {
-        const xRel = this.getRelativeX() - 0.5; // -0.5 to 0.5
-        const yRel = this.getRelativeY() - 0.5; // -0.5 to 0.5
-        const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2; // 0 to 1
-        let angle = Math.atan2(yRel, xRel); // -π to π
-        if (angle < 0)
-            angle += 2 * Math.PI; // 0 to 2π
-        return { radius, angle };
-    }
-    updated(_changed) {
-        super.updated(_changed);
-        this._setPctVars();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._onPointerUp();
-        this._pressedKeys.clear();
-    }
-    render() {
-        return html `
+  `];
+	}
+	_updateFromPointer(e) {
+		const pad = this.renderRoot.querySelector(`.xy-pad-area`);
+		if (!pad) return;
+		const rect = pad.getBoundingClientRect();
+		const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+		const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);
+		const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);
+		let finalX = this.xSnapStep && this.xSnapStep > 0 ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
+		let finalY = this.ySnapStep && this.ySnapStep > 0 ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
+		const effectiveStopsX = this.stopsX ?? this.stops;
+		const effectiveStopsY = this.stopsY ?? this.stops;
+		finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
+		finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
+		this.x = finalX;
+		this.y = finalY;
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: {
+				x: this.x,
+				y: this.y
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_setPctVars() {
+		const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));
+		const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));
+		const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;
+		const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;
+		this.style.setProperty(`--x-pct`, `${xPct}`);
+		this.style.setProperty(`--y-pct`, `${yPct}`);
+		const dx = xPct - 50;
+		const dy = yPct - 50;
+		const radiusPct = Math.sqrt(dx * dx + dy * dy);
+		this.style.setProperty(`--radius-pct`, `${radiusPct}`);
+	}
+	/**
+	* Returns X position as a 0–1 fraction.
+	*/
+	getRelativeX() {
+		return valueToFrac(Math.max(this.xMin, Math.min(this.xMax, this.x)), this.xMin, this.xMax, this.xScale);
+	}
+	/**
+	* Returns Y position as a 0–1 fraction.
+	*/
+	getRelativeY() {
+		return valueToFrac(Math.max(this.yMin, Math.min(this.yMax, this.y)), this.yMin, this.yMax, this.yScale);
+	}
+	/**
+	* Returns polar coordinates.
+	* - radius: 0–1 distance from center
+	* - angle: radians, 0 = right, clockwise (0 to 2π)
+	*/
+	getPolar() {
+		const xRel = this.getRelativeX() - .5;
+		const yRel = this.getRelativeY() - .5;
+		const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2;
+		let angle = Math.atan2(yRel, xRel);
+		if (angle < 0) angle += 2 * Math.PI;
+		return {
+			radius,
+			angle
+		};
+	}
+	updated(_changed) {
+		super.updated(_changed);
+		this._setPctVars();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._onPointerUp();
+		this._pressedKeys.clear();
+	}
+	render() {
+		return html`
       <div class="xy-pad-area"
            tabindex=${this.disabled ? -1 : 0}
            @pointerdown=${this._onPointerDown}
            @keydown=${this._onKeyDown}
            @keyup=${this._onKeyUp}
            @blur=${() => this._pressedKeys.clear()}>
-        ${this.showGrid ? html `<div class="xy-pad-grid"></div>` : ``}
+        ${this.showGrid ? html`<div class="xy-pad-grid"></div>` : ``}
         <div class="xy-pad-marker"></div>
         <div class="xy-pad-label-x">${this.xLabel}</div>
         <div class="xy-pad-label-y">${this.yLabel}</div>
       </div>
     `;
-    }
+	}
 };
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "xMin", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "xMax", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "x", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "yMin", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "yMax", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "y", void 0);
-__decorate([
-    property({ type: String })
-], XyPad.prototype, "xScale", void 0);
-__decorate([
-    property({ type: String })
-], XyPad.prototype, "yScale", void 0);
-__decorate([
-    property({ type: Number, attribute: `x-snap-step` })
-], XyPad.prototype, "xSnapStep", void 0);
-__decorate([
-    property({ type: Number, attribute: `y-snap-step` })
-], XyPad.prototype, "ySnapStep", void 0);
-__decorate([
-    property({ type: String })
-], XyPad.prototype, "xLabel", void 0);
-__decorate([
-    property({ type: String })
-], XyPad.prototype, "yLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: `show-crosshairs` })
-], XyPad.prototype, "showCrosshairs", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: `show-grid` })
-], XyPad.prototype, "showGrid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: `hide-cursor` })
-], XyPad.prototype, "hideCursor", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], XyPad.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Number })
-], XyPad.prototype, "stops", void 0);
-__decorate([
-    property({ type: Number, attribute: `stops-x` })
-], XyPad.prototype, "stopsX", void 0);
-__decorate([
-    property({ type: Number, attribute: `stops-y` })
-], XyPad.prototype, "stopsY", void 0);
-XyPad = __decorate([
-    customElement(`ixfx-xy-pad`)
-], XyPad);
+__decorate([property({ type: Number })], XyPad.prototype, "xMin", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "xMax", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "x", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "yMin", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "yMax", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "y", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "xScale", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "yScale", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `x-snap-step`
+})], XyPad.prototype, "xSnapStep", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `y-snap-step`
+})], XyPad.prototype, "ySnapStep", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "xLabel", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "yLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-crosshairs`
+})], XyPad.prototype, "showCrosshairs", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-grid`
+})], XyPad.prototype, "showGrid", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `hide-cursor`
+})], XyPad.prototype, "hideCursor", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], XyPad.prototype, "disabled", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "stops", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-x`
+})], XyPad.prototype, "stopsX", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-y`
+})], XyPad.prototype, "stopsY", void 0);
+XyPad = __decorate([safeCustomElement(`ixfx-xy-pad`)], XyPad);
+//#endregion
 export { XyPad };
+
 //# sourceMappingURL=xy-pad.js.map