@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/README.md

@@ -15,7 +15,7 @@ ACK produces and edits chart configuration (type, slots, options, filters). It d
 ## Installation
 
 ```bash
-npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.5.1 @luzmo/icons@^1.0.1-alpha.47
+npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.6.1 @luzmo/icons@^1.0.1-alpha.49
 ```
 
 ACK uses Lucero 2 for its design-system primitives. Package managers that do not install peer dependencies automatically must install the compatible peer versions explicitly.
@@ -26,6 +26,8 @@ To render the configured charts, also install Luzmo Embed (optional):
 npm install @luzmo/embed
 ```
 
+`@luzmo/embed` works from 7.5.0 within 7.x and on any 8.x (peer range `^7.5.0 || ^8.0.0`); 9 is not supported. A chart's `inlineData` (in `luzmo-interactive-viz-item`) needs 8.1.0 or a later 8.x and is a no-op on 7.x. The config panel loads its columns from the chart's datasets, so it hides itself for a chart with `inlineData` and no dataset columns. Embed applies no filters or ranking to `inlineData`, so a chart with it has no filters editor in the panel and no top-N ranking action. Saving a chart to a dashboard keeps `inlineData`, and the server rejects the save when the dashboard's inline data passes 2 MB in total. Embed treats `inlineData` as already-authorized output and does not apply viewer token filters to it, also after a dashboard save, so remove records the viewer must not see before you pass them.
+
 Optional framework wrappers for embedding: `@luzmo/react-embed`, `@luzmo/ngx-embed`, `@luzmo/vue-embed`.
 
 > **Important**: This package is linked to `@luzmo/dashboard-contents-types@1.0.47`. Ensure you are using this version when working with `slotsContents`, `slotConfiguration`, `options`, and grid configurations.
@@ -122,6 +124,10 @@ Let users adjust how a chart looks and behaves (colors, labels, chart mode, lege
 | Item Option       | `@luzmo/analytics-components-kit/item-option`       | Single option control (expose only what you need) | [Docs](https://developer.luzmo.com/guide/ack--components--item-options--luzmo-item-option)       |
 | Item Option Panel | `@luzmo/analytics-components-kit/item-option-panel` | Full grouped options editor for a chart type      | [Docs](https://developer.luzmo.com/guide/ack--components--item-options--luzmo-item-option-panel) |
 
+For an editor with undo, set `live-interactions` on `luzmo-item-option`, `luzmo-item-option-panel`, or `luzmo-interactive-viz-item`. You can also enable it directly on `luzmo-item-option-slider`, `luzmo-item-option-color-picker`, `luzmo-item-option-color-range`, and `luzmo-item-option-guidelines` (line colors). Drags and held keys then update live, without debounce. Gesture updates carry `interaction: { id }` on `luzmo-option-changed` for bare controls, `luzmo-options-changed` for item option/panel, and `luzmo-chart-changed` for interactive viz item.
+
+All these entry points emit or forward `luzmo-option-interaction-start` (detail `{ id }`) and `-end` / `-cancel` (detail `{ id, changed }`) so you can record one history entry per gesture. A press that changes nothing emits no lifecycle events. Events through item option/panel include `optionKey`; bare controls omit it. Interactive viz item forwards the lifecycle with `optionKey`, plus the original `chart` and `generation` context. Call `endInteraction()` on the control or enclosing item option, panel, or interactive viz item before removing or rebinding it: it synchronously ends open gestures while keeping their current values. Live interactions are off by default; the default keeps the debounced behavior. The gesture boundaries come from Lucero; ACK requires `@luzmo/lucero` `^2.6.1` (at least 2.6.1 and below 3.0.0).
+
 Individual option control editors are also exported for fully custom option UIs: `item-option-action-button-group`, `item-option-color-palette-picker`, `item-option-color-picker`, `item-option-color-range`, `item-option-guidelines`, `item-option-multi-language-field`, `item-option-number-field`, `item-option-picker`, `item-option-position-picker`, `item-option-positions-number-field`, `item-option-radio-button-group`, `item-option-slider`, `item-option-switch`, and `item-option-text-field`.
 
 ### Filters
@@ -339,7 +345,9 @@ import type {
   FiltersFormat,
   CleanFilterClauseGroup,
   ItemFilterOutput,
-  DashboardFilterOutput
+  DashboardFilterOutput,
+  ItemOptionsChangedEventDetail,
+  ItemOptionInteractionEventDetail
 } from '@luzmo/analytics-components-kit/types';
 ```
 

package/angular/components/interactive-viz-item.ts

@@ -1,7 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/interactive-viz-item';
-import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
-export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, DashboardActions, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, DashboardActions, FlexChartConfig, InlineData, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
 import type { LuzmoEmbedVizItem } from '@luzmo/embed';
 
 @Component({
@@ -43,7 +43,7 @@ export class LuzmoInteractiveVizItem implements OnChanges {
   @Input({ alias: 'canFilter' })
   canFilter?: LuzmoEmbedVizItem['canFilter'];
 
-  /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+  /** Loose chart config (type, options, slots, filters, inlineData); slots may use the keyed-object form. */
   @Input({ alias: 'chart' })
   chart?: FlexChartConfig | null;
 
@@ -91,6 +91,10 @@ export class LuzmoInteractiveVizItem implements OnChanges {
   @Input({ alias: 'controlled', transform: booleanAttribute })
   controlled?: boolean;
 
+  /** Applies and emits option changes live while a control is dragged or a key is held, without debounce, and forwards `luzmo-option-interaction-*` events. Off by default. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
   /** The size of the element */
   @Input({ alias: 'size' })
   size?: 's' | 'm' | 'l' | 'xl';
@@ -98,9 +102,18 @@ export class LuzmoInteractiveVizItem implements OnChanges {
   /** Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set. */
   readonly luzmoChartOptionsChanged = output<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>({ alias: 'luzmoChartOptionsChanged' });
 
-  /** Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. */
+  /** Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. With `live-interactions`, option updates inside a gesture carry `interaction`. */
   readonly luzmoChartChanged = output<CustomEvent<InteractiveVizItemChartChangedEventDetail>>({ alias: 'luzmoChartChanged' });
 
+  /** With `live-interactions`: an option drag or held key in the config panel first changed its value, right before that `luzmo-chart-changed`; `detail.optionKey` names the option and `detail.chart` is the chart it started on. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<InteractiveVizItemInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: the gesture ended, after its last `luzmo-chart-changed`. `detail.changed` is false when the value is back at its start; `detail.chart` is still the chart it started on. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<InteractiveVizItemInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  /** With `live-interactions`: the gesture was cancelled and the control reverted to its start value. */
+  readonly luzmoOptionInteractionCancel = output<CustomEvent<InteractiveVizItemInteractionEventDetail>>({ alias: 'luzmoOptionInteractionCancel' });
+
   /** Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes. */
   readonly luzmoFeedbackChanged = output<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>({ alias: 'luzmoFeedbackChanged' });
 
@@ -167,6 +180,9 @@ export class LuzmoInteractiveVizItem implements OnChanges {
         case 'controlled':
           this.setHostProperty('controlled', changes['controlled'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         case 'size':
           this.setHostProperty('size', changes['size'].currentValue);
           break;
@@ -201,6 +217,27 @@ export class LuzmoInteractiveVizItem implements OnChanges {
       })
     );
 
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<InteractiveVizItemInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<InteractiveVizItemInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event: Event) => {
+        const typed = event as CustomEvent<InteractiveVizItemInteractionEventDetail>;
+        this.luzmoOptionInteractionCancel.emit(typed);
+      })
+    );
+
     this.listenerCleanup.push(
       this.renderer.listen(this.host, 'luzmo-feedback-changed', (event: Event) => {
         const typed = event as CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>;

package/angular/components/item-option-color-picker.ts

@@ -1,7 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-color-picker';
-import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
 import type { Placement } from '@luzmo/lucero';
 
 @Component({
@@ -42,6 +42,10 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
   @Input({ alias: 'debounce' })
   debounce?: number;
 
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
   /** Internal timer handle used to debounce change events. */
   @Input({ alias: 'debounceTimeout' })
   debounceTimeout?: any;
@@ -62,9 +66,15 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
   @Input({ alias: 'placement' })
   placement?: Placement;
 
-  /** Emitted when the option value changes. */
+  /** Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
+  /** With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: the gesture ended (including when the popover closes), after its last value update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -89,6 +99,9 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         case 'debounceTimeout':
           this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
           break;
@@ -127,6 +140,20 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
         this.luzmoOptionChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/item-option-color-range.ts

@@ -1,7 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-color-range';
-import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
 
 @Component({
   selector: 'luzmo-item-option-color-range',
@@ -73,6 +73,10 @@ export class LuzmoItemOptionColorRange implements OnChanges {
   @Input({ alias: 'debounce' })
   debounce?: number;
 
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
   /** The function to parse the value */
   @Input({ alias: 'parseValue' })
   parseValue?: unknown;
@@ -81,9 +85,15 @@ export class LuzmoItemOptionColorRange implements OnChanges {
   @Input({ alias: 'toValue' })
   toValue?: unknown;
 
-  /** Emitted when the option value changes. */
+  /** Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
+  /** With `live-interactions`: a color drag or held key on one stop first changed its color, right before that value update. Each stop has its own gestures; one that never changes its color emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: that stop's gesture ended, after its last value update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -132,6 +142,9 @@ export class LuzmoItemOptionColorRange implements OnChanges {
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         case 'parseValue':
           this.setHostProperty('parseValue', changes['parseValue'].currentValue);
           break;
@@ -161,6 +174,20 @@ export class LuzmoItemOptionColorRange implements OnChanges {
         this.luzmoOptionChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/item-option-guidelines.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-guidelines';
-import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
-export type { GuidelineLine, GuidelineLineType, GuidelineStyle, GuidelineStyleType, GuidelineWidth, Guidelines, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+export type { GuidelineLine, GuidelineLineType, GuidelineStyle, GuidelineStyleType, GuidelineWidth, Guidelines, ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 
 @Component({
   selector: 'luzmo-item-option-guidelines',
@@ -33,9 +33,19 @@ export class LuzmoItemOptionGuidelines implements OnChanges {
   @Input({ alias: 'debounce' })
   debounce?: number;
 
-  /** Emitted when the guidelines value changes. */
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
+  /** Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
+  /** With `live-interactions`: a color drag or held key on one line first changed its color, right before that value update. Each line has its own gestures; one that never changes its color emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: that line's gesture ended, after its last value update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -54,6 +64,9 @@ export class LuzmoItemOptionGuidelines implements OnChanges {
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         default:
           break;
       }
@@ -77,6 +90,20 @@ export class LuzmoItemOptionGuidelines implements OnChanges {
         this.luzmoOptionChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/item-option-panel.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-panel';
-import type { LuzmoItemOptionPanel as LuzmoItemOptionPanelHostElement, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
-export type { ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
+import type { LuzmoItemOptionPanel as LuzmoItemOptionPanelHostElement, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
+export type { ItemOptionInteraction, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
 import type { ElementSize } from '@luzmo/analytics-components-kit/types';
 import type { OptionsConfig, Slot, ThemeConfig, TranslationOverrides, TranslationsFile, VizItemType } from '@luzmo/dashboard-contents-types';
 
@@ -71,9 +71,22 @@ export class LuzmoItemOptionPanel implements OnChanges {
   @Input({ alias: 'authToken' })
   authToken?: string;
 
-  /** Announces that the `options` of the element have changed */
+  /** Emits options updates live, without the controls' debounce, plus `luzmo-option-interaction-*` events around drags and held keys. Off by default. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
+  /** Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`. */
   readonly luzmoOptionsChanged = output<CustomEvent<ItemOptionsChangedEventDetail>>({ alias: 'luzmoOptionsChanged' });
 
+  /** With `live-interactions`: bubbles from the option whose drag or held key first changed its value, right before that options update; `detail.optionKey` names it. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: bubbles from the option whose gesture ended, after its last options update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  /** With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted. */
+  readonly luzmoOptionInteractionCancel = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionCancel' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -119,6 +132,9 @@ export class LuzmoItemOptionPanel implements OnChanges {
         case 'authToken':
           this.setHostProperty('authToken', changes['authToken'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         default:
           break;
       }
@@ -142,6 +158,27 @@ export class LuzmoItemOptionPanel implements OnChanges {
         this.luzmoOptionsChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionCancel.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/item-option-slider.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-slider';
-import type { LuzmoItemOptionSlider as LuzmoItemOptionSliderHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+import type { LuzmoItemOptionSlider as LuzmoItemOptionSliderHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
 
 @Component({
   selector: 'luzmo-item-option-slider',
@@ -49,6 +49,10 @@ export class LuzmoItemOptionSlider implements OnChanges {
   @Input({ alias: 'debounce' })
   debounce?: number;
 
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
   /** Optional transform applied to the stored value before it is displayed in the control. */
   @Input({ alias: 'parseValue' })
   parseValue?: unknown;
@@ -57,9 +61,18 @@ export class LuzmoItemOptionSlider implements OnChanges {
   @Input({ alias: 'toValue' })
   toValue?: unknown;
 
-  /** Emitted when the option value changes. */
+  /** Emitted when the option value changes. With `live-interactions`, emitted on every drag or key step and carries `interaction` inside a gesture. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
+  /** With `live-interactions`: a drag or held key first changed the value, right before that value update. A press that never changes the value emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  /** With `live-interactions`: the pointer was cancelled and the slider reverted to its start value. */
+  readonly luzmoOptionInteractionCancel = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionCancel' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -90,6 +103,9 @@ export class LuzmoItemOptionSlider implements OnChanges {
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         case 'parseValue':
           this.setHostProperty('parseValue', changes['parseValue'].currentValue);
           break;
@@ -119,6 +135,27 @@ export class LuzmoItemOptionSlider implements OnChanges {
         this.luzmoOptionChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionCancel.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/item-option.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option';
-import type { LuzmoItemOption as LuzmoItemOptionHostElement, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
-export type { ItemOptionChangedEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
+import type { LuzmoItemOption as LuzmoItemOptionHostElement, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail, ItemOptionInteractionEventName, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
 import type { ElementSize } from '@luzmo/analytics-components-kit/types';
 import type { OptionConfig, OptionTranslation, ThemeConfig, TranslationOverrides, VizItemType } from '@luzmo/dashboard-contents-types';
 
@@ -75,13 +75,26 @@ export class LuzmoItemOption implements OnChanges {
   @Input({ alias: 'size' })
   size?: ElementSize;
 
+  /** Emits options updates live, without the control's debounce, plus `luzmo-option-interaction-*` events around drags and held keys. Off by default. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
   /** Callback that updates `options` and emits `luzmo-options-changed`; used internally by the rendered control. */
   @Input({ alias: 'changedOptions' })
   changedOptions?: unknown;
 
-  /** Announces that the `options` of the element have changed */
+  /** Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`. */
   readonly luzmoOptionsChanged = output<CustomEvent<ItemOptionsChangedEventDetail>>({ alias: 'luzmoOptionsChanged' });
 
+  /** With `live-interactions`: a drag or held key first changed the control's value, right before that options update. A press that never changes the value emits no lifecycle. `detail.optionKey` is set. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: the gesture ended, after its last options update. `detail.changed` is false when the value is back at its start. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  /** With `live-interactions`: the gesture was cancelled and the control reverted to its start value. */
+  readonly luzmoOptionInteractionCancel = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionCancel' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -130,6 +143,9 @@ export class LuzmoItemOption implements OnChanges {
         case 'size':
           this.setHostProperty('size', changes['size'].currentValue);
           break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
         case 'changedOptions':
           this.setHostProperty('changedOptions', changes['changedOptions'].currentValue);
           break;
@@ -156,6 +172,27 @@ export class LuzmoItemOption implements OnChanges {
         this.luzmoOptionsChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionCancel.emit(typed);
+      })
+    );
   }
 }
 

package/angular/esm/components/interactive-viz-item.d.ts

@@ -1,9 +1,9 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/interactive-viz-item';
-import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
 import type { LuzmoEmbedVizItem } from '@luzmo/embed';
 import * as i0 from "@angular/core";
-export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, DashboardActions, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
+export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, DashboardActions, FlexChartConfig, InlineData, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
 export declare class LuzmoInteractiveVizItem implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -18,7 +18,7 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
     addToDashboard?: boolean;
     /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
     canFilter?: LuzmoEmbedVizItem['canFilter'];
-    /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+    /** Loose chart config (type, options, slots, filters, inlineData); slots may use the keyed-object form. */
     chart?: FlexChartConfig | null;
     /** Current feedback (drives the thumbs up/down selection). */
     feedback?: ChartFeedback | null;
@@ -42,12 +42,20 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
     hideConfigPanel?: boolean;
     /** When present, chart changes are only emitted and the host sets `chart`; otherwise they are applied here and still emitted. */
     controlled?: boolean;
+    /** Applies and emits option changes live while a control is dragged or a key is held, without debounce, and forwards `luzmo-option-interaction-*` events. Off by default. */
+    liveInteractions?: boolean;
     /** The size of the element */
     size?: 's' | 'm' | 'l' | 'xl';
     /** Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set. */
     readonly luzmoChartOptionsChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
-    /** Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. */
+    /** Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. With `live-interactions`, option updates inside a gesture carry `interaction`. */
     readonly luzmoChartChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
+    /** With `live-interactions`: an option drag or held key in the config panel first changed its value, right before that `luzmo-chart-changed`; `detail.optionKey` names the option and `detail.chart` is the chart it started on. */
+    readonly luzmoOptionInteractionStart: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    /** With `live-interactions`: the gesture ended, after its last `luzmo-chart-changed`. `detail.changed` is false when the value is back at its start; `detail.chart` is still the chart it started on. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    /** With `live-interactions`: the gesture was cancelled and the control reverted to its start value. */
+    readonly luzmoOptionInteractionCancel: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
     /** Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes. */
     readonly luzmoFeedbackChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
     /** Fired by the inner `luzmo-add-to-dashboard` after the chart was saved. */
@@ -65,12 +73,13 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoInteractiveVizItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInteractiveVizItem, "luzmo-interactive-viz-item", ["luzmoInteractiveVizItem"], { "language": { "alias": "language"; "required": false; }; "addToDashboard": { "alias": "addToDashboard"; "required": false; }; "canFilter": { "alias": "canFilter"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideActions": { "alias": "hideActions"; "required": false; }; "hideFeedback": { "alias": "hideFeedback"; "required": false; }; "hideConfigPanel": { "alias": "hideConfigPanel"; "required": false; }; "controlled": { "alias": "controlled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoChartOptionsChanged": "luzmoChartOptionsChanged"; "luzmoChartChanged": "luzmoChartChanged"; "luzmoFeedbackChanged": "luzmoFeedbackChanged"; "luzmoChartAdded": "luzmoChartAdded"; "luzmoChartAddFailed": "luzmoChartAddFailed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInteractiveVizItem, "luzmo-interactive-viz-item", ["luzmoInteractiveVizItem"], { "language": { "alias": "language"; "required": false; }; "addToDashboard": { "alias": "addToDashboard"; "required": false; }; "canFilter": { "alias": "canFilter"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideActions": { "alias": "hideActions"; "required": false; }; "hideFeedback": { "alias": "hideFeedback"; "required": false; }; "hideConfigPanel": { "alias": "hideConfigPanel"; "required": false; }; "controlled": { "alias": "controlled"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoChartOptionsChanged": "luzmoChartOptionsChanged"; "luzmoChartChanged": "luzmoChartChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; "luzmoOptionInteractionCancel": "luzmoOptionInteractionCancel"; "luzmoFeedbackChanged": "luzmoFeedbackChanged"; "luzmoChartAdded": "luzmoChartAdded"; "luzmoChartAddFailed": "luzmoChartAddFailed"; }, never, ["*"], true, never>;
     static ngAcceptInputType_addToDashboard: unknown;
     static ngAcceptInputType_hideActions: unknown;
     static ngAcceptInputType_hideFeedback: unknown;
     static ngAcceptInputType_hideConfigPanel: unknown;
     static ngAcceptInputType_controlled: unknown;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoInteractiveVizItem */
 export type LuzmoInteractiveVizItemElement = LuzmoInteractiveVizItemHostElement;