@ixfx/components 0.2.3 → 0.2.5

package/dist/xy-pad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xy-pad.js","names":[],"sources":["../src/xy-pad.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\n/**\n * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.\n *\n * Generic pad that accepts min/max/value for both axes with configurable labels.\n * Each axis can independently use logarithmic or linear scaling.\n * Y axis is inverted (top = high value).\n *\n * Properties\n *   xMin, xMax, x      – horizontal range and current value\n *   yMin, yMax, y      – vertical range and current value\n *   xScale, yScale     – 'log' (default) or 'linear'\n *   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)\n *   xLabel, yLabel     – axis labels (displayed in corners)\n *   showCrosshairs      – show X/Y axis lines (default: false)\n *   showGrid            – show background grid (default: false)\n *\n * CSS variables:\n *   --marker-size         – size of the position marker (default: 10cqb)\n *   --crosshair-color     – colour of both crosshair lines (default: surface-hh)\n *   --crosshair-width     – thickness of both crosshair lines (default: 2px)\n *   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color\n *   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width\n *   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color\n *   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width\n *   --grid-color          – colour of grid lines (default: surface-hh)\n *   --grid-width          – thickness of grid lines (default: 1px)\n *   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it\n *   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it\n *   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it\n *   hide-cursor           – boolean, hide cursor during drag and hover (default: false)\n *\n * Events\n *   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag\n *   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends\n *\n * Methods\n *   getRelativeX() – returns X position as 0–1 fraction\n *   getRelativeY() – returns Y position as 0–1 fraction\n *   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)\n */\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { KEY_STEP_DIVISOR, resolveStep } from './keyboard.js';\nimport { prominenceStyles } from './styles/prominence.js';\n\n// ---------------------------------------------------------------------------\n// Scale helpers — log or linear, selected per-axis\n// ---------------------------------------------------------------------------\n\nfunction valueToFrac(value: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return (value - min) / (max - min);\n  return Math.log(value / min) / Math.log(max / min);\n}\n\nfunction fracToValue(frac: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return min + frac * (max - min);\n  return min * (max / min) ** frac;\n}\n\nfunction quantise(value: number, min: number, max: number, stops?: number): number {\n  if (!stops || stops <= 1)\n    return value;\n  const range = max - min;\n  const step = range / stops;\n  return Math.round((value - min) / step) * step + min;\n}\n\n@customElement(`ixfx-xy-pad`)\nexport class XyPad extends LitElement {\n  static override styles = [prominenceStyles, css`\n    :host {\n      display: block;\n      width: 200px;\n      height: 200px;\n      touch-action: none;\n      user-select: none;\n      container-type: size;\n      --marker-size: 10cqb;\n      --crosshair-color: var(--surface-6);\n      --crosshair-width: 2px;\n      --crosshair-x-color: var(--crosshair-color);\n      --crosshair-x-width: var(--crosshair-width);\n      --crosshair-y-color: var(--crosshair-color);\n      --crosshair-y-width: var(--crosshair-width);\n      --grid-color: var(--surface-6);\n      --grid-width: 1px;\n      --_space-s: var(--space-s, 4px);\n      --_space-m: var(--space-m, 8px);\n    }\n    .xy-pad-area {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      background: var(--xy-pad-bg, var(--surface-3));\n      border: var(--border);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-shadow: var(--deboss-3);\n      cursor: var(--cursor-display, crosshair);\n    }\n    :host([dragging]) .xy-pad-area {\n      cursor: none;\n    }\n\n    .xy-pad-area:focus {\n      outline: none;\n    }\n\n    .xy-pad-area:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .xy-pad-area::before,\n    .xy-pad-area::after {\n      content: '';\n      position: absolute;\n      pointer-events: none;\n      opacity: var(--show-crosshairs, 0);\n    }\n    :host([show-crosshairs]) {\n      --show-crosshairs: 1;\n    }\n    .xy-pad-area::before {\n      left: 0;\n      right: 0;\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      height: var(--crosshair-y-width);\n      background: var(--crosshair-y-color);\n    }\n    .xy-pad-area::after {\n      top: 0;\n      bottom: 0;\n      left: calc(var(--x-pct, 50) * 1%);\n      width: var(--crosshair-x-width);\n      background: var(--crosshair-x-color);\n    }\n\n    .xy-pad-grid {\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),\n        linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));\n      background-size: 10cqb 10cqb;\n      pointer-events: none;\n      opacity: var(--show-grid, 0);\n    }\n    :host([show-grid]) {\n      --show-grid: 1;\n    }\n    \n    .xy-pad-marker {\n      position: absolute;\n      width: var(--marker-size, 10cqb);\n      height: var(--marker-size, 10cqb);\n      border-radius: 50%;\n      background: var(--surface-2-accent, var(--accent));\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      left: calc(var(--x-pct, 50) * 1%);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      z-index: 2;\n    }\n    .xy-pad-label-x {\n      position: absolute;\n      bottom: var(--_space-s);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      width: 100%;\n      text-align: center;\n    }\n    .xy-pad-label-y {\n      position: absolute;\n      top: var(--_space-s);\n      left: var(--_space-m);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      writing-mode: sideways-lr;\n      height:100%;\n      text-align:center;\n    }\n  `];\n\n  @property({ type: Number }) xMin = 1;\n  @property({ type: Number }) xMax = 100;\n  @property({ type: Number }) x = 50;\n\n  @property({ type: Number }) yMin = 1;\n  @property({ type: Number }) yMax = 100;\n  @property({ type: Number }) y = 50;\n\n  @property({ type: String }) xScale = `linear`;\n  @property({ type: String }) yScale = `linear`;\n  @property({ type: Number, attribute: `x-snap-step` }) xSnapStep?: number;\n  @property({ type: Number, attribute: `y-snap-step` }) ySnapStep?: number;\n\n  @property({ type: String }) xLabel = `X`;\n  @property({ type: String }) yLabel = `Y`;\n\n  @property({ type: Boolean, reflect: true, attribute: `show-crosshairs` }) showCrosshairs = false;\n  @property({ type: Boolean, reflect: true, attribute: `show-grid` }) showGrid = false;\n  @property({ type: Boolean, reflect: true, attribute: `hide-cursor` }) hideCursor = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Number of quantised stops for both axes. Overridden by stops-x/stops-y if set. */\n  @property({ type: Number }) stops?: number;\n\n  /** Number of quantised stops for X axis. If set, overrides the stops setting for X. */\n  @property({ type: Number, attribute: `stops-x` }) stopsX?: number;\n\n  /** Number of quantised stops for Y axis. If set, overrides the stops setting for Y. */\n  @property({ type: Number, attribute: `stops-y` }) stopsY?: number;\n\n  private _dragging = false;\n  private _dragStartX = 0;\n  private _dragStartY = 0;\n  private _pressedKeys = new Set<string>();\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled)\n      return;\n    if ([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key)) {\n      e.preventDefault();\n      this._pressedKeys.add(e.key);\n      this._handleKeyboardMove(e.shiftKey);\n    } else if (e.key === `Home` || e.key === `End`) {\n      e.preventDefault();\n      const newX = e.key === `Home` ? this.xMin : this.xMax;\n      const newY = e.key === `Home` ? this.yMin : this.yMax;\n      if (newX !== this.x || newY !== this.y) {\n        this.x = newX;\n        this.y = newY;\n        this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n          detail: { x: this.x, y: this.y },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    }\n  };\n\n  private _onKeyUp = (e: KeyboardEvent): void => {\n    this._pressedKeys.delete(e.key);\n  };\n\n  private _handleKeyboardMove = (shiftKey: boolean): void => {\n    const shiftDivisor = shiftKey ? KEY_STEP_DIVISOR : 1;\n    const xRange = this.xMax - this.xMin;\n    const yRange = this.yMax - this.yMin;\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    const xStep = resolveStep(xRange, effectiveStopsX, undefined) / shiftDivisor;\n    const yStep = resolveStep(yRange, effectiveStopsY, undefined) / shiftDivisor;\n\n    let newX = this.x;\n    let newY = this.y;\n\n    if (this._pressedKeys.has(`ArrowLeft`)) {\n      newX = Math.max(this.xMin, this.x - xStep);\n    }\n    if (this._pressedKeys.has(`ArrowRight`)) {\n      newX = Math.min(this.xMax, this.x + xStep);\n    }\n    if (this._pressedKeys.has(`ArrowUp`)) {\n      newY = Math.min(this.yMax, this.y + yStep);\n    }\n    if (this._pressedKeys.has(`ArrowDown`)) {\n      newY = Math.max(this.yMin, this.y - yStep);\n    }\n\n    if (newX !== this.x || newY !== this.y) {\n      let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n      let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n      finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n      finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n      this.x = finalX;\n      this.y = finalY;\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    e.preventDefault();\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`) as HTMLElement | undefined;\n    pad?.focus();\n    if (pad)\n      pad.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStartX = this.x;\n    this._dragStartY = this.y;\n    this.setAttribute(`dragging`, ``);\n    this._updateFromPointer(e);\n    globalThis.addEventListener(`pointermove`, this._onPointerMove);\n    globalThis.addEventListener(`pointerup`, this._onPointerUp);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n    e.preventDefault();\n    this._updateFromPointer(e);\n  };\n\n  private _onPointerUp = (): void => {\n    const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;\n    this._dragging = false;\n    this.removeAttribute(`dragging`);\n    globalThis.removeEventListener(`pointermove`, this._onPointerMove);\n    globalThis.removeEventListener(`pointerup`, this._onPointerUp);\n    if (hasChanged) {\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`change`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _updateFromPointer(e: PointerEvent): void {\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`);\n    if (!pad)\n      return;\n\n    const rect = pad.getBoundingClientRect();\n    const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));\n\n    const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);\n    const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);\n\n    let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n    let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n    finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n    this.x = finalX;\n    this.y = finalY;\n\n    this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n      detail: { x: this.x, y: this.y },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _setPctVars(): void {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;\n    const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;\n    this.style.setProperty(`--x-pct`, `${xPct}`);\n    this.style.setProperty(`--y-pct`, `${yPct}`);\n\n    // Calculate radius from center (50, 50) - distance as 0-100\n    const dx = xPct - 50;\n    const dy = yPct - 50;\n    const radiusPct = Math.sqrt(dx * dx + dy * dy);\n    this.style.setProperty(`--radius-pct`, `${radiusPct}`);\n  }\n\n  // ── Public API ─────────────────────────────────────────────────────────────\n\n  /**\n   * Returns X position as a 0–1 fraction.\n   */\n  getRelativeX(): number {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    return valueToFrac(cx, this.xMin, this.xMax, this.xScale);\n  }\n\n  /**\n   * Returns Y position as a 0–1 fraction.\n   */\n  getRelativeY(): number {\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    return valueToFrac(cy, this.yMin, this.yMax, this.yScale);\n  }\n\n  /**\n   * Returns polar coordinates.\n   * - radius: 0–1 distance from center\n   * - angle: radians, 0 = right, clockwise (0 to 2π)\n   */\n  getPolar(): { radius: number; angle: number } {\n    const xRel = this.getRelativeX() - 0.5; // -0.5 to 0.5\n    const yRel = this.getRelativeY() - 0.5; // -0.5 to 0.5\n    const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2; // 0 to 1\n    let angle = Math.atan2(yRel, xRel); // -π to π\n    if (angle < 0)\n      angle += 2 * Math.PI; // 0 to 2π\n    return { radius, angle };\n  }\n\n  override updated(_changed: PropertyValues): void {\n    super.updated(_changed);\n    this._setPctVars();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._onPointerUp();\n    this._pressedKeys.clear();\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div class=\"xy-pad-area\"\n           tabindex=${this.disabled ? -1 : 0}\n           @pointerdown=${this._onPointerDown}\n           @keydown=${this._onKeyDown}\n           @keyup=${this._onKeyUp}\n           @blur=${() => this._pressedKeys.clear()}>\n        ${this.showGrid ? html`<div class=\"xy-pad-grid\"></div>` : ``}\n        <div class=\"xy-pad-marker\"></div>\n        <div class=\"xy-pad-label-x\">${this.xLabel}</div>\n        <div class=\"xy-pad-label-y\">${this.yLabel}</div>\n      </div>\n    `;\n  }\n}\n\nexport type XyPadInputDetail = {\n  readonly x: number;\n  readonly y: number;\n};\n\nexport type XyPadInputEvent = CustomEvent<XyPadInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-xy-pad': XyPad;\n  }\n}\n\nexport interface XyPadEventMap {\n  input: XyPadInputEvent;\n  change: XyPadInputEvent;\n}\n\nexport interface XyPad {\n  addEventListener: (<K extends keyof XyPadEventMap>(\n    type: K,\n    listener: (this: XyPad, event: XyPadEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAS,YAAY,OAAe,KAAa,KAAa,OAAuB;AACnF,KAAI,UAAU,SACZ,SAAQ,QAAQ,QAAQ,MAAM;AAChC,QAAO,KAAK,IAAI,QAAQ,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI;;AAGpD,SAAS,YAAY,MAAc,KAAa,KAAa,OAAuB;AAClF,KAAI,UAAU,SACZ,QAAO,MAAM,QAAQ,MAAM;AAC7B,QAAO,OAAO,MAAM,QAAQ;;AAG9B,SAAS,SAAS,OAAe,KAAa,KAAa,OAAwB;AACjF,KAAI,CAAC,SAAS,SAAS,EACrB,QAAO;CAET,MAAM,QADQ,MAAM,OACC;AACrB,QAAO,KAAK,OAAO,QAAQ,OAAO,KAAK,GAAG,OAAO;;AAI5C,IAAA,QAAA,MAAM,cAAc,WAAW;;;cAqHD;cACA;WACH;cAEG;cACA;WACH;gBAEK;gBACA;gBAIA;gBACA;wBAEsD;kBACZ;oBACI;kBAC5B;mBAWnC;qBACE;qBACA;sCACC,IAAI,KAAa;qBAElB,MAA2B;AAC/C,OAAI,KAAK,SACP;AACF,OAAI;IAAC;IAAa;IAAc;IAAW;IAAY,CAAC,SAAS,EAAE,IAAI,EAAE;AACvE,MAAE,gBAAgB;AAClB,SAAK,aAAa,IAAI,EAAE,IAAI;AAC5B,SAAK,oBAAoB,EAAE,SAAS;cAC3B,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AAC9C,MAAE,gBAAgB;IAClB,MAAM,OAAO,EAAE,QAAQ,SAAS,KAAK,OAAO,KAAK;IACjD,MAAM,OAAO,EAAE,QAAQ,SAAS,KAAK,OAAO,KAAK;AACjD,QAAI,SAAS,KAAK,KAAK,SAAS,KAAK,GAAG;AACtC,UAAK,IAAI;AACT,UAAK,IAAI;AACT,UAAK,cAAc,IAAI,YAA8B,SAAS;MAC5D,QAAQ;OAAE,GAAG,KAAK;OAAG,GAAG,KAAK;OAAG;MAChC,SAAS;MACT,UAAU;MACX,CAAC,CAAC;;;;mBAKW,MAA2B;AAC7C,QAAK,aAAa,OAAO,EAAE,IAAI;;8BAGF,aAA4B;GACzD,MAAM,eAAe,WAAA,KAA8B;GACnD,MAAM,SAAS,KAAK,OAAO,KAAK;GAChC,MAAM,SAAS,KAAK,OAAO,KAAK;GAChC,MAAM,kBAAkB,KAAK,UAAU,KAAK;GAC5C,MAAM,kBAAkB,KAAK,UAAU,KAAK;GAE5C,MAAM,QAAQ,YAAY,QAAQ,iBAAiB,KAAA,EAAU,GAAG;GAChE,MAAM,QAAQ,YAAY,QAAQ,iBAAiB,KAAA,EAAU,GAAG;GAEhE,IAAI,OAAO,KAAK;GAChB,IAAI,OAAO,KAAK;AAEhB,OAAI,KAAK,aAAa,IAAI,YAAY,CACpC,QAAO,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM;AAE5C,OAAI,KAAK,aAAa,IAAI,aAAa,CACrC,QAAO,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM;AAE5C,OAAI,KAAK,aAAa,IAAI,UAAU,CAClC,QAAO,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM;AAE5C,OAAI,KAAK,aAAa,IAAI,YAAY,CACpC,QAAO,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM;AAG5C,OAAI,SAAS,KAAK,KAAK,SAAS,KAAK,GAAG;IACtC,IAAI,SAAU,KAAK,aAAa,KAAK,YAAY,IAAK,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,KAAK,YAAY;IAC3G,IAAI,SAAU,KAAK,aAAa,KAAK,YAAY,IAAK,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,KAAK,YAAY;AAE3G,aAAS,SAAS,QAAQ,KAAK,MAAM,KAAK,MAAM,gBAAgB;AAChE,aAAS,SAAS,QAAQ,KAAK,MAAM,KAAK,MAAM,gBAAgB;AAEhE,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,cAAc,IAAI,YAA8B,SAAS;KAC5D,QAAQ;MAAE,GAAG,KAAK;MAAG,GAAG,KAAK;MAAG;KAChC,SAAS;KACT,UAAU;KACX,CAAC,CAAC;;;yBAImB,MAA0B;AAClD,KAAE,gBAAgB;GAClB,MAAM,MAAM,KAAK,WAAW,cAAc,eAAe;AACzD,QAAK,OAAO;AACZ,OAAI,IACF,KAAI,kBAAkB,EAAE,UAAU;AACpC,QAAK,YAAY;AACjB,QAAK,cAAc,KAAK;AACxB,QAAK,cAAc,KAAK;AACxB,QAAK,aAAa,YAAY,GAAG;AACjC,QAAK,mBAAmB,EAAE;AAC1B,cAAW,iBAAiB,eAAe,KAAK,eAAe;AAC/D,cAAW,iBAAiB,aAAa,KAAK,aAAa;;yBAGnC,MAA0B;AAClD,OAAI,CAAC,KAAK,UACR;AACF,KAAE,gBAAgB;AAClB,QAAK,mBAAmB,EAAE;;4BAGO;GACjC,MAAM,aAAa,KAAK,MAAM,KAAK,eAAe,KAAK,MAAM,KAAK;AAClE,QAAK,YAAY;AACjB,QAAK,gBAAgB,WAAW;AAChC,cAAW,oBAAoB,eAAe,KAAK,eAAe;AAClE,cAAW,oBAAoB,aAAa,KAAK,aAAa;AAC9D,OAAI,WACF,MAAK,cAAc,IAAI,YAA8B,UAAU;IAC7D,QAAQ;KAAE,GAAG,KAAK;KAAG,GAAG,KAAK;KAAG;IAChC,SAAS;IACT,UAAU;IACX,CAAC,CAAC;;;;gBA9PkB,CAAC,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkH7C;;CAgJF,mBAA2B,GAAuB;EAChD,MAAM,MAAM,KAAK,WAAW,cAAc,eAAe;AACzD,MAAI,CAAC,IACH;EAEF,MAAM,OAAO,IAAI,uBAAuB;EACxC,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,EAAE,UAAU,KAAK,QAAQ,KAAK,MAAM,CAAC;EAC5E,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,EAAE,UAAU,KAAK,OAAO,KAAK,OAAO,CAAC;EAEhF,MAAM,OAAO,YAAY,OAAO,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO;EAClE,MAAM,OAAO,YAAY,OAAO,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO;EAElE,IAAI,SAAU,KAAK,aAAa,KAAK,YAAY,IAAK,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,KAAK,YAAY;EAC3G,IAAI,SAAU,KAAK,aAAa,KAAK,YAAY,IAAK,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,KAAK,YAAY;EAE3G,MAAM,kBAAkB,KAAK,UAAU,KAAK;EAC5C,MAAM,kBAAkB,KAAK,UAAU,KAAK;AAE5C,WAAS,SAAS,QAAQ,KAAK,MAAM,KAAK,MAAM,gBAAgB;AAChE,WAAS,SAAS,QAAQ,KAAK,MAAM,KAAK,MAAM,gBAAgB;AAEhE,OAAK,IAAI;AACT,OAAK,IAAI;AAET,OAAK,cAAc,IAAI,YAA8B,SAAS;GAC5D,QAAQ;IAAE,GAAG,KAAK;IAAG,GAAG,KAAK;IAAG;GAChC,SAAS;GACT,UAAU;GACX,CAAC,CAAC;;CAGL,cAA4B;EAC1B,MAAM,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,EAAE,CAAC;EAC3D,MAAM,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,EAAE,CAAC;EAC3D,MAAM,OAAO,YAAY,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO,GAAG;EAClE,MAAM,OAAO,YAAY,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO,GAAG;AAClE,OAAK,MAAM,YAAY,WAAW,GAAG,OAAO;AAC5C,OAAK,MAAM,YAAY,WAAW,GAAG,OAAO;EAG5C,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,OAAO;EAClB,MAAM,YAAY,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAC9C,OAAK,MAAM,YAAY,gBAAgB,GAAG,YAAY;;;;;CAQxD,eAAuB;AAErB,SAAO,YADI,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,EAAE,CACrC,EAAE,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO;;;;;CAM3D,eAAuB;AAErB,SAAO,YADI,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,EAAE,CACrC,EAAE,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO;;;;;;;CAQ3D,WAA8C;EAC5C,MAAM,OAAO,KAAK,cAAc,GAAG;EACnC,MAAM,OAAO,KAAK,cAAc,GAAG;EACnC,MAAM,SAAS,KAAK,KAAK,OAAO,OAAO,OAAO,KAAK,GAAG;EACtD,IAAI,QAAQ,KAAK,MAAM,MAAM,KAAK;AAClC,MAAI,QAAQ,EACV,UAAS,IAAI,KAAK;AACpB,SAAO;GAAE;GAAQ;GAAO;;CAG1B,QAAiB,UAAgC;AAC/C,QAAM,QAAQ,SAAS;AACvB,OAAK,aAAa;;CAGpB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,OAAK,cAAc;AACnB,OAAK,aAAa,OAAO;;CAG3B,SAA2C;AACzC,SAAO,IAAI;;sBAEO,KAAK,WAAW,KAAK,EAAE;0BACnB,KAAK,eAAe;sBACxB,KAAK,WAAW;oBAClB,KAAK,SAAS;yBACT,KAAK,aAAa,OAAO,CAAC;UACzC,KAAK,WAAW,IAAI,oCAAoC,GAAG;;sCAE/B,KAAK,OAAO;sCACZ,KAAK,OAAO;;;;;YAnP/C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,QAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,QAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,KAAA,KAAA,EAAA;YAE1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,QAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,QAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,KAAA,KAAA,EAAA;YAE1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAC1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,MAAA,WAAA,aAAA,KAAA,EAAA;YACpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,MAAA,WAAA,aAAA,KAAA,EAAA;YAEpD,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAE1B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAmB,CAAC,CAAA,EAAA,MAAA,WAAA,kBAAA,KAAA,EAAA;YACxE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAa,CAAC,CAAA,EAAA,MAAA,WAAA,YAAA,KAAA,EAAA;YAClE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,MAAA,WAAA,cAAA,KAAA,EAAA;YACpE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,MAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAGhD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;oBAlJlD,cAAc,cAAc,CAAA,EAAA,MAAA"}

package/package.json

@@ -1,57 +1,66 @@
 {
   "name": "@ixfx/components",
-  "version": "0.2.3",
-  "description": "",
-  "scripts": {
-    "lint": "tsc",
-    "dev": "vite --port=5174",
-    "build": "tsc",
-    "rebuild": "rm -rf dist && npm run build",
-    "bundle": "tsdown",
-    "build-test": "tsc && vite build",
-    "publish-prepare": "npm run rebuild && npm run bundle",
-    "preview": "vite preview",
-    "knip": "knip --config ./config/knip.json"
-  },
   "type": "module",
-  "main": "dist/index.js",
+  "version": "0.2.5",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./charts/*": {
-      "types": "./dist/charts/*.d.ts",
-      "import": "./dist/charts/*.js"
-    },
-    "./chart/plot": {
-      "types": "./dist/charts/plot.d.ts",
-      "import": "./dist/charts/plot.js"
-    },
-    "./bundle.js": {
+    "./bundle": {
       "types": "./bundle/index.d.ts",
       "import": "./bundle/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
     }
   },
+  "main": "dist/index.js",
   "files": [
-    "dist",
-    "bundle"
+    "bundle",
+    "dist"
   ],
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "start": "vite serve",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "build": "tsdown",
+    "rebuild": "rm -rf dist bundle && npm run build",
+    "publish-prepare": "npm run rebuild",
+    "preview": "vite preview",
+    "knip": "knip --config ./config/knip.json"
+  },
   "dependencies": {
-    "lit": "3.3.1",
-    "tsdown": "0.13.2"
+    "@clinth/ui-commands": "1.0.3",
+    "@clinth/vcanvas": "0.0.3",
+    "fzf": "0.5.2",
+    "lit": "3.3.2"
   },
   "devDependencies": {
-    "@eslint/js": "9.32.0",
-    "eslint": "9.32.0",
-    "globals": "16.3.0",
-    "ixfx": "1.7.0",
-    "knip": "5.62.0",
-    "typescript": "5.9.2",
-    "typescript-eslint": "8.38.0",
-    "vite": "5.4.6"
+    "@antfu/eslint-config": "^8.2.0",
+    "@ixfx/arrays": "0.56.12",
+    "@ixfx/collections": "0.56.12",
+    "@ixfx/core": "0.56.12",
+    "@ixfx/dom": "0.56.12",
+    "@ixfx/flow": "0.56.12",
+    "@ixfx/geometry": "0.56.12",
+    "@ixfx/modulation": "0.56.12",
+    "@ixfx/numbers": "0.56.12",
+    "@ixfx/visual": "0.56.12",
+    "@tsdown/css": "0.21.10",
+    "eslint": "10.3.0",
+    "eslint-plugin-format": "2.0.1",
+    "globals": "17.6.0",
+    "knip": "6.12.0",
+    "tsdown": "0.21.10",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.59.2",
+    "vite": "8.0.10"
   }
-}
+}

package/README.md

@@ -1,14 +0,0 @@
-# components
- 
-## Importing Lit
-
-```html
-<script type="importmap">
-  { 
-    "imports": { 
-      "lit":"https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js", 
-      "lit/decorators.js":"https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js" 
-    }
-  }
-</script>
-```

package/dist/charts/frequency-histogram-plot.d.ts

@@ -1,33 +0,0 @@
-import type { HistogramVis } from "./histogram-vis.js";
-/**
- * Creates and drives a HistogramVis instance.
- * Data should be an outer array containing two-element arrays for each
- * data point. The first element of the inner array is expected to be the key, the second the frequency.
- * For example,  `[`apples`, 2]` means the key `apples` was counted twice.
- *
- * Usage:
- * .sortBy() automatically sorts prior to visualisation. By default off.
- * .update(data) full set of data to plot
- * .clear() empties plot - same as calling `update([])`
- * .el - The `HistogramVis` instance, or undefined if not created/disposed
- *
- * ```
- * const plot = new FrequencyHistogramPlot(document.getElementById('histogram'));
- * plot.sortBy('key'); // Automatically sort by key
- * ...
- * plot.update([[`apples`, 2], [`oranges', 0], [`bananas`, 5]])
- * ```
- *
- * @export
- * @class FrequencyHistogramPlot
- */
-export declare class FrequencyHistogramPlot {
-    #private;
-    readonly el: HistogramVis | undefined;
-    constructor(el: HistogramVis);
-    setAutoSort(sortStyle: `value` | `value-reverse` | `key` | `key-reverse`): void;
-    clear(): void;
-    dispose(): void;
-    update(data: readonly (readonly [key: string, count: number])[]): void;
-}
-//# sourceMappingURL=frequency-histogram-plot.d.ts.map

package/dist/charts/frequency-histogram-plot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"frequency-histogram-plot.d.ts","sourceRoot":"","sources":["../../src/charts/frequency-histogram-plot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,sBAAsB;;IAClC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,SAAS,CAAC;gBAE1B,EAAE,EAAE,YAAY;IAI5B,WAAW,CACV,SAAS,EAAE,OAAO,GAAG,eAAe,GAAG,KAAK,GAAG,aAAa,GAC1D,IAAI;IAIP,KAAK;IAKL,OAAO;IAMP,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE;CAW/D"}

package/dist/charts/frequency-histogram-plot.js

@@ -1,54 +0,0 @@
-import { getSorter } from "../util/key-value.js";
-/**
- * Creates and drives a HistogramVis instance.
- * Data should be an outer array containing two-element arrays for each
- * data point. The first element of the inner array is expected to be the key, the second the frequency.
- * For example,  `[`apples`, 2]` means the key `apples` was counted twice.
- *
- * Usage:
- * .sortBy() automatically sorts prior to visualisation. By default off.
- * .update(data) full set of data to plot
- * .clear() empties plot - same as calling `update([])`
- * .el - The `HistogramVis` instance, or undefined if not created/disposed
- *
- * ```
- * const plot = new FrequencyHistogramPlot(document.getElementById('histogram'));
- * plot.sortBy('key'); // Automatically sort by key
- * ...
- * plot.update([[`apples`, 2], [`oranges', 0], [`bananas`, 5]])
- * ```
- *
- * @export
- * @class FrequencyHistogramPlot
- */
-export class FrequencyHistogramPlot {
-    #sorter;
-    constructor(el) {
-        this.el = el;
-    }
-    setAutoSort(sortStyle) {
-        this.#sorter = getSorter(sortStyle);
-    }
-    clear() {
-        if (this.el === undefined)
-            return;
-        this.el.data = [];
-    }
-    dispose() {
-        const el = this.el;
-        if (el === undefined)
-            return; // already disposed
-        el.remove();
-    }
-    update(data) {
-        if (this.el === undefined) {
-            console.warn(`FrequencyHistogramPlot this.el undefined`);
-            return;
-        }
-        this.el.data =
-            this.#sorter === undefined
-                ? [...data]
-                : this.#sorter(data);
-    }
-}
-//# sourceMappingURL=frequency-histogram-plot.js.map

package/dist/charts/frequency-histogram-plot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"frequency-histogram-plot.js","sourceRoot":"","sources":["../../src/charts/frequency-histogram-plot.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,sBAAsB;IAElC,OAAO,CAA6B;IACpC,YAAY,EAAgB;QAC3B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,CAAC;IAED,WAAW,CACV,SAA4D;QAE5D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED,KAAK;QACJ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS;YAAE,OAAO;QAClC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC;IACnB,CAAC;IAED,OAAO;QACN,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,IAAI,EAAE,KAAK,SAAS;YAAE,OAAO,CAAC,mBAAmB;QACjD,EAAE,CAAC,MAAM,EAAE,CAAC;IACb,CAAC;IAED,MAAM,CAAC,IAAwD;QAC9D,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;YACzD,OAAO;QACR,CAAC;QAED,IAAI,CAAC,EAAE,CAAC,IAAI;YACX,IAAI,CAAC,OAAO,KAAK,SAAS;gBACzB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;gBACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;CACD"}

package/dist/charts/histogram-vis.d.ts

@@ -1,57 +0,0 @@
-import { LitElement } from "lit";
-import { type KeyValue } from "../util/primitive-types.js";
-type Bar = {
-    readonly percentage: number;
-    readonly data: KeyValue;
-};
-/**
- * Usage in HTML:
- * ```html
- * <style>
- * histogram-vis {
- *  display: block;
- *  height: 7em;
- *  --histogram-bar-color: pink;
- * }
- * </style>
- * <histogram-vis>
- * [
- *  ["apples", 5],
- *  ["oranges", 3],
- *  ["pineapple", 0],
- *  ["limes", 9]
- * ]
- * </histogram-vis>
- * ```
- *
- * CSS colour theming:
- * --histogram-bar-color
- * --histogram-label-color
- *
- * HTML tag attributes
- * showXAxis (boolean)
- * showDataLabels (boolean)
- *
- * @export
- * @class HistogramVis
- * @extends {LitElement}
- **/
-export declare class HistogramVis extends LitElement {
-    static readonly styles: import("lit").CSSResult;
-    data: readonly KeyValue[];
-    showDataLabels: boolean;
-    height: string;
-    showXAxis: boolean;
-    json: readonly KeyValue[] | undefined;
-    constructor();
-    connectedCallback(): void;
-    barTemplate(bar: Bar, index: number, _totalBars: number): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        readonly "histogram-vis": HistogramVis;
-    }
-}
-export {};
-//# sourceMappingURL=histogram-vis.d.ts.map

package/dist/charts/histogram-vis.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"histogram-vis.d.ts","sourceRoot":"","sources":["../../src/charts/histogram-vis.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,KAAK,GAAG,GAAG;IACV,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;CACxB,CAAC;AA+CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BI;AACJ,qBACa,YAAa,SAAQ,UAAU;IAC3C,MAAM,CAAC,QAAQ,CAAC,MAAM,0BA2CnB;IAGK,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IAG1B,cAAc,EAAE,OAAO,CAAC;IAGxB,MAAM,EAAE,MAAM,CAAC;IAGf,SAAS,EAAE,OAAO,CAAC;IAGnB,IAAI,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,CAAC;;IAW9C,iBAAiB;IAOjB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM;IA+BvD,MAAM;CAyCN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;KACvC;CACD"}

package/dist/charts/histogram-vis.js

@@ -1,222 +0,0 @@
-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 { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators/custom-element.js";
-import { property } from "lit/decorators/property.js";
-import { repeat } from "lit/directives/repeat.js";
-import {} from "../util/primitive-types.js";
-const jsonData = (object) => {
-    if (object === null || object === undefined || object === `undefined`)
-        return;
-    try {
-        if (typeof object === `string`) {
-            if (object.length === 0)
-                return;
-            const o = JSON.parse(object);
-            if (!Array.isArray(o)) {
-                console.error(`Histogram innerText should be JSON array`);
-                return;
-            }
-            for (const [index, element] of o.entries()) {
-                if (!Array.isArray(element)) {
-                    console.error(`Histogram array should consist of inner arrays`);
-                    return;
-                }
-                if (element.length !== 2) {
-                    console.error(`Histogram inner arrays should consist of two elements`);
-                    return;
-                }
-                if (typeof element[0] !== `string`) {
-                    console.error(`First element of inner array should be a string (index ${index})`);
-                    return;
-                }
-                if (typeof element[1] !== `number`) {
-                    console.error(`Second element of inner array should be a number (index ${index})`);
-                    return;
-                }
-            }
-            return o;
-        }
-    }
-    catch (error) {
-        console.log(object);
-        console.error(error);
-    }
-    return;
-};
-/**
- * Usage in HTML:
- * ```html
- * <style>
- * histogram-vis {
- *  display: block;
- *  height: 7em;
- *  --histogram-bar-color: pink;
- * }
- * </style>
- * <histogram-vis>
- * [
- *  ["apples", 5],
- *  ["oranges", 3],
- *  ["pineapple", 0],
- *  ["limes", 9]
- * ]
- * </histogram-vis>
- * ```
- *
- * CSS colour theming:
- * --histogram-bar-color
- * --histogram-label-color
- *
- * HTML tag attributes
- * showXAxis (boolean)
- * showDataLabels (boolean)
- *
- * @export
- * @class HistogramVis
- * @extends {LitElement}
- **/
-let HistogramVis = class HistogramVis extends LitElement {
-    static { this.styles = css `
-    :host {
-    }
-    div.container {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    div.chart {
-      display: grid;
-      flex: 1;
-      grid-template-rows: 1fr 1px min-content;
-      justify-items: center;
-    }
-    div.bar {
-      display: flex;
-      flex-direction: column-reverse;
-      align-items: center;
-      justify-self: normal;
-      padding-left: 0.3vw;
-      padding-right: 0.3vw;
-    }
-    div.bar > div.barTrack {
-      background-color: var(--histogram-bar-color, gray);
-      align-self: stretch;
-    }
-    div.xAxisLabels,
-    div.data {
-      font-size: min(1vw, 1em);
-      color: var(--histogram-label-color, currentColor);
-    }
-    div.xAxisLabels {
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: center;
-    }
-    div.xAxis {
-      background-color: var(--histogram-axis-color, silver);
-      width: 100%;
-      height: 100%;
-    }
-  `; }
-    constructor() {
-        super();
-        this.data = [];
-        this.showDataLabels = true;
-        this.height = `100%`;
-        this.showXAxis = true;
-        this.json = undefined;
-    }
-    connectedCallback() {
-        if (!this.hasAttribute(`json`)) {
-            this.setAttribute(`json`, this.innerText);
-        }
-        super.connectedCallback();
-    }
-    barTemplate(bar, index, _totalBars) {
-        const { percentage } = bar;
-        const [key, freq] = bar.data;
-        // grid-area: rowStart / gridColStart / gridRowEnd / gridColEnd
-        const rowStart = 1;
-        const rowEnd = 2;
-        const colStart = index + 1;
-        const colEnd = colStart + 1;
-        const dataLabel = html `<div class="data">${freq}</div>`;
-        const xAxis = html `${key}`;
-        return html `
-      <div
-             class="bar"
-             style="grid-area: ${rowStart} / ${colStart} / ${rowEnd} / ${colEnd}"
-           >
-             <div class="barTrack" style="height: ${(percentage ?? 0) * 100}%"></div>
-             ${this.showDataLabels ? dataLabel : ``}
-           </div>
-           <div
-             class="xAxisLabels"
-             style="grid-area: ${rowStart + 2} / ${colStart} / ${rowEnd + 2} / ${colEnd}"
-           >
-             ${this.showXAxis ? xAxis : ``}
-           </div>
-    `;
-    }
-    render() {
-        if ((this.data === undefined || this.data.length === 0) &&
-            this.json === undefined) {
-            return html ``;
-        }
-        const d = this.data ?? this.json;
-        const length = d.length;
-        const highestCount = Math.max(...d.map((d) => d[1]));
-        const bars = d.map((kv) => ({
-            data: kv,
-            percentage: kv[1] / highestCount,
-        }));
-        const xAxis = html `
-      <div
-            class="xAxis"
-            style="grid-area: 2 / 1 / 3 / ${d.length + 1}"
-          ></div>
-    `;
-        const height = this.height ? `height: ${this.height};` : ``;
-        const h = html `
-      <style>
-             div.chart {
-               grid-template-columns: repeat(${d.length}, minmax(2px, 1fr));
-             }
-           </style>
-           <div class="container" style="${height}">
-             <div class="chart">
-               ${repeat(bars, (bar) => bar.data[0], (b, index) => this.barTemplate(b, index, length))}
-               ${this.showXAxis ? xAxis : ``}
-             </div>
-           </div>
-    `;
-        return h;
-    }
-};
-__decorate([
-    property()
-], HistogramVis.prototype, "data", void 0);
-__decorate([
-    property()
-], HistogramVis.prototype, "showDataLabels", void 0);
-__decorate([
-    property()
-], HistogramVis.prototype, "height", void 0);
-__decorate([
-    property()
-], HistogramVis.prototype, "showXAxis", void 0);
-__decorate([
-    property({ converter: jsonData, type: Object })
-], HistogramVis.prototype, "json", void 0);
-HistogramVis = __decorate([
-    customElement(`histogram-vis`)
-], HistogramVis);
-export { HistogramVis };
-//# sourceMappingURL=histogram-vis.js.map

package/dist/charts/histogram-vis.js.map

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