@deck.gl/widgets 9.2.11 → 9.3.0-alpha.2

package/src/timeline-widget.tsx

@@ -3,30 +3,50 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget, type WidgetPlacement, type WidgetProps} from '@deck.gl/core';
+import type {Timeline} from '@luma.gl/engine';
 import {render} from 'preact';
 import {IconButton} from './lib/components/icon-button';
+import {RangeInput} from './lib/components/range-input';
 
 export type TimelineWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'bottom-left'. */
   placement?: WidgetPlacement;
   /** View to attach to and interact with. Required when using multiple views. */
   viewId?: string | null;
+  /** Timeline instance to manipulate. */
+  timeline?: Timeline | null;
   /** Slider timeRange [min, max]. */
   timeRange?: [number, number];
-  /** Slider step. */
+  /** Slider step.
+   * @default 1
+   */
   step?: number;
-  /** Initial slider value. */
+  /** Initial slider value.
+   * @default `timeRange[0]`
+   */
   initialTime?: number;
   /** Callback when value changes. */
   onTimeChange?: (value: number) => void;
-  /** Play interval in milliseconds. */
+  /** Start playing automatically
+   * @default false
+   */
+  autoPlay?: boolean;
+  /** Start from the beginning whentime reaches the end
+   * @default false
+   */
+  loop?: boolean;
+  /** Play interval in milliseconds.
+   * @default 1000
+   */
   playInterval?: number;
+  /** Callback to get label from time value */
+  formatLabel?: (value: number) => string;
 };
 
 export class TimelineWidget extends Widget<TimelineWidgetProps> {
   id = 'timeline';
   className = 'deck-widget-timeline';
-  placement: WidgetPlacement = 'bottom-left';
+  placement: WidgetPlacement = 'fill';
 
   private playing = false;
   private timerId: number | null = null;
@@ -37,21 +57,25 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
     id: 'timeline',
     placement: 'bottom-left',
     viewId: null,
+    timeline: null,
     timeRange: [0, 100],
     step: 1,
     initialTime: undefined!,
     onTimeChange: () => {},
-    playInterval: 1000
+    autoPlay: false,
+    loop: false,
+    playInterval: 1000,
+    formatLabel: String
   };
 
   constructor(props: TimelineWidgetProps = {}) {
     super(props);
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+    this.props.timeline?.setTime(this.currentTime);
     this.setProps(this.props);
   }
 
   setProps(props: Partial<TimelineWidgetProps>): void {
-    this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
@@ -59,6 +83,7 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   onAdd(): void {
     this.playing = false;
     this.timerId = null;
+    if (this.props.autoPlay) this.play();
   }
 
   onRemove(): void {
@@ -66,19 +91,43 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
+    const {timeRange, step, formatLabel} = this.props;
+    const currentTime = this.currentTime;
+
+    rootElement.dataset.placement = this.props.placement;
+
     render(
-      <div style={{display: 'flex', alignItems: 'center', pointerEvents: 'auto'}}>
-        <IconButton label={this.playing ? 'Pause' : 'Play'} onClick={this.handlePlayPause}>
-          <div className="text">{this.playing ? '⏸' : '▶'}</div>
-        </IconButton>
-        <input
-          type="range"
-          className="timeline-slider"
-          min={this.props.timeRange[0]}
-          max={this.props.timeRange[1]}
-          step={this.props.step}
-          value={this.currentTime}
-          onInput={this.handleSliderChange}
+      <div className="deck-widget-button-group">
+        {this.playing ? (
+          <IconButton
+            label="Pause"
+            className="deck-widget-timeline-pause"
+            onClick={this.handlePlayPause}
+          />
+        ) : (
+          <IconButton
+            label="Play"
+            className="deck-widget-timeline-play"
+            onClick={this.handlePlayPause}
+          />
+        )}
+        <RangeInput
+          min={timeRange[0]}
+          max={timeRange[1]}
+          orientation="horizontal"
+          step={step}
+          value={[currentTime, currentTime]}
+          onChange={this.handleTimeChange}
+          decorations={[
+            {
+              position: [currentTime, currentTime + step],
+              element: (
+                <div className="deck-widget-timeline-label deck-widget-timeline-label--current">
+                  {formatLabel(currentTime)}
+                </div>
+              )
+            }
+          ]}
         />
       </div>,
       rootElement
@@ -89,25 +138,31 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
     if (this.playing) {
       this.stop();
     } else {
-      this.start();
+      this.play();
     }
   };
 
-  private handleSliderChange = (e: Event): void => {
-    const input = e.target as HTMLInputElement;
-    const val = Number(input.value);
-    this.currentTime = val;
-    this.props.onTimeChange(val);
+  private handleTimeChange = ([value]: [number, number]): void => {
+    this.currentTime = value;
+    this.props.timeline?.setTime(value);
+    this.props.onTimeChange(value);
     this.updateHTML();
   };
 
-  private start(): void {
+  public play(): void {
     this.playing = true;
+    const {
+      timeRange: [min, max]
+    } = this.props;
+    if (this.currentTime >= max) {
+      this.currentTime = min;
+      this.props.onTimeChange(min);
+    }
     this.updateHTML();
     this.tick();
   }
 
-  private stop(): void {
+  public stop(): void {
     this.playing = false;
     if (this.timerId !== null) {
       window.clearTimeout(this.timerId);
@@ -117,16 +172,31 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   }
 
   private tick = (): void => {
-    const [min, max] = this.props.timeRange;
-    let next = this.currentTime + this.props.step;
-    if (next > max) {
-      next = min;
+    const {
+      timeRange: [min, max],
+      step,
+      loop
+    } = this.props;
+    if (step > 0) {
+      let next = Math.round(this.currentTime / step) * step + step;
+      if (next > max) {
+        if (this.currentTime < max) {
+          next = max;
+        } else if (loop) {
+          next = min;
+        } else {
+          next = max;
+          this.playing = false;
+        }
+      }
+      this.currentTime = next;
+      this.props.onTimeChange(next);
+      this.updateHTML();
     }
-    this.currentTime = next;
-    this.props.onTimeChange(next);
-    this.updateHTML();
     if (this.playing) {
       this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+    } else {
+      this.timerId = null;
     }
   };
 }

package/src/toggle-widget.tsx

@@ -0,0 +1,101 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import {render, type JSX} from 'preact';
+import {Widget} from '@deck.gl/core';
+import {IconButton} from './lib/components/icon-button';
+
+export type ToggleWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'bottom-left'. */
+  placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** If the toggle is checked when first added */
+  initialChecked?: boolean;
+  /** Data url to display as icon */
+  icon: string;
+  /** Data url to display as icon when it is checked */
+  onIcon?: string;
+  /** Tooltip label */
+  label?: string;
+  /** Tooltip label when it is checked */
+  onLabel?: string;
+  /** Icon color, a CSS Color string */
+  color?: string;
+  /** Icon color when it is checked, a CSS Color string */
+  onColor?: string;
+  /** Callback when the widget is clicked */
+  onChange?: (checked: boolean) => void;
+};
+
+/**
+ * A generic widget that displays a button with icon or text content.
+ */
+export class ToggleWidget extends Widget<ToggleWidgetProps> {
+  static defaultProps: Required<ToggleWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'icon',
+    placement: 'top-left',
+    viewId: null,
+    initialChecked: false,
+    icon: '',
+    onIcon: undefined!,
+    label: '',
+    onLabel: undefined!,
+    color: '',
+    onColor: undefined!,
+    onChange: undefined!
+  };
+
+  className = 'deck-widget-toggle';
+  placement: WidgetPlacement = 'top-left';
+  checked: boolean;
+
+  constructor(props: ToggleWidgetProps) {
+    super(props);
+    this.checked = this.props.initialChecked;
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<ToggleWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId;
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {
+      className,
+      style,
+      icon,
+      label,
+      color,
+      onIcon = icon,
+      onLabel = label,
+      onColor = color
+    } = this.props;
+    const on = this.checked;
+
+    rootElement.dataset.checked = String(on);
+
+    render(
+      <IconButton
+        className={className}
+        style={style as JSX.CSSProperties}
+        icon={on ? onIcon : icon}
+        label={on ? onLabel : label}
+        color={on ? onColor : color}
+        onClick={this._toggle}
+      />,
+      rootElement
+    );
+  }
+
+  private _toggle = () => {
+    this.checked = !this.checked;
+    this.props.onChange?.(this.checked);
+    this.updateHTML();
+  };
+}

package/src/zoom-widget.tsx

@@ -3,10 +3,10 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget, FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
-import type {Viewport, WidgetProps, WidgetPlacement} from '@deck.gl/core';
+import type {WidgetProps, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {ButtonGroup} from './lib/components/button-group';
-import {GroupedIconButton} from './lib/components/grouped-icon-button';
+import {IconButton} from './lib/components/icon-button';
 
 export type ZoomWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
@@ -37,7 +37,6 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
 
   className = 'deck-widget-zoom';
   placement: WidgetPlacement = 'top-left';
-  viewports: {[id: string]: Viewport} = {};
 
   constructor(props: ZoomWidgetProps = {}) {
     super(props);
@@ -53,12 +52,12 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
   onRenderHTML(rootElement: HTMLElement): void {
     const ui = (
       <ButtonGroup orientation={this.props.orientation}>
-        <GroupedIconButton
+        <IconButton
           onClick={() => this.handleZoomIn()}
           label={this.props.zoomInLabel}
           className="deck-widget-zoom-in"
         />
-        <GroupedIconButton
+        <IconButton
           onClick={() => this.handleZoomOut()}
           label={this.props.zoomOutLabel}
           className="deck-widget-zoom-out"
@@ -68,14 +67,21 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
     render(ui, rootElement);
   }
 
-  onViewportChange(viewport: Viewport) {
-    this.viewports[viewport.id] = viewport;
-  }
+  handleZoom(viewId: string, nextZoom: number) {
+    // Respect minZoom/maxZoom constraints from the view state
+    const viewState = this.getViewState(viewId);
+    if (viewState) {
+      const {minZoom, maxZoom} = viewState as any;
+      if (Number.isFinite(minZoom)) {
+        nextZoom = Math.max(minZoom, nextZoom);
+      }
+      if (Number.isFinite(maxZoom)) {
+        nextZoom = Math.min(maxZoom, nextZoom);
+      }
+    }
 
-  handleZoom(viewport: Viewport, nextZoom: number) {
-    const viewId = this.viewId || viewport?.id || 'default-view';
     const nextViewState: Record<string, unknown> = {
-      ...viewport,
+      ...viewState,
       zoom: nextZoom
     };
     if (this.props.transitionDuration > 0) {
@@ -91,20 +97,18 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
   }
 
   handleZoomIn() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom + 1);
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, (viewState.zoom as number) + 1);
     }
   }
 
   handleZoomOut() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom - 1);
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, (viewState.zoom as number) - 1);
     }
   }
-
-  /** @todo - move to deck or widget manager */
-  private setViewState(viewId: string, viewState: Record<string, unknown>): void {
-    // @ts-ignore Using private method temporary until there's a public one
-    this.deck._onViewStateChange({viewId, viewState, interactionState: {}});
-  }
 }

package/dist/fps-widget.d.ts

@@ -1,28 +0,0 @@
-import { Widget } from '@deck.gl/core';
-import type { WidgetPlacement, Deck, WidgetProps } from '@deck.gl/core';
-/** Properties for the FpsWidget. */
-export type FpsWidgetProps = WidgetProps & {
-    /** Widget positioning within the view. Default 'top-left'. */
-    placement?: WidgetPlacement;
-    /** View to attach to and interact with. Required when using multiple views. */
-    viewId?: string | null;
-};
-/**
- * Displays the average frames per second reported by the Deck instance.
- */
-export declare class FpsWidget extends Widget<FpsWidgetProps> {
-    static defaultProps: Required<FpsWidgetProps>;
-    className: string;
-    placement: WidgetPlacement;
-    private _lastFps;
-    constructor(props?: FpsWidgetProps);
-    setProps(props: Partial<FpsWidgetProps>): void;
-    onAdd({}: {
-        deck: Deck<any>;
-        viewId: string | null;
-    }): void;
-    onRenderHTML(rootElement: HTMLElement): void;
-    _animate(): void;
-    _getFps(): number;
-}
-//# sourceMappingURL=fps-widget.d.ts.map

package/dist/fps-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fps-widget.d.ts","sourceRoot":"","sources":["../src/fps-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAErC,OAAO,KAAK,EAAC,eAAe,EAAE,IAAI,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGtE,oCAAoC;AACpC,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,MAAM,CAAC,cAAc,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,CAK3C;IAEF,SAAS,SAAqB;IAC9B,SAAS,EAAE,eAAe,CAAc;IAExC,OAAO,CAAC,QAAQ,CAAc;gBAElB,KAAK,GAAE,cAAmB;IAKtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAM9C,KAAK,CAAC,EAAE,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAC,GAAG,IAAI;IAKzD,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAc5C,QAAQ,IAAI,IAAI;IAShB,OAAO,IAAI,MAAM;CAIlB"}

package/dist/fps-widget.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-import { Widget } from '@deck.gl/core';
-import { render } from 'preact';
-import { IconButton } from "./lib/components/icon-button.js";
-/**
- * Displays the average frames per second reported by the Deck instance.
- */
-export class FpsWidget extends Widget {
-    constructor(props = {}) {
-        super(props);
-        this.className = 'deck-widget-fps';
-        this.placement = 'top-left';
-        this._lastFps = -1;
-        this.setProps(this.props);
-    }
-    setProps(props) {
-        this.placement = props.placement ?? this.placement;
-        this.viewId = props.viewId ?? this.viewId;
-        super.setProps(props);
-    }
-    onAdd({}) {
-        this._lastFps = this._getFps();
-        requestAnimationFrame(() => this._animate());
-    }
-    onRenderHTML(rootElement) {
-        const fps = this._getFps();
-        render(_jsx(IconButton, { children: _jsxs("div", { className: "text", children: ["FPS", _jsx("br", {}), fps] }) }), rootElement);
-    }
-    _animate() {
-        const fps = this._getFps();
-        if (this._lastFps !== fps) {
-            this._lastFps = fps;
-            this.updateHTML();
-        }
-        requestAnimationFrame(() => this._animate());
-    }
-    _getFps() {
-        // @ts-expect-error protected
-        return Math.round(this.deck?.metrics.fps ?? 0);
-    }
-}
-FpsWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: 'fps',
-    placement: 'top-left',
-    viewId: null
-};
-//# sourceMappingURL=fps-widget.js.map

package/dist/fps-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fps-widget.js","sourceRoot":"","sources":["../src/fps-widget.tsx"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAUxD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,MAAsB;IAanD,YAAY,QAAwB,EAAE;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QANf,cAAS,GAAG,iBAAiB,CAAC;QAC9B,cAAS,GAAoB,UAAU,CAAC;QAEhC,aAAQ,GAAW,CAAC,CAAC,CAAC;QAI5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ,CAAC,KAA8B;QACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,KAAK,CAAC,EAA4C;QAChD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC3B,MAAM,CACJ,KAAC,UAAU,cACT,eAAK,SAAS,EAAC,MAAM,oBAEnB,cAAM,EACL,GAAG,IACA,GACK,EACb,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,QAAQ,KAAK,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;YACpB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QACD,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO;QACL,6BAA6B;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IACjD,CAAC;;AAtDM,sBAAY,GAA6B;IAC9C,GAAG,MAAM,CAAC,YAAY;IACtB,EAAE,EAAE,KAAK;IACT,SAAS,EAAE,UAAU;IACrB,MAAM,EAAE,IAAI;CACb,AALkB,CAKjB"}

package/dist/lib/components/grouped-icon-button.d.ts

@@ -1,10 +0,0 @@
-import type { ComponentChildren, JSX } from 'preact';
-export type GroupedIconButtonProps = {
-    className?: string;
-    label?: string;
-    onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
-    children?: ComponentChildren;
-};
-/** Renders an icon button as part of a ButtonGroup */
-export declare const GroupedIconButton: (props: GroupedIconButtonProps) => JSX.Element;
-//# sourceMappingURL=grouped-icon-button.d.ts.map

package/dist/lib/components/grouped-icon-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grouped-icon-button.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grouped-icon-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,iBAAiB,EAAE,GAAG,EAAC,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAY9D,CAAC"}

package/dist/lib/components/grouped-icon-button.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-/** Renders an icon button as part of a ButtonGroup */
-export const GroupedIconButton = (props) => {
-    const { className = '', label, onClick, children } = props;
-    return (_jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: children ? children : _jsx("div", { className: "deck-widget-icon" }) }));
-};
-//# sourceMappingURL=grouped-icon-button.js.map

package/dist/lib/components/grouped-icon-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grouped-icon-button.js","sourceRoot":"","sources":["../../../src/lib/components/grouped-icon-button.tsx"],"names":[],"mappings":";AAaA,sDAAsD;AACtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAC,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC;IACzD,OAAO,CACL,iBACE,SAAS,EAAE,2BAA2B,SAAS,EAAE,EACjD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEX,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,kBAAkB,GAAG,GACpD,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/lib/components/icon-menu.d.ts

@@ -1,16 +0,0 @@
-import type { JSX } from 'preact';
-export type IconMenuProps<KeyType = string> = {
-    className: string;
-    icon?: JSX.Element;
-    label?: string;
-    menuItems: {
-        value: KeyType;
-        icon: JSX.Element;
-        label: string;
-    }[];
-    initialItem: KeyType;
-    onItemSelected: (item: KeyType) => void;
-};
-/** A component that renders an icon popup menu */
-export declare function IconMenu<KeyType extends string>(props: IconMenuProps<KeyType>): JSX.Element;
-//# sourceMappingURL=icon-menu.d.ts.map

package/dist/lib/components/icon-menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAMhC,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,MAAM,IAAI;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAC,KAAK,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAChE,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,kDAAkD;AAClD,wBAAgB,QAAQ,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,eAsD7E"}

package/dist/lib/components/icon-menu.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { IconButton } from "./icon-button.js";
-import { ButtonGroup } from "./button-group.js";
-import { GroupedIconButton } from "./grouped-icon-button.js";
-/** A component that renders an icon popup menu */
-export function IconMenu(props) {
-    const [menuOpen, setMenuOpen] = useState(false);
-    const containerRef = useRef(null);
-    // Close the menu when clicking outside.
-    const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-            setMenuOpen(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [containerRef]);
-    const [selectedItem, setSelectedItem] = useState(props.initialItem);
-    const handleSelectItem = (item) => {
-        setSelectedItem(item);
-        setMenuOpen(false);
-        props.onItemSelected(item);
-    };
-    const handleButtonClick = () => setMenuOpen(!menuOpen);
-    const selectedMenuItem = props.menuItems.find(item => item.value === selectedItem);
-    const label = props.label || selectedMenuItem?.label || '';
-    const icon = (props.icon || selectedMenuItem?.icon);
-    return (_jsxs("div", { style: { position: 'relative', display: 'inline-block' }, ref: containerRef, children: [_jsx(IconButton, { className: props.className, label: label, onClick: handleButtonClick, children: icon }), menuOpen && (_jsx("div", { className: "deck-widget-icon-menu", children: _jsx(ButtonGroup, { orientation: "vertical", children: props.menuItems.map(item => (_jsx(GroupedIconButton, { label: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value))) }) }))] }));
-}
-//# sourceMappingURL=icon-menu.js.map

package/dist/lib/components/icon-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-menu.js","sourceRoot":"","sources":["../../../src/lib/components/icon-menu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,UAAU,EAAC,yBAAsB;AACzC,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAC3C,OAAO,EAAC,iBAAiB,EAAC,iCAA8B;AAWxD,kDAAkD;AAClD,MAAM,UAAU,QAAQ,CAAyB,KAA6B;IAC5E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,wCAAwC;IACxC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACjF,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAE7E,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE;QACzC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;IACnF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,gBAAgB,EAAE,KAAK,IAAI,EAAE,CAAC;IAC3D,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,gBAAgB,EAAE,IAAI,CAAE,CAAC;IAErD,OAAO,CACL,eAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAC,EAAE,GAAG,EAAE,YAAY,aAC5E,KAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,iBAAiB,YAC7E,IAAI,GACM,EACZ,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,uBAAuB,YACpC,KAAC,WAAW,IAAC,WAAW,EAAC,UAAU,YAChC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC3B,KAAC,iBAAiB,IAEhB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,YAE1C,IAAI,CAAC,IAAI,IAJL,IAAI,CAAC,KAAK,CAKG,CACrB,CAAC,GACU,GACV,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/lib/components/simple-menu.d.ts

@@ -1,16 +0,0 @@
-import type { JSX } from 'preact';
-export type SimpleMenuProps = {
-    menuItems: {
-        key: string;
-        label: string;
-    }[];
-    onItemSelected: (key: string) => void;
-    position: {
-        x: number;
-        y: number;
-    };
-    style?: JSX.CSSProperties;
-};
-/** Renders a simple dropdown menu at an arbitrary position */
-export declare const SimpleMenu: (props: SimpleMenuProps) => JSX.Element;
-//# sourceMappingURL=simple-menu.d.ts.map

package/dist/lib/components/simple-menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAqBhC,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACjC,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,UAAU,UAAW,eAAe,gBAsBhD,CAAC"}

package/dist/lib/components/simple-menu.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-const MENU_STYLE = {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    background: 'white',
-    border: '1px solid #ccc',
-    borderRadius: '4px',
-    marginTop: 'var(--menu-gap, 4px)',
-    zIndex: 100
-};
-const MENU_ITEM_STYLE = {
-    background: 'white',
-    border: 'none',
-    padding: '4px',
-    cursor: 'pointer',
-    pointerEvents: 'auto'
-};
-/** Renders a simple dropdown menu at an arbitrary position */
-export const SimpleMenu = (props) => {
-    const { menuItems, onItemSelected, position, style } = props;
-    const styleOverride = {
-        ...MENU_STYLE,
-        ...style,
-        left: `${position.x}px`,
-        top: `${position.y}px`
-    };
-    return (_jsx("div", { style: styleOverride, children: menuItems.map(({ key, label }) => (_jsx("button", { style: { ...MENU_ITEM_STYLE, display: 'block' }, onClick: _ => onItemSelected(key), children: label }, key))) }));
-};
-//# sourceMappingURL=simple-menu.js.map

package/dist/lib/components/simple-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-menu.js","sourceRoot":"","sources":["../../../src/lib/components/simple-menu.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,GAAsB;IACpC,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,gBAAgB;IACxB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,sBAAsB;IACjC,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,eAAe,GAAsB;IACzC,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,SAAS;IACjB,aAAa,EAAE,MAAM;CACtB,CAAC;AASF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC;IAC3D,MAAM,aAAa,GAAsB;QACvC,GAAG,UAAU;QACb,GAAG,KAAK;QACR,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,IAAI;QACvB,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,aAAa,YACtB,SAAS,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAE,CAAC,CAC/B,iBAEE,KAAK,EAAE,EAAC,GAAG,eAAe,EAAE,OAAO,EAAE,OAAO,EAAC,EAC7C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,YAEhC,KAAK,IAJD,GAAG,CAKD,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}