@luzmo/analytics-components-kit 1.2.1 → 1.4.0

package/README.md

@@ -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.
@@ -138,7 +140,7 @@ Individual option control editors are also exported for fully custom option UIs:
 
 `<luzmo-filters>` defaults to the standard Luzmo filter format (`ItemFilterGroup[]` from `@luzmo/dashboard-contents-types`). Narrow `luzmo-filters-changed` on `event.detail.format` before forwarding: canonical groups are compatible with `luzmo-embed-viz-item`'s `filters` property and `luzmo-item-grid` items' `filters`; clean groups are for aligned hosts that accept `ItemFilterOutput` / `DashboardFilterOutput`. Group `condition` values are lowercase `and` / `or`. The published `FilterGroup` editor type uses the same casing, so typed consumers must migrate uppercase literals to `and` / `or`. At runtime uppercase `AND` / `OR` input is still accepted and normalized to lowercase on output.
 
-`filters` accepts both halves of the public `ItemFilterOutput` / `DashboardFilterOutput` unions, so the result of an aligned `getFilters()` can be passed straight back in: canonical `ItemFilterGroup[]`, or clean clause groups that own a top-level `clause`, nest inline, and flatten each leaf onto its reference (including dashboard retrieval envelopes). Output stays canonical unless you set `format="clean"`, and `event.detail.format` names the half you received. A tree that cannot be represented cleanly — mixed `where`/`having` under `or`, a missing reference or value, an `in` / `not in` expression whose value is not an array, or a `between` expression whose range does not contain exactly two values — falls back to canonical output. A leaf that mixes encodings, or that matches neither a complete clean nor a complete canonical encoding, is rejected and the previous `filters` value is kept. Typed consumers of `FiltersChangedEventDetail` must narrow on `format` to keep `filters` as `ItemFilterGroup[]`. `transformFilters`, `reverseTransformFilters`, and `detectFiltersFormat` are exported from `@luzmo/analytics-components-kit/filters` for hosts that convert outside the editor. New groups and leaves receive a UUID (`id` on the group, `properties.id` on the leaf) that is kept on later edits. A newly chosen formula field defaults to `properties.type: 'having'`; an explicit `where` on a formula leaf is kept.
+`filters` accepts both halves of the public `ItemFilterOutput` / `DashboardFilterOutput` unions, so the result of an aligned `getFilters()` can be passed straight back in: canonical `ItemFilterGroup[]`, or clean clause groups that own a top-level `clause`, nest inline, and flatten each leaf onto its reference (including dashboard retrieval envelopes). Output stays canonical unless you set `format="clean"`, and `event.detail.format` names the half you received. A tree that cannot be represented cleanly — mixed `where`/`having` under `or`, a missing reference or value, an `in` / `not in` expression whose value is not an array, or a `between` expression whose range does not contain exactly two values — falls back to canonical output. A leaf that mixes encodings, or that matches neither a complete clean nor a complete canonical encoding, is rejected and the previous `filters` value is kept. Typed consumers of `FiltersChangedEventDetail` must narrow on `format` to keep `filters` as `ItemFilterGroup[]`. `transformFilters`, `reverseTransformFilters`, and `detectFiltersFormat` are exported from `@luzmo/analytics-components-kit/filters` for hosts that convert outside the editor. New groups and leaves receive a UUID (`id` on the group, `properties.id` on the leaf) that is kept on later edits. A newly chosen formula field defaults to `properties.type: 'having'`; an explicit `where` on a formula leaf is kept. A canonical leaf whose reference operands use the deprecated `dataset_id`, `column_id` or `formula_id` keys is read as `datasetId`, `columnId` or `formulaId` on every operand (both sides of a field-to-field comparison too), and an edit emits the camelCase keys.
 
 Named parameter-backed values are opt-in with `allow-parameters`. Supply the initial definitions through the `parameters` property. A parameter created in the editor is appended to `parameters` and announced with `luzmo-parameter-created`, so handle that event to persist it; creating does not apply it to a filter, since the user attaches it by picking it from the list. Listen for `luzmo-parameter-removed` when a definition is detached from one filter. Detaching does not delete the definition. The exported `FilterParameter`, `FilterParameterType`, and `FilterParameterEventDetail` types describe this API.
 
@@ -163,7 +165,9 @@ luzmo-filters {
 | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
 | Item Grid | `@luzmo/analytics-components-kit/item-grid` | Interactive grid to arrange, resize, and manage multiple charts (renders internally) | [Docs](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-item-grid) |
 
-To render a single chart, use `luzmo-embed-viz-item` from `@luzmo/embed` (not part of this kit); see [Rendering](#rendering).
+`luzmo-interactive-viz-item` (`@luzmo/analytics-components-kit/interactive-viz-item`) renders one chart with inline actions, a feedback bar and a config panel, for example as an AI chat answer. `chartRenderOptions` (property only) is merged into the embedded chart's options for display settings and is never emitted nor saved. In the config panel, `hide-config-options` hides the options tab, and `slot-selects` (`multiple` by default, or `single`) and `slot-grows` are passed to the slot picker panel as `selects` and `grows`. `slotsConfiguration`, `customOptionsConfiguration` and `customTranslations` (property only) pass the configs of a chart type ACK has no definition for, such as a custom chart, to the config panel. `export(type)` takes a `VizItemExportType` and forwards to the embedded chart's export, waiting for the embedded renderer when it has not loaded yet. It resolves without a value when there is no chart, when the embed fails, or when the chart is cleared or the element removed first. CSS parts: `container`, `actions-bar`, `actions`, `chart-container`, `footer`, `config-panel`.
+
+To render a bare chart without these, use `luzmo-embed-viz-item` from `@luzmo/embed` (not part of this kit); see [Rendering](#rendering).
 
 ## Usage: Drag & Drop Data Flow
 
@@ -345,7 +349,8 @@ import type {
   ItemFilterOutput,
   DashboardFilterOutput,
   ItemOptionsChangedEventDetail,
-  ItemOptionInteractionEventDetail
+  ItemOptionInteractionEventDetail,
+  VizItemExportType
 } from '@luzmo/analytics-components-kit/types';
 ```
 

package/angular/components/add-to-dashboard.ts

@@ -1,6 +1,6 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/add-to-dashboard';
-import type { LuzmoAddToDashboard as LuzmoAddToDashboardHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail } from '@luzmo/analytics-components-kit/add-to-dashboard';
+import type { LuzmoAddToDashboard as LuzmoAddToDashboardHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, DashboardActions, FlexChartConfig } from '@luzmo/analytics-components-kit/add-to-dashboard';
 export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, AddToDashboardSettings, BuiltInDashboardActionsConfig, DashboardActionCallOptions, DashboardActions, DashboardListPage, DashboardListRequest, DashboardOption, FlexChartConfig } from '@luzmo/analytics-components-kit/add-to-dashboard';
 import type { Placement } from '@luzmo/lucero';
 
@@ -26,9 +26,13 @@ export class LuzmoAddToDashboard implements OnChanges {
     return this.host;
   }
 
-  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
-  @Input({ alias: 'language' })
-  language?: string;
+  /** Chart to save; `options.theme` is removed before it reaches the adapter. */
+  @Input({ alias: 'chart' })
+  chart?: FlexChartConfig | null;
+
+  /** Host data operations. When unset, the built-in adapter on the auth properties is used. */
+  @Input({ alias: 'dashboardActions' })
+  dashboardActions?: DashboardActions | null;
 
   /** Auth key for the built-in adapter. */
   @Input({ alias: 'authKey' })
@@ -50,6 +54,10 @@ export class LuzmoAddToDashboard implements OnChanges {
   @Input({ alias: 'disabled', transform: booleanAttribute })
   disabled?: boolean;
 
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
   /** The size of the element */
   @Input({ alias: 'size' })
   size?: 's' | 'm' | 'l' | 'xl';
@@ -72,8 +80,11 @@ export class LuzmoAddToDashboard implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
+        case 'chart':
+          this.setHostProperty('chart', changes['chart'].currentValue);
+          break;
+        case 'dashboardActions':
+          this.setHostProperty('dashboardActions', changes['dashboardActions'].currentValue);
           break;
         case 'authKey':
           this.setHostProperty('authKey', changes['authKey'].currentValue);
@@ -90,6 +101,9 @@ export class LuzmoAddToDashboard implements OnChanges {
         case 'disabled':
           this.setHostProperty('disabled', changes['disabled'].currentValue);
           break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
         case 'size':
           this.setHostProperty('size', changes['size'].currentValue);
           break;

package/angular/components/data-fields-select.ts

@@ -220,6 +220,11 @@ export class LuzmoDataFieldsSelect implements OnChanges {
       })
     );
   }
+
+  /** Focuses the select trigger. */
+  focus(options?: FocusOptions): void {
+    return (this.host as LuzmoDataFieldsSelectHostElement).focus(options);
+  }
 }
 
 /** The underlying custom element type for LuzmoDataFieldsSelect */

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

@@ -1,7 +1,8 @@
 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, InteractiveVizItemInteractionEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
-export type { AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, DashboardActions, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, DashboardActions, 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 { OptionsConfig, SlotConfig, TranslationOverrides, TranslationsFile, VizItemExportType } from '@luzmo/dashboard-contents-types';
 import type { LuzmoEmbedVizItem } from '@luzmo/embed';
 
 @Component({
@@ -16,7 +17,10 @@ import type { LuzmoEmbedVizItem } from '@luzmo/embed';
  *
  * @slot chart-actions-extra - Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).
  * @csspart container - The viz item container.
+ * @csspart actions-bar - The bar above the chart holding the inline actions, the `chart-actions-extra` slot and add to dashboard.
+ * @csspart actions - The inline chart actions (ranking, display mode) inside the actions bar.
  * @csspart chart-container - The embedded chart wrapper.
+ * @csspart footer - The row below the chart holding the feedback buttons and the config-panel toggle.
  * @csspart config-panel - The expandable configuration panel.
  */
 export class LuzmoInteractiveVizItem implements OnChanges {
@@ -31,19 +35,7 @@ export class LuzmoInteractiveVizItem implements OnChanges {
     return this.host;
   }
 
-  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
-  @Input({ alias: 'language' })
-  language?: string;
-
-  /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
-  @Input({ alias: 'addToDashboard', transform: booleanAttribute })
-  addToDashboard?: boolean;
-
-  /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
-  @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;
 
@@ -87,14 +79,58 @@ export class LuzmoInteractiveVizItem implements OnChanges {
   @Input({ alias: 'hideConfigPanel', transform: booleanAttribute })
   hideConfigPanel?: boolean;
 
+  /** When present, hides the options tab of the config panel and keeps the data tab. */
+  @Input({ alias: 'hideConfigOptions', transform: booleanAttribute })
+  hideConfigOptions?: boolean;
+
+  /** Whether each slot in the config panel takes one field or several, forwarded to `luzmo-item-slot-picker-panel` as `selects`. */
+  @Input({ alias: 'slotSelects' })
+  slotSelects?: 'single' | 'multiple';
+
+  /** When present, the slot pickers in the config panel grow to full width, forwarded as `grows`. */
+  @Input({ alias: 'slotGrows', transform: booleanAttribute })
+  slotGrows?: boolean;
+
+  /** Slots configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+  @Input({ alias: 'slotsConfiguration' })
+  slotsConfiguration?: SlotConfig[] | null;
+
+  /** Options configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+  @Input({ alias: 'customOptionsConfiguration' })
+  customOptionsConfiguration?: OptionsConfig | null;
+
+  /** Option label translations that go with `customOptionsConfiguration`. */
+  @Input({ alias: 'customTranslations' })
+  customTranslations?: TranslationOverrides | TranslationsFile | null;
+
+  /** Options applied to the embedded chart only, merged one level deep over `chart.options` (e.g. `{ display: { title: false } }`). They are never emitted in chart events nor saved by add to dashboard. */
+  @Input({ alias: 'chartRenderOptions' })
+  chartRenderOptions?: FlexChartConfig['options'] | null;
+
+  /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
+  @Input({ alias: 'addToDashboard', transform: booleanAttribute })
+  addToDashboard?: boolean;
+
+  /** Host data operations for add to dashboard. When unset, the built-in adapter on the auth properties is used. */
+  @Input({ alias: 'dashboardActions' })
+  dashboardActions?: DashboardActions | null;
+
   /** When present, chart changes are only emitted and the host sets `chart`; otherwise they are applied here and still emitted. */
   @Input({ alias: 'controlled', transform: booleanAttribute })
   controlled?: boolean;
 
+  /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
+  @Input({ alias: 'canFilter' })
+  canFilter?: LuzmoEmbedVizItem['canFilter'];
+
   /** 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 language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
   /** The size of the element */
   @Input({ alias: 'size' })
   size?: 's' | 'm' | 'l' | 'xl';
@@ -135,15 +171,6 @@ export class LuzmoInteractiveVizItem implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
-          break;
-        case 'addToDashboard':
-          this.setHostProperty('addToDashboard', changes['addToDashboard'].currentValue);
-          break;
-        case 'canFilter':
-          this.setHostProperty('canFilter', changes['canFilter'].currentValue);
-          break;
         case 'chart':
           this.setHostProperty('chart', changes['chart'].currentValue);
           break;
@@ -177,12 +204,45 @@ export class LuzmoInteractiveVizItem implements OnChanges {
         case 'hideConfigPanel':
           this.setHostProperty('hideConfigPanel', changes['hideConfigPanel'].currentValue);
           break;
+        case 'hideConfigOptions':
+          this.setHostProperty('hideConfigOptions', changes['hideConfigOptions'].currentValue);
+          break;
+        case 'slotSelects':
+          this.setHostProperty('slotSelects', changes['slotSelects'].currentValue);
+          break;
+        case 'slotGrows':
+          this.setHostProperty('slotGrows', changes['slotGrows'].currentValue);
+          break;
+        case 'slotsConfiguration':
+          this.setHostProperty('slotsConfiguration', changes['slotsConfiguration'].currentValue);
+          break;
+        case 'customOptionsConfiguration':
+          this.setHostProperty('customOptionsConfiguration', changes['customOptionsConfiguration'].currentValue);
+          break;
+        case 'customTranslations':
+          this.setHostProperty('customTranslations', changes['customTranslations'].currentValue);
+          break;
+        case 'chartRenderOptions':
+          this.setHostProperty('chartRenderOptions', changes['chartRenderOptions'].currentValue);
+          break;
+        case 'addToDashboard':
+          this.setHostProperty('addToDashboard', changes['addToDashboard'].currentValue);
+          break;
+        case 'dashboardActions':
+          this.setHostProperty('dashboardActions', changes['dashboardActions'].currentValue);
+          break;
         case 'controlled':
           this.setHostProperty('controlled', changes['controlled'].currentValue);
           break;
+        case 'canFilter':
+          this.setHostProperty('canFilter', changes['canFilter'].currentValue);
+          break;
         case 'liveInteractions':
           this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
           break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
         case 'size':
           this.setHostProperty('size', changes['size'].currentValue);
           break;
@@ -259,6 +319,11 @@ export class LuzmoInteractiveVizItem implements OnChanges {
       })
     );
   }
+
+  /** Exports the embedded chart, forwarded to its `export(type)`. Waits for the embedded renderer when it has not loaded yet. Resolves without a value when there is no chart, when the embed fails, or when the chart is cleared or the element removed before the renderer loaded. */
+  export(type?: VizItemExportType): Promise<string | void> {
+    return (this.host as LuzmoInteractiveVizItemHostElement).export(type);
+  }
 }
 
 /** The underlying custom element type for LuzmoInteractiveVizItem */

package/angular/components/item-grid-item-actions-menu.ts

@@ -117,6 +117,11 @@ export class LuzmoItemGridItemActionsMenu implements OnChanges {
       })
     );
   }
+
+  /** Focuses the first toggle action, or the first available action. */
+  focus(): void {
+    return (this.host as LuzmoItemGridItemActionsMenuHostElement).focus();
+  }
 }
 
 /** The underlying custom element type for LuzmoItemGridItemActionsMenu */

package/angular/components/item-grid.ts

@@ -107,6 +107,10 @@ export class LuzmoItemGrid implements OnChanges {
   @Input({ alias: 'initialItemStates' })
   initialItemStates?: ItemStates;
 
+  /** Renders an item whose type has no renderer registered with `registerRenderer`. */
+  @Input({ alias: 'defaultRenderer' })
+  defaultRenderer?: GridItemRenderer;
+
   /** Fired when an item action is performed */
   readonly luzmoItemGridItemAction = output<CustomEvent<GridItemActionEventDetail>>({ alias: 'luzmoItemGridItemAction' });
 
@@ -194,6 +198,9 @@ export class LuzmoItemGrid implements OnChanges {
         case 'initialItemStates':
           this.setHostProperty('initialItemStates', changes['initialItemStates'].currentValue);
           break;
+        case 'defaultRenderer':
+          this.setHostProperty('defaultRenderer', changes['defaultRenderer'].currentValue);
+          break;
         default:
           break;
       }

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

@@ -26,6 +26,18 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
     return this.host;
   }
 
+  /** The current color value. */
+  @Input({ alias: 'value' })
+  value?: string;
+
+  /** Whether the control is disabled (non-interactive). */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** Disables the alpha (opacity) channel in the color picker. */
+  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
+  noAlphaChannel?: boolean;
+
   /** Preset colors offered as quick-pick swatches. */
   @Input({ alias: 'swatches' })
   swatches?: string[];
@@ -38,6 +50,10 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
   @Input({ alias: 'shape' })
   shape?: 'circle' | 'rectangle';
 
+  /** Placement of the color picker dropdown relative to its trigger. */
+  @Input({ alias: 'placement' })
+  placement?: Placement;
+
   /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
   @Input({ alias: 'debounce' })
   debounce?: number;
@@ -50,22 +66,6 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
   @Input({ alias: 'debounceTimeout' })
   debounceTimeout?: any;
 
-  /** The current color value. */
-  @Input({ alias: 'value' })
-  value?: string;
-
-  /** Whether the control is disabled (non-interactive). */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Disables the alpha (opacity) channel in the color picker. */
-  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
-  noAlphaChannel?: boolean;
-
-  /** Placement of the color picker dropdown relative to its trigger. */
-  @Input({ alias: 'placement' })
-  placement?: Placement;
-
   /** 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' });
 
@@ -87,6 +87,15 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
+        case 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'noAlphaChannel':
+          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
+          break;
         case 'swatches':
           this.setHostProperty('swatches', changes['swatches'].currentValue);
           break;
@@ -96,6 +105,9 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
         case 'shape':
           this.setHostProperty('shape', changes['shape'].currentValue);
           break;
+        case 'placement':
+          this.setHostProperty('placement', changes['placement'].currentValue);
+          break;
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
@@ -105,18 +117,6 @@ export class LuzmoItemOptionColorPicker implements OnChanges {
         case 'debounceTimeout':
           this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
           break;
-        case 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'noAlphaChannel':
-          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
-          break;
-        case 'placement':
-          this.setHostProperty('placement', changes['placement'].currentValue);
-          break;
         default:
           break;
       }

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

@@ -1,6 +1,6 @@
 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, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, Guidelines, 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({
@@ -25,6 +25,18 @@ export class LuzmoItemOptionGuidelines implements OnChanges {
     return this.host;
   }
 
+  /** The current guidelines value (`lines` plus shared `style`). */
+  @Input({ alias: 'value' })
+  value?: Guidelines;
+
+  /** Allowed guideline calculation types for this chart (from the option config enum). */
+  @Input({ alias: 'lineTypes' })
+  lineTypes?: string[];
+
+  /** Display labels for guideline types (key → label). Missing keys fall back to built-in copy. */
+  @Input({ alias: 'lineTypeLabels' })
+  lineTypeLabels?: Record<string, string>;
+
   /** Default color used when adding a guideline. */
   @Input({ alias: 'defaultColor' })
   defaultColor?: string;
@@ -58,6 +70,15 @@ export class LuzmoItemOptionGuidelines implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
+        case 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'lineTypes':
+          this.setHostProperty('lineTypes', changes['lineTypes'].currentValue);
+          break;
+        case 'lineTypeLabels':
+          this.setHostProperty('lineTypeLabels', changes['lineTypeLabels'].currentValue);
+          break;
         case 'defaultColor':
           this.setHostProperty('defaultColor', changes['defaultColor'].currentValue);
           break;

package/angular/components/item-option-multi-language-field.ts

@@ -25,10 +25,6 @@ export class LuzmoItemOptionMultiLanguageField implements OnChanges {
     return this.host;
   }
 
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
   /** The current value per language (language code → text). */
   @Input({ alias: 'value' })
   value?: Record<string, string>;
@@ -61,6 +57,10 @@ export class LuzmoItemOptionMultiLanguageField implements OnChanges {
   @Input({ alias: 'debounce' })
   debounce?: number;
 
+  /** Internal timer handle used to debounce change events. */
+  @Input({ alias: 'debounceTimeout' })
+  debounceTimeout?: any;
+
   /** Emitted when the option value changes. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
@@ -76,9 +76,6 @@ export class LuzmoItemOptionMultiLanguageField implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'debounceTimeout':
-          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-          break;
         case 'value':
           this.setHostProperty('value', changes['value'].currentValue);
           break;
@@ -103,6 +100,9 @@ export class LuzmoItemOptionMultiLanguageField implements OnChanges {
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
+        case 'debounceTimeout':
+          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+          break;
         default:
           break;
       }

package/angular/components/item-option-number-field.ts

@@ -25,14 +25,6 @@ export class LuzmoItemOptionNumberField implements OnChanges {
     return this.host;
   }
 
-  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
-  @Input({ alias: 'debounce' })
-  debounce?: number;
-
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
   /** Whether the control is disabled (non-interactive). */
   @Input({ alias: 'disabled', transform: booleanAttribute })
   disabled?: boolean;
@@ -69,6 +61,10 @@ export class LuzmoItemOptionNumberField implements OnChanges {
   @Input({ alias: 'unit', transform: booleanAttribute })
   unit?: boolean;
 
+  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+  @Input({ alias: 'debounce' })
+  debounce?: number;
+
   /** Optional transform applied to the stored value before it is displayed in the control. */
   @Input({ alias: 'parseValue' })
   parseValue?: unknown;
@@ -77,6 +73,10 @@ export class LuzmoItemOptionNumberField implements OnChanges {
   @Input({ alias: 'toValue' })
   toValue?: unknown;
 
+  /** Internal timer handle used to debounce change events. */
+  @Input({ alias: 'debounceTimeout' })
+  debounceTimeout?: any;
+
   /** Emitted when the option value changes. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
@@ -92,12 +92,6 @@ export class LuzmoItemOptionNumberField implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'debounce':
-          this.setHostProperty('debounce', changes['debounce'].currentValue);
-          break;
-        case 'debounceTimeout':
-          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-          break;
         case 'disabled':
           this.setHostProperty('disabled', changes['disabled'].currentValue);
           break;
@@ -125,12 +119,18 @@ export class LuzmoItemOptionNumberField implements OnChanges {
         case 'unit':
           this.setHostProperty('unit', changes['unit'].currentValue);
           break;
+        case 'debounce':
+          this.setHostProperty('debounce', changes['debounce'].currentValue);
+          break;
         case 'parseValue':
           this.setHostProperty('parseValue', changes['parseValue'].currentValue);
           break;
         case 'toValue':
           this.setHostProperty('toValue', changes['toValue'].currentValue);
           break;
+        case 'debounceTimeout':
+          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+          break;
         default:
           break;
       }

package/angular/components/item-option-positions-number-field.ts

@@ -25,14 +25,6 @@ export class LuzmoItemOptionPositionsNumberField implements OnChanges {
     return this.host;
   }
 
-  /** The value applied to all positions when sync is enabled. */
-  @Input({ alias: 'syncedValue' })
-  syncedValue?: number;
-
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
   /** Which positions to render input fields for (e.g. top/right/bottom/left, or corners and center). */
   @Input({ alias: 'positions' })
   positions?: ('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center')[];
@@ -65,6 +57,14 @@ export class LuzmoItemOptionPositionsNumberField implements OnChanges {
   @Input({ alias: 'sync', transform: booleanAttribute })
   sync?: boolean;
 
+  /** The value applied to all positions when sync is enabled. */
+  @Input({ alias: 'syncedValue' })
+  syncedValue?: number;
+
+  /** Internal timer handle used to debounce change events. */
+  @Input({ alias: 'debounceTimeout' })
+  debounceTimeout?: any;
+
   /** Emitted when the option value changes. */
   readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
 
@@ -80,12 +80,6 @@ export class LuzmoItemOptionPositionsNumberField implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'syncedValue':
-          this.setHostProperty('syncedValue', changes['syncedValue'].currentValue);
-          break;
-        case 'debounceTimeout':
-          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-          break;
         case 'positions':
           this.setHostProperty('positions', changes['positions'].currentValue);
           break;
@@ -110,6 +104,12 @@ export class LuzmoItemOptionPositionsNumberField implements OnChanges {
         case 'sync':
           this.setHostProperty('sync', changes['sync'].currentValue);
           break;
+        case 'syncedValue':
+          this.setHostProperty('syncedValue', changes['syncedValue'].currentValue);
+          break;
+        case 'debounceTimeout':
+          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+          break;
         default:
           break;
       }