@luzmo/analytics-components-kit 1.3.0 → 2.0.0

package/README.md

@@ -15,7 +15,7 @@ ACK produces and edits chart configuration (type, slots, options, filters). It d
 ## Installation
 
 ```bash
-npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.6.1 @luzmo/icons@^1.0.1-alpha.49
+npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.7.1 @luzmo/icons@^1.0.1-alpha.49
 ```
 
 ACK uses Lucero 2 for its design-system primitives. Package managers that do not install peer dependencies automatically must install the compatible peer versions explicitly.
@@ -87,6 +87,12 @@ See the [ACK documentation](https://developer.luzmo.com/guide/ack--overview) for
 usage and API guidance. These exposed APIs follow semantic versioning. Internal
 helpers are not standalone public component subpaths.
 
+`luzmo-ai-chat` can render a saved Agent's choice questions. It declares them to
+the aiprompt API only when you opt in with `interactions: ['question']` in the
+`AiChatSession` config, because an API that predates `client_capabilities`
+rejects every request that carries it. Approval cards will follow in a later
+release.
+
 ### Data Fields
 
 Present the columns and formulas from a dataset so users can pick the data they want to visualize. Also includes components to display and edit Luzmo formula/column expressions (function syntax, e.g. `SUM({datasetId:columnId})`). Formula components accept datasets directly via `datasetsDataFields` or fetch them from the Luzmo API via `dataset-ids` (+ auth).
@@ -115,6 +121,8 @@ Let users assign data fields to chart slots (e.g. `x-axis`, `measure`, `legend`)
 
 Slot panels also surface inline calculations supplied through `slotsContents`. An aggregating ad-hoc measure uses `formula`; a non-aggregating derived dimension uses `expression`. Slots show compact **Formula** or **Expression** labels with matching icons; the **cog menu** shows the full read-only calculation under the same heading, with vertical scrolling after four rows. Override its size-dependent maximum width with `--luzmo-display-settings-calculation-max-width`. Clear the picker with its **X** action, or clear a drop target with its **trash** action, to return to column selection.
 
+Slot drops, pickers, and their panels accept `hasConnectedComparisonFilter` (default `false`) as runtime context. Update it when applicable comparison filters change, and supply full `slotsContents` plus `itemType` for comparison level limits. Emitted period comparisons, including event-only constraint proposals, contain only saved comparison settings and compact date-column references. Comparisons are supported for area, bar, combination, column and line charts, pivot tables and KPIs; chart categories using arrays, weekly levels or non-default datetime display modes are excluded.
+
 ### Item Options
 
 Let users adjust how a chart looks and behaves (colors, labels, chart mode, legend position, ...).
@@ -126,7 +134,7 @@ Let users adjust how a chart looks and behaves (colors, labels, chart mode, lege
 
 For an editor with undo, set `live-interactions` on `luzmo-item-option`, `luzmo-item-option-panel`, or `luzmo-interactive-viz-item`. You can also enable it directly on `luzmo-item-option-slider`, `luzmo-item-option-color-picker`, `luzmo-item-option-color-range`, and `luzmo-item-option-guidelines` (line colors). Drags and held keys then update live, without debounce. Gesture updates carry `interaction: { id }` on `luzmo-option-changed` for bare controls, `luzmo-options-changed` for item option/panel, and `luzmo-chart-changed` for interactive viz item.
 
-All these entry points emit or forward `luzmo-option-interaction-start` (detail `{ id }`) and `-end` / `-cancel` (detail `{ id, changed }`) so you can record one history entry per gesture. A press that changes nothing emits no lifecycle events. Events through item option/panel include `optionKey`; bare controls omit it. Interactive viz item forwards the lifecycle with `optionKey`, plus the original `chart` and `generation` context. Call `endInteraction()` on the control or enclosing item option, panel, or interactive viz item before removing or rebinding it: it synchronously ends open gestures while keeping their current values. Live interactions are off by default; the default keeps the debounced behavior. The gesture boundaries come from Lucero; ACK requires `@luzmo/lucero` `^2.6.1` (at least 2.6.1 and below 3.0.0).
+All these entry points emit or forward `luzmo-option-interaction-start` (detail `{ id }`) and `-end` / `-cancel` (detail `{ id, changed }`) so you can record one history entry per gesture. A press that changes nothing emits no lifecycle events. Events through item option/panel include `optionKey`; bare controls omit it. Interactive viz item forwards the lifecycle with `optionKey`, plus the original `chart` and `generation` context. Call `endInteraction()` on the control or enclosing item option, panel, or interactive viz item before removing or rebinding it: it synchronously ends open gestures while keeping their current values. Live interactions are off by default; the default keeps the debounced behavior. The gesture boundaries come from Lucero; ACK requires `@luzmo/lucero` `^2.7.1` (at least 2.7.1 and below 3.0.0).
 
 Individual option control editors are also exported for fully custom option UIs: `item-option-action-button-group`, `item-option-color-palette-picker`, `item-option-color-picker`, `item-option-color-range`, `item-option-guidelines`, `item-option-multi-language-field`, `item-option-number-field`, `item-option-picker`, `item-option-position-picker`, `item-option-positions-number-field`, `item-option-radio-button-group`, `item-option-slider`, `item-option-switch`, and `item-option-text-field`.
 
@@ -140,7 +148,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.
 
@@ -165,7 +173,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
 
@@ -347,7 +357,10 @@ import type {
   ItemFilterOutput,
   DashboardFilterOutput,
   ItemOptionsChangedEventDetail,
-  ItemOptionInteractionEventDetail
+  ItemOptionInteractionEventDetail,
+  ChatMessage,
+  ChatMessageQuestion,
+  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/ai-chat-empty-state.ts

@@ -1,7 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/ai-chat';
 import type { LuzmoAiChatEmptyState as LuzmoAiChatEmptyStateHostElement, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail } from '@luzmo/analytics-components-kit/ai-chat';
-export type { AgentStreamDefinition, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail, AiChatMessageSentEventDetail, AiChatRecognizedStepType, AiChatSessionBuildContext, AiChatSessionCallbacks, AiChatSessionConfig, AiChatSessionControllerOptions, AiChatSessionRestoreParams, AiChatSessionRestoreResult, AiChatSessionSeed, AiChatSessionState, AiChatSessionSubmitParams, AiChatStepBase, AiChatStepEvent, AiDictationCreateBody, AiDictationProperties, AiPromptCreateBody, AiPromptDeleteBody, AssistantMessageAction, AssistantMessageActionConfirmVariant, AssistantMessageActionEventDetail, AssistantMessageFeedbackEventDetail, AssistantMessageFeedbackRating, BuildAiDictationRequestOptions, ChatMessageElicitation, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail, ProgressTreeNode, PromptBoxAttachment, PromptBoxFileIcons, RecognizedStepEvent, StreamAiDictationOptions, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState, StreamingRequestOptions, StreamingResponse, UnknownStepEvent, UploadAiPromptImagesOptions } from '@luzmo/analytics-components-kit/ai-chat';
+export type { AgentStreamDefinition, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail, AiChatMessageSentEventDetail, AiChatRecognizedStepType, AiChatSessionBuildContext, AiChatSessionCallbacks, AiChatSessionConfig, AiChatSessionControllerOptions, AiChatSessionRestoreParams, AiChatSessionRestoreResult, AiChatSessionSeed, AiChatSessionState, AiChatSessionSubmitParams, AiChatStepBase, AiChatStepEvent, AiDictationCreateBody, AiDictationProperties, AiPromptCreateBody, AiPromptDeleteBody, AssistantMessageAction, AssistantMessageActionConfirmVariant, AssistantMessageActionEventDetail, AssistantMessageFeedbackEventDetail, AssistantMessageFeedbackRating, BuildAiDictationRequestOptions, ChatChoiceOption, ChatChoiceQuestion, ChatMessageElicitation, ChatMessageQuestion, ChatQuestionAnswers, ChatQuestionResponse, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail, ProgressTreeNode, PromptBoxAttachment, PromptBoxFileIcons, RecognizedStepEvent, StreamAiDictationOptions, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState, StreamingRequestOptions, StreamingResponse, UnknownStepEvent, UploadAiPromptImagesOptions } from '@luzmo/analytics-components-kit/ai-chat';
 
 @Component({
   selector: 'luzmo-ai-chat-empty-state',

package/angular/components/ai-chat.ts

@@ -1,8 +1,8 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/ai-chat';
 import type { LuzmoAiChat as LuzmoAiChatHostElement, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatMessageSentEventDetail, AiChatSession, AiChatStepEvent, AssistantMessageActionEventDetail, AssistantMessageFeedbackEventDetail } from '@luzmo/analytics-components-kit/ai-chat';
-export type { AgentStreamDefinition, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail, AiChatMessageSentEventDetail, AiChatRecognizedStepType, AiChatSessionBuildContext, AiChatSessionCallbacks, AiChatSessionConfig, AiChatSessionControllerOptions, AiChatSessionRestoreParams, AiChatSessionRestoreResult, AiChatSessionSeed, AiChatSessionState, AiChatSessionSubmitParams, AiChatStepBase, AiChatStepEvent, AiDictationCreateBody, AiDictationProperties, AiPromptCreateBody, AiPromptDeleteBody, AssistantMessageAction, AssistantMessageActionConfirmVariant, AssistantMessageActionEventDetail, AssistantMessageFeedbackEventDetail, AssistantMessageFeedbackRating, BuildAiDictationRequestOptions, ChatMessageElicitation, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail, ProgressTreeNode, PromptBoxAttachment, PromptBoxFileIcons, RecognizedStepEvent, StreamAiDictationOptions, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState, StreamingRequestOptions, StreamingResponse, UnknownStepEvent, UploadAiPromptImagesOptions } from '@luzmo/analytics-components-kit/ai-chat';
-import type { AiPromptAgent, AiPromptCustomItemInput, AiPromptItemTask, AiPromptScreenMode, DashboardStatePayload } from '@luzmo/analytics-components-kit/ai-chat';
+export type { AgentStreamDefinition, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail, AiChatMessageSentEventDetail, AiChatRecognizedStepType, AiChatSessionBuildContext, AiChatSessionCallbacks, AiChatSessionConfig, AiChatSessionControllerOptions, AiChatSessionRestoreParams, AiChatSessionRestoreResult, AiChatSessionSeed, AiChatSessionState, AiChatSessionSubmitParams, AiChatStepBase, AiChatStepEvent, AiDictationCreateBody, AiDictationProperties, AiPromptCreateBody, AiPromptDeleteBody, AssistantMessageAction, AssistantMessageActionConfirmVariant, AssistantMessageActionEventDetail, AssistantMessageFeedbackEventDetail, AssistantMessageFeedbackRating, BuildAiDictationRequestOptions, ChatChoiceOption, ChatChoiceQuestion, ChatMessageElicitation, ChatMessageQuestion, ChatQuestionAnswers, ChatQuestionResponse, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail, ProgressTreeNode, PromptBoxAttachment, PromptBoxFileIcons, RecognizedStepEvent, StreamAiDictationOptions, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState, StreamingRequestOptions, StreamingResponse, UnknownStepEvent, UploadAiPromptImagesOptions } from '@luzmo/analytics-components-kit/ai-chat';
+import type { AiChatInteraction, AiPromptAgent, AiPromptCustomItemInput, AiPromptItemTask, AiPromptScreenMode, DashboardStatePayload } from '@luzmo/analytics-components-kit/ai-chat';
 import type { ChatMessage, Dataset, LuzmoChart } from '@luzmo/analytics-components-kit/types';
 
 @Component({
@@ -143,6 +143,10 @@ export class LuzmoAiChat implements OnChanges {
   @Input({ alias: 'modelPreference' })
   modelPreference?: 'performance' | 'quality';
 
+  /** Boxes the agent may show, declared on every request as `client_capabilities`. Defaults to none. Pass `['question']` once the aiprompt API accepts `client_capabilities`. Ignored with a host `chatSession`. */
+  @Input({ alias: 'interactions' })
+  interactions?: AiChatInteraction[];
+
   /** Host-owned AiChatSession. The component subscribes and renders; does not abort on disconnect. */
   @Input({ alias: 'chatSession' })
   chatSession?: AiChatSession | null;
@@ -217,7 +221,7 @@ export class LuzmoAiChat implements OnChanges {
   /** Fired when the selected datasets change */
   readonly luzmoDatasetsChanged = output<CustomEvent<AiChatDatasetsChangedEventDetail>>({ alias: 'luzmoDatasetsChanged' });
 
-  /** Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow. */
+  /** Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, question, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow. */
   readonly luzmoStep = output<CustomEvent<AiChatStepEvent>>({ alias: 'luzmoStep' });
 
   /** Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`. */
@@ -334,6 +338,9 @@ export class LuzmoAiChat implements OnChanges {
         case 'modelPreference':
           this.setHostProperty('modelPreference', changes['modelPreference'].currentValue);
           break;
+        case 'interactions':
+          this.setHostProperty('interactions', changes['interactions'].currentValue);
+          break;
         case 'chatSession':
           this.setHostProperty('chatSession', changes['chatSession'].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/display-settings-period-over-period.ts

@@ -3,7 +3,7 @@ import '@luzmo/analytics-components-kit/display-settings-period-over-period';
 import type { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
 export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
 import type { PeriodOverPeriodCondition } from '@luzmo/analytics-components-kit/types';
-import type { Column } from '@luzmo/dashboard-contents-types';
+import type { Column, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
 
 @Component({
   selector: 'luzmo-display-settings-period-over-period',
@@ -27,19 +27,31 @@ export class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
     return this.host;
   }
 
+  /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+  @Input({ alias: 'slotsContents' })
+  slotsContents?: VizItemSlot[];
+
+  /** Visualization type used to interpret comparison slot context. */
+  @Input({ alias: 'itemType' })
+  itemType?: VizItemType;
+
+  /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+  @Input({ alias: 'hasConnectedComparisonFilter', transform: booleanAttribute })
+  hasConnectedComparisonFilter?: boolean;
+
   /** The slotContent that is passed to the settings */
   @Input({ alias: 'slotContent' })
   slotContent?: any;
 
-  /** Which period-over-period UI variant to render, based on available datetime columns and comparison filters. */
+  /** Optional UI variant supplied by a parent. When absent, derive it from runtime slot and filter context. */
   @Input({ alias: 'periodOverPeriodType' })
   periodOverPeriodUiType?: PeriodOverPeriodCondition;
 
-  /** Offer the "Periods" offset when there is no datetime category (an offset date column is needed). The item then shifts by the length of the period selected by its date filters. */
+  /** Offer the "Periods" offset when there is no datetime category (an offset date column is needed). The item then shifts by the length of the period selected by its date filters. Defaults to true for KPIs, false otherwise. */
   @Input({ alias: 'allowPeriodsWithoutDatetimeColumn', transform: booleanAttribute })
   allowPeriodsWithoutDatetimeColumn?: boolean;
 
-  /** Hide the "Past value" comparison type, e.g. for items that only show the change. */
+  /** Hide the "Past value" comparison type. Defaults to true for KPIs, false otherwise; explicit booleans override the default. */
   @Input({ alias: 'hidePastValue', transform: booleanAttribute })
   hidePastValue?: boolean;
 
@@ -70,6 +82,15 @@ export class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
+        case 'slotsContents':
+          this.setHostProperty('slotsContents', changes['slotsContents'].currentValue);
+          break;
+        case 'itemType':
+          this.setHostProperty('itemType', changes['itemType'].currentValue);
+          break;
+        case 'hasConnectedComparisonFilter':
+          this.setHostProperty('hasConnectedComparisonFilter', changes['hasConnectedComparisonFilter'].currentValue);
+          break;
         case 'slotContent':
           this.setHostProperty('slotContent', changes['slotContent'].currentValue);
           break;

package/angular/components/display-settings.ts

@@ -5,7 +5,7 @@ export type { DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotCo
 import type { DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
 import type { MeasureColumnsItem } from '@luzmo/analytics-components-kit/slot-menu';
 import type { PeriodOverPeriodCondition, SlotContent } from '@luzmo/analytics-components-kit/types';
-import type { SlotName } from '@luzmo/dashboard-contents-types';
+import type { SlotName, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
 
 @Component({
   selector: 'luzmo-display-settings',
@@ -29,6 +29,18 @@ export class LuzmoDisplaySettings implements OnChanges {
     return this.host;
   }
 
+  /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+  @Input({ alias: 'slotsContents' })
+  slotsContents?: VizItemSlot[];
+
+  /** Visualization type used to interpret comparison slot context. */
+  @Input({ alias: 'itemType' })
+  itemType?: VizItemType;
+
+  /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+  @Input({ alias: 'hasConnectedComparisonFilter', transform: booleanAttribute })
+  hasConnectedComparisonFilter?: boolean;
+
   /** The language of the settings interface */
   @Input({ alias: 'language' })
   language?: string;
@@ -61,7 +73,7 @@ export class LuzmoDisplaySettings implements OnChanges {
   @Input({ alias: 'isCumulativeSumEnabled', transform: booleanAttribute })
   isCumulativeSumEnabled?: boolean;
 
-  /** Whether to show the period-over-period in numeric */
+  /** Optional comparison UI override for standalone use; null hides comparisons. Otherwise derived from slotsContents, itemType, filters, and datasetsDataFields. */
   @Input({ alias: 'periodOverPeriodUiType' })
   periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
 
@@ -81,7 +93,7 @@ export class LuzmoDisplaySettings implements OnChanges {
   @Input({ alias: 'slotContent' })
   slotContent?: SlotContent;
 
-  /** Datasets used to resolve column names in ad-hoc calculation previews. */
+  /** Datasets used for calculation previews and standalone comparison offset date choices (columns or dataFields). */
   @Input({ alias: 'datasetsDataFields' })
   datasetsDataFields?: DatasetDataFields[];
 
@@ -126,6 +138,15 @@ export class LuzmoDisplaySettings implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
+        case 'slotsContents':
+          this.setHostProperty('slotsContents', changes['slotsContents'].currentValue);
+          break;
+        case 'itemType':
+          this.setHostProperty('itemType', changes['itemType'].currentValue);
+          break;
+        case 'hasConnectedComparisonFilter':
+          this.setHostProperty('hasConnectedComparisonFilter', changes['hasConnectedComparisonFilter'].currentValue);
+          break;
         case 'language':
           this.setHostProperty('language', changes['language'].currentValue);
           break;

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';
+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,18 +35,6 @@ 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, 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;
       }