@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/angular/esm/components/interactive-viz-item.js

@@ -26,7 +26,7 @@ export class LuzmoInteractiveVizItem {
     addToDashboard;
     /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
     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;
     /** Current feedback (drives the thumbs up/down selection). */
     feedback;
@@ -50,12 +50,20 @@ export class LuzmoInteractiveVizItem {
     hideConfigPanel;
     /** When present, chart changes are only emitted and the host sets `chart`; otherwise they are applied here and still emitted. */
     controlled;
+    /** 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;
     /** The size of the element */
     size;
     /** Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set. */
     luzmoChartOptionsChanged = output({ 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`. */
     luzmoChartChanged = output({ 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. */
+    luzmoOptionInteractionStart = output({ 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. */
+    luzmoOptionInteractionEnd = output({ alias: 'luzmoOptionInteractionEnd' });
+    /** With `live-interactions`: the gesture was cancelled and the control reverted to its start value. */
+    luzmoOptionInteractionCancel = output({ alias: 'luzmoOptionInteractionCancel' });
     /** Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes. */
     luzmoFeedbackChanged = output({ alias: 'luzmoFeedbackChanged' });
     /** Fired by the inner `luzmo-add-to-dashboard` after the chart was saved. */
@@ -118,6 +126,9 @@ export class LuzmoInteractiveVizItem {
                 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;
@@ -144,6 +155,18 @@ export class LuzmoInteractiveVizItem {
             const typed = event;
             this.luzmoChartChanged.emit(typed);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionStart.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionEnd.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionCancel.emit(typed);
+        }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-feedback-changed', (event) => {
             const typed = event;
             this.luzmoFeedbackChanged.emit(typed);
@@ -158,7 +181,7 @@ export class LuzmoInteractiveVizItem {
         }));
     }
     static ɵfac = function LuzmoInteractiveVizItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoInteractiveVizItem)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInteractiveVizItem, selectors: [["luzmo-interactive-viz-item"]], inputs: { language: "language", addToDashboard: [2, "addToDashboard", "addToDashboard", booleanAttribute], canFilter: "canFilter", chart: "chart", feedback: "feedback", messageId: "messageId", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", contentLanguage: "contentLanguage", hideActions: [2, "hideActions", "hideActions", booleanAttribute], hideFeedback: [2, "hideFeedback", "hideFeedback", booleanAttribute], hideConfigPanel: [2, "hideConfigPanel", "hideConfigPanel", booleanAttribute], controlled: [2, "controlled", "controlled", booleanAttribute], size: "size" }, outputs: { luzmoChartOptionsChanged: "luzmoChartOptionsChanged", luzmoChartChanged: "luzmoChartChanged", luzmoFeedbackChanged: "luzmoFeedbackChanged", luzmoChartAdded: "luzmoChartAdded", luzmoChartAddFailed: "luzmoChartAddFailed" }, exportAs: ["luzmoInteractiveVizItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInteractiveVizItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInteractiveVizItem, selectors: [["luzmo-interactive-viz-item"]], inputs: { language: "language", addToDashboard: [2, "addToDashboard", "addToDashboard", booleanAttribute], canFilter: "canFilter", chart: "chart", feedback: "feedback", messageId: "messageId", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", contentLanguage: "contentLanguage", hideActions: [2, "hideActions", "hideActions", booleanAttribute], hideFeedback: [2, "hideFeedback", "hideFeedback", booleanAttribute], hideConfigPanel: [2, "hideConfigPanel", "hideConfigPanel", booleanAttribute], controlled: [2, "controlled", "controlled", booleanAttribute], liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], size: "size" }, outputs: { luzmoChartOptionsChanged: "luzmoChartOptionsChanged", luzmoChartChanged: "luzmoChartChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd", luzmoOptionInteractionCancel: "luzmoOptionInteractionCancel", luzmoFeedbackChanged: "luzmoFeedbackChanged", luzmoChartAdded: "luzmoChartAdded", luzmoChartAddFailed: "luzmoChartAddFailed" }, exportAs: ["luzmoInteractiveVizItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInteractiveVizItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -217,8 +240,11 @@ export class LuzmoInteractiveVizItem {
         }], controlled: [{
             type: Input,
             args: [{ alias: 'controlled', transform: booleanAttribute }]
+        }], liveInteractions: [{
+            type: Input,
+            args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], luzmoChartOptionsChanged: [{ type: i0.Output, args: ["luzmoChartOptionsChanged"] }], luzmoChartChanged: [{ type: i0.Output, args: ["luzmoChartChanged"] }], luzmoFeedbackChanged: [{ type: i0.Output, args: ["luzmoFeedbackChanged"] }], luzmoChartAdded: [{ type: i0.Output, args: ["luzmoChartAdded"] }], luzmoChartAddFailed: [{ type: i0.Output, args: ["luzmoChartAddFailed"] }] }); })();
+        }], luzmoChartOptionsChanged: [{ type: i0.Output, args: ["luzmoChartOptionsChanged"] }], luzmoChartChanged: [{ type: i0.Output, args: ["luzmoChartChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }], luzmoOptionInteractionCancel: [{ type: i0.Output, args: ["luzmoOptionInteractionCancel"] }], luzmoFeedbackChanged: [{ type: i0.Output, args: ["luzmoFeedbackChanged"] }], luzmoChartAdded: [{ type: i0.Output, args: ["luzmoChartAdded"] }], luzmoChartAddFailed: [{ type: i0.Output, args: ["luzmoChartAddFailed"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoInteractiveVizItem, { className: "LuzmoInteractiveVizItem", filePath: "components/interactive-viz-item.ts", lineNumber: 22 }); })();

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

@@ -1,9 +1,9 @@
 import { OnChanges, 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';
+import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
 import type { Placement } from '@luzmo/lucero';
 import * as i0 from "@angular/core";
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
 export declare class LuzmoItemOptionColorPicker implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -20,6 +20,8 @@ export declare class LuzmoItemOptionColorPicker implements OnChanges {
     shape?: 'circle' | 'rectangle';
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce?: number;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+    liveInteractions?: boolean;
     /** Internal timer handle used to debounce change events. */
     debounceTimeout?: any;
     /** The current color value. */
@@ -30,8 +32,12 @@ export declare class LuzmoItemOptionColorPicker implements OnChanges {
     noAlphaChannel?: boolean;
     /** Placement of the color picker dropdown relative to its trigger. */
     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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: the gesture ended (including when the popover closes), after its last value update. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -43,7 +49,8 @@ export declare class LuzmoItemOptionColorPicker implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionColorPicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorPicker, "luzmo-item-option-color-picker", ["luzmoItemOptionColorPicker"], { "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorPicker, "luzmo-item-option-color-picker", ["luzmoItemOptionColorPicker"], { "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_liveInteractions: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_noAlphaChannel: unknown;
 }

package/angular/esm/components/item-option-color-picker.js

@@ -23,6 +23,8 @@ export class LuzmoItemOptionColorPicker {
     shape;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+    liveInteractions;
     /** Internal timer handle used to debounce change events. */
     debounceTimeout;
     /** The current color value. */
@@ -33,8 +35,12 @@ export class LuzmoItemOptionColorPicker {
     noAlphaChannel;
     /** Placement of the color picker dropdown relative to its trigger. */
     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. */
     luzmoOptionChanged = output({ 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. */
+    luzmoOptionInteractionStart = output({ alias: 'luzmoOptionInteractionStart' });
+    /** With `live-interactions`: the gesture ended (including when the popover closes), after its last value update. */
+    luzmoOptionInteractionEnd = output({ alias: 'luzmoOptionInteractionEnd' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -58,6 +64,9 @@ export class LuzmoItemOptionColorPicker {
                 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;
@@ -92,9 +101,17 @@ export class LuzmoItemOptionColorPicker {
             const typed = event;
             this.luzmoOptionChanged.emit(typed);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionStart.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionEnd.emit(typed);
+        }));
     }
     static ɵfac = function LuzmoItemOptionColorPicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionColorPicker)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorPicker, selectors: [["luzmo-item-option-color-picker"]], inputs: { swatches: "swatches", rounding: "rounding", shape: "shape", debounce: "debounce", debounceTimeout: "debounceTimeout", value: "value", disabled: [2, "disabled", "disabled", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorPicker_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorPicker, selectors: [["luzmo-item-option-color-picker"]], inputs: { swatches: "swatches", rounding: "rounding", shape: "shape", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], debounceTimeout: "debounceTimeout", value: "value", disabled: [2, "disabled", "disabled", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorPicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -120,6 +137,9 @@ export class LuzmoItemOptionColorPicker {
         }], debounce: [{
             type: Input,
             args: [{ alias: 'debounce' }]
+        }], liveInteractions: [{
+            type: Input,
+            args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
         }], debounceTimeout: [{
             type: Input,
             args: [{ alias: 'debounceTimeout' }]
@@ -135,5 +155,5 @@ export class LuzmoItemOptionColorPicker {
         }], placement: [{
             type: Input,
             args: [{ alias: 'placement' }]
-        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorPicker, { className: "LuzmoItemOptionColorPicker", filePath: "components/item-option-color-picker.ts", lineNumber: 17 }); })();

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

@@ -1,8 +1,8 @@
 import { OnChanges, 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';
+import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
 import * as i0 from "@angular/core";
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
 export declare class LuzmoItemOptionColorRange implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -35,12 +35,18 @@ export declare class LuzmoItemOptionColorRange implements OnChanges {
     reverse?: boolean;
     /** The debounce time in milliseconds */
     debounce?: number;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys */
+    liveInteractions?: boolean;
     /** The function to parse the value */
     parseValue?: unknown;
     /** The function to convert the value */
     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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: that stop's gesture ended, after its last value update. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -52,7 +58,7 @@ export declare class LuzmoItemOptionColorRange implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionColorRange, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorRange, "luzmo-item-option-color-range", ["luzmoItemOptionColorRange"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "editRangeSize": { "alias": "editRangeSize"; "required": false; }; "noValues": { "alias": "noValues"; "required": false; }; "minimumRangeSize": { "alias": "minimumRangeSize"; "required": false; }; "negativeInfinityValue": { "alias": "negativeInfinityValue"; "required": false; }; "readOnlyColorPicker": { "alias": "readOnlyColorPicker"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorRange, "luzmo-item-option-color-range", ["luzmoItemOptionColorRange"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "editRangeSize": { "alias": "editRangeSize"; "required": false; }; "noValues": { "alias": "noValues"; "required": false; }; "minimumRangeSize": { "alias": "minimumRangeSize"; "required": false; }; "negativeInfinityValue": { "alias": "negativeInfinityValue"; "required": false; }; "readOnlyColorPicker": { "alias": "readOnlyColorPicker"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_percentage: unknown;
     static ngAcceptInputType_noAlphaChannel: unknown;
@@ -61,6 +67,7 @@ export declare class LuzmoItemOptionColorRange implements OnChanges {
     static ngAcceptInputType_negativeInfinityValue: unknown;
     static ngAcceptInputType_readOnlyColorPicker: unknown;
     static ngAcceptInputType_reverse: unknown;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionColorRange */
 export type LuzmoItemOptionColorRangeElement = LuzmoItemOptionColorRangeHostElement;

package/angular/esm/components/item-option-color-range.js

@@ -39,12 +39,18 @@ export class LuzmoItemOptionColorRange {
     reverse;
     /** The debounce time in milliseconds */
     debounce;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys */
+    liveInteractions;
     /** The function to parse the value */
     parseValue;
     /** The function to convert the value */
     toValue;
-    /** 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. */
     luzmoOptionChanged = output({ 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. */
+    luzmoOptionInteractionStart = output({ alias: 'luzmoOptionInteractionStart' });
+    /** With `live-interactions`: that stop's gesture ended, after its last value update. */
+    luzmoOptionInteractionEnd = output({ alias: 'luzmoOptionInteractionEnd' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -92,6 +98,9 @@ export class LuzmoItemOptionColorRange {
                 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;
@@ -117,9 +126,17 @@ export class LuzmoItemOptionColorRange {
             const typed = event;
             this.luzmoOptionChanged.emit(typed);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionStart.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionEnd.emit(typed);
+        }));
     }
     static ɵfac = function LuzmoItemOptionColorRange_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionColorRange)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorRange, selectors: [["luzmo-item-option-color-range"]], inputs: { value: "value", default: "default", disabled: [2, "disabled", "disabled", booleanAttribute], percentage: [2, "percentage", "percentage", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], editRangeSize: [2, "editRangeSize", "editRangeSize", booleanAttribute], noValues: [2, "noValues", "noValues", booleanAttribute], minimumRangeSize: "minimumRangeSize", negativeInfinityValue: [2, "negativeInfinityValue", "negativeInfinityValue", booleanAttribute], readOnlyColorPicker: [2, "readOnlyColorPicker", "readOnlyColorPicker", booleanAttribute], reverse: [2, "reverse", "reverse", booleanAttribute], debounce: "debounce", parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionColorRange"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorRange_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorRange, selectors: [["luzmo-item-option-color-range"]], inputs: { value: "value", default: "default", disabled: [2, "disabled", "disabled", booleanAttribute], percentage: [2, "percentage", "percentage", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], editRangeSize: [2, "editRangeSize", "editRangeSize", booleanAttribute], noValues: [2, "noValues", "noValues", booleanAttribute], minimumRangeSize: "minimumRangeSize", negativeInfinityValue: [2, "negativeInfinityValue", "negativeInfinityValue", booleanAttribute], readOnlyColorPicker: [2, "readOnlyColorPicker", "readOnlyColorPicker", booleanAttribute], reverse: [2, "reverse", "reverse", booleanAttribute], debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionColorRange"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorRange_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -169,11 +186,14 @@ export class LuzmoItemOptionColorRange {
         }], debounce: [{
             type: Input,
             args: [{ alias: 'debounce' }]
+        }], liveInteractions: [{
+            type: Input,
+            args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
         }], parseValue: [{
             type: Input,
             args: [{ alias: 'parseValue' }]
         }], toValue: [{
             type: Input,
             args: [{ alias: 'toValue' }]
-        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorRange, { className: "LuzmoItemOptionColorRange", filePath: "components/item-option-color-range.ts", lineNumber: 16 }); })();

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

@@ -1,8 +1,8 @@
 import { OnChanges, 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';
+import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 import * as i0 from "@angular/core";
-export type { GuidelineLine, GuidelineLineType, GuidelineStyle, GuidelineStyleType, GuidelineWidth, Guidelines, ItemOptionChangedEventDetail } 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';
 export declare class LuzmoItemOptionGuidelines implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -15,8 +15,14 @@ export declare class LuzmoItemOptionGuidelines implements OnChanges {
     defaultColor?: string;
     /** Delay in milliseconds before color and number changes are emitted. */
     debounce?: number;
-    /** Emitted when the guidelines value changes. */
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys. */
+    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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: that line's gesture ended, after its last value update. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -28,7 +34,8 @@ export declare class LuzmoItemOptionGuidelines implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionGuidelines, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionGuidelines, "luzmo-item-option-guidelines", ["luzmoItemOptionGuidelines"], { "defaultColor": { "alias": "defaultColor"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionGuidelines, "luzmo-item-option-guidelines", ["luzmoItemOptionGuidelines"], { "defaultColor": { "alias": "defaultColor"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionGuidelines */
 export type LuzmoItemOptionGuidelinesElement = LuzmoItemOptionGuidelinesHostElement;

package/angular/esm/components/item-option-guidelines.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-guidelines';
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
@@ -19,8 +19,14 @@ export class LuzmoItemOptionGuidelines {
     defaultColor;
     /** Delay in milliseconds before color and number changes are emitted. */
     debounce;
-    /** Emitted when the guidelines value changes. */
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys. */
+    liveInteractions;
+    /** Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged. */
     luzmoOptionChanged = output({ 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. */
+    luzmoOptionInteractionStart = output({ alias: 'luzmoOptionInteractionStart' });
+    /** With `live-interactions`: that line's gesture ended, after its last value update. */
+    luzmoOptionInteractionEnd = output({ alias: 'luzmoOptionInteractionEnd' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -38,6 +44,9 @@ export class LuzmoItemOptionGuidelines {
                 case 'debounce':
                     this.setHostProperty('debounce', changes['debounce'].currentValue);
                     break;
+                case 'liveInteractions':
+                    this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+                    break;
                 default:
                     break;
             }
@@ -57,9 +66,17 @@ export class LuzmoItemOptionGuidelines {
             const typed = event;
             this.luzmoOptionChanged.emit(typed);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionStart.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionEnd.emit(typed);
+        }));
     }
     static ɵfac = function LuzmoItemOptionGuidelines_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionGuidelines)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionGuidelines, selectors: [["luzmo-item-option-guidelines"]], inputs: { defaultColor: "defaultColor", debounce: "debounce" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionGuidelines"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionGuidelines_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionGuidelines, selectors: [["luzmo-item-option-guidelines"]], inputs: { defaultColor: "defaultColor", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute] }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionGuidelines"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionGuidelines_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -79,5 +96,8 @@ export class LuzmoItemOptionGuidelines {
         }], debounce: [{
             type: Input,
             args: [{ alias: 'debounce' }]
-        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+        }], liveInteractions: [{
+            type: Input,
+            args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionGuidelines, { className: "LuzmoItemOptionGuidelines", filePath: "components/item-option-guidelines.ts", lineNumber: 16 }); })();

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

@@ -1,10 +1,10 @@
 import { OnChanges, 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';
+import type { LuzmoItemOptionPanel as LuzmoItemOptionPanelHostElement, 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';
 import * as i0 from "@angular/core";
-export type { ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
+export type { ItemOptionInteraction, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
 export declare class LuzmoItemOptionPanel implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -35,8 +35,16 @@ export declare class LuzmoItemOptionPanel implements OnChanges {
     authKey?: string;
     /** The auth token of the databroker */
     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. */
+    liveInteractions?: boolean;
+    /** Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`. */
     readonly luzmoOptionsChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionsChangedEventDetail>>;
+    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: bubbles from the option whose gesture ended, after its last options update. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted. */
+    readonly luzmoOptionInteractionCancel: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -48,7 +56,8 @@ export declare class LuzmoItemOptionPanel implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionPanel, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionPanel, "luzmo-item-option-panel", ["luzmoItemOptionPanel"], { "language": { "alias": "language"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "options": { "alias": "options"; "required": false; }; "slots": { "alias": "slots"; "required": false; }; "customOptionsConfiguration": { "alias": "customOptionsConfiguration"; "required": false; }; "customTranslations": { "alias": "customTranslations"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; }, { "luzmoOptionsChanged": "luzmoOptionsChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionPanel, "luzmo-item-option-panel", ["luzmoItemOptionPanel"], { "language": { "alias": "language"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "options": { "alias": "options"; "required": false; }; "slots": { "alias": "slots"; "required": false; }; "customOptionsConfiguration": { "alias": "customOptionsConfiguration"; "required": false; }; "customTranslations": { "alias": "customTranslations"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; }, { "luzmoOptionsChanged": "luzmoOptionsChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; "luzmoOptionInteractionCancel": "luzmoOptionInteractionCancel"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionPanel */
 export type LuzmoItemOptionPanelElement = LuzmoItemOptionPanelHostElement;

package/angular/esm/components/item-option-panel.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-panel';
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
@@ -37,8 +37,16 @@ export class LuzmoItemOptionPanel {
     authKey;
     /** The auth token of the databroker */
     authToken;
-    /** 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. */
+    liveInteractions;
+    /** Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`. */
     luzmoOptionsChanged = output({ 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. */
+    luzmoOptionInteractionStart = output({ alias: 'luzmoOptionInteractionStart' });
+    /** With `live-interactions`: bubbles from the option whose gesture ended, after its last options update. */
+    luzmoOptionInteractionEnd = output({ alias: 'luzmoOptionInteractionEnd' });
+    /** With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted. */
+    luzmoOptionInteractionCancel = output({ alias: 'luzmoOptionInteractionCancel' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -83,6 +91,9 @@ export class LuzmoItemOptionPanel {
                 case 'authToken':
                     this.setHostProperty('authToken', changes['authToken'].currentValue);
                     break;
+                case 'liveInteractions':
+                    this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+                    break;
                 default:
                     break;
             }
@@ -102,9 +113,21 @@ export class LuzmoItemOptionPanel {
             const typed = event;
             this.luzmoOptionsChanged.emit(typed);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionStart.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionEnd.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-interaction-cancel', (event) => {
+            const typed = event;
+            this.luzmoOptionInteractionCancel.emit(typed);
+        }));
     }
     static ɵfac = function LuzmoItemOptionPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionPanel)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionPanel, selectors: [["luzmo-item-option-panel"]], inputs: { language: "language", itemType: "itemType", options: "options", slots: "slots", customOptionsConfiguration: "customOptionsConfiguration", customTranslations: "customTranslations", theme: "theme", size: "size", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken" }, outputs: { luzmoOptionsChanged: "luzmoOptionsChanged" }, exportAs: ["luzmoItemOptionPanel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionPanel_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionPanel, selectors: [["luzmo-item-option-panel"]], inputs: { language: "language", itemType: "itemType", options: "options", slots: "slots", customOptionsConfiguration: "customOptionsConfiguration", customTranslations: "customTranslations", theme: "theme", size: "size", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute] }, outputs: { luzmoOptionsChanged: "luzmoOptionsChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd", luzmoOptionInteractionCancel: "luzmoOptionInteractionCancel" }, exportAs: ["luzmoItemOptionPanel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -151,5 +174,8 @@ export class LuzmoItemOptionPanel {
         }], authToken: [{
             type: Input,
             args: [{ alias: 'authToken' }]
-        }], luzmoOptionsChanged: [{ type: i0.Output, args: ["luzmoOptionsChanged"] }] }); })();
+        }], liveInteractions: [{
+            type: Input,
+            args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
+        }], luzmoOptionsChanged: [{ type: i0.Output, args: ["luzmoOptionsChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }], luzmoOptionInteractionCancel: [{ type: i0.Output, args: ["luzmoOptionInteractionCancel"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionPanel, { className: "LuzmoItemOptionPanel", filePath: "components/item-option-panel.ts", lineNumber: 18 }); })();

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

@@ -1,8 +1,8 @@
 import { OnChanges, 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';
+import type { LuzmoItemOptionSlider as LuzmoItemOptionSliderHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
 import * as i0 from "@angular/core";
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
 export declare class LuzmoItemOptionSlider implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -23,12 +23,20 @@ export declare class LuzmoItemOptionSlider implements OnChanges {
     step?: number;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce?: number;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+    liveInteractions?: boolean;
     /** Optional transform applied to the stored value before it is displayed in the control. */
     parseValue?: unknown;
     /** Optional transform applied to the control's value before it is emitted in the change event. */
     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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start. */
+    readonly luzmoOptionInteractionEnd: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
+    /** With `live-interactions`: the pointer was cancelled and the slider reverted to its start value. */
+    readonly luzmoOptionInteractionCancel: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionInteractionEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -40,7 +48,8 @@ export declare class LuzmoItemOptionSlider implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionSlider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionSlider, "luzmo-item-option-slider", ["luzmoItemOptionSlider"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionSlider, "luzmo-item-option-slider", ["luzmoItemOptionSlider"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; "luzmoOptionInteractionCancel": "luzmoOptionInteractionCancel"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionSlider */
 export type LuzmoItemOptionSliderElement = LuzmoItemOptionSliderHostElement;