@luzmo/analytics-components-kit 1.3.0 → 2.0.0

package/angular/esm/components/ai-chat.d.ts

@@ -1,10 +1,10 @@
 import { OnChanges, 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';
-import type { AiPromptAgent, AiPromptCustomItemInput, AiPromptItemTask, AiPromptScreenMode, DashboardStatePayload } 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';
 import * as i0 from "@angular/core";
-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';
 export declare class LuzmoAiChat implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -71,6 +71,8 @@ export declare class LuzmoAiChat implements OnChanges {
     task?: AiPromptItemTask;
     /** AI model preference for item agent chart generation */
     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`. */
+    interactions?: AiChatInteraction[];
     /** Host-owned AiChatSession. The component subscribes and renders; does not abort on disconnect. */
     chatSession?: AiChatSession | null;
     /** Conversation ID (synced into the session; updated when the API returns a new id). */
@@ -109,7 +111,7 @@ export declare class LuzmoAiChat implements OnChanges {
     readonly luzmoMessageSent: import("@angular/core").OutputEmitterRef<CustomEvent<AiChatMessageSentEventDetail>>;
     /** Fired when the selected datasets change */
     readonly luzmoDatasetsChanged: import("@angular/core").OutputEmitterRef<CustomEvent<AiChatDatasetsChangedEventDetail>>;
-    /** 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: import("@angular/core").OutputEmitterRef<CustomEvent<AiChatStepEvent>>;
     /** Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`. */
     readonly luzmoComplete: import("@angular/core").OutputEmitterRef<CustomEvent<AiChatCompleteEvent>>;
@@ -132,7 +134,7 @@ export declare class LuzmoAiChat implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoAiChat, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAiChat, "luzmo-ai-chat", ["luzmoAiChat"], { "messages": { "alias": "messages"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stoppable": { "alias": "stoppable"; "required": false; }; "showAssistantContextMenu": { "alias": "showAssistantContextMenu"; "required": false; }; "showAssistantMessageFeedback": { "alias": "showAssistantMessageFeedback"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "includePublicDatasets": { "alias": "includePublicDatasets"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "hideDatasetButton": { "alias": "hideDatasetButton"; "required": false; }; "hideDatasetIcons": { "alias": "hideDatasetIcons"; "required": false; }; "disableDatasetModification": { "alias": "disableDatasetModification"; "required": false; }; "hideSelectedDatasets": { "alias": "hideSelectedDatasets"; "required": false; }; "hideAgents": { "alias": "hideAgents"; "required": false; }; "disableColumnMentions": { "alias": "disableColumnMentions"; "required": false; }; "requireDataset": { "alias": "requireDataset"; "required": false; }; "allowImages": { "alias": "allowImages"; "required": false; }; "allowVoiceInput": { "alias": "allowVoiceInput"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "uploadAttachments": { "alias": "uploadAttachments"; "required": false; }; "agent": { "alias": "agent"; "required": false; }; "agentConfig": { "alias": "agentConfig"; "required": false; }; "agentId": { "alias": "agentId"; "required": false; }; "task": { "alias": "task"; "required": false; }; "modelPreference": { "alias": "modelPreference"; "required": false; }; "chatSession": { "alias": "chatSession"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "dashboard": { "alias": "dashboard"; "required": false; }; "customItem": { "alias": "customItem"; "required": false; }; "currentScreenMode": { "alias": "currentScreenMode"; "required": false; }; "localeId": { "alias": "localeId"; "required": false; }; "timezoneId": { "alias": "timezoneId"; "required": false; }; "apiVersion": { "alias": "apiVersion"; "required": false; }; "stream": { "alias": "stream"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "cancelledMessage": { "alias": "cancelledMessage"; "required": false; }; "initialPrompt": { "alias": "initialPrompt"; "required": false; }; "emptyStateTitle": { "alias": "emptyStateTitle"; "required": false; }; "emptyStateSubtitle": { "alias": "emptyStateSubtitle"; "required": false; }; "emptyStateSuggestions": { "alias": "emptyStateSuggestions"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoMessageSent": "luzmoMessageSent"; "luzmoDatasetsChanged": "luzmoDatasetsChanged"; "luzmoStep": "luzmoStep"; "luzmoComplete": "luzmoComplete"; "luzmoStop": "luzmoStop"; "luzmoConversationIdChanged": "luzmoConversationIdChanged"; "luzmoAssistantMessageAction": "luzmoAssistantMessageAction"; "luzmoAssistantMessageFeedback": "luzmoAssistantMessageFeedback"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAiChat, "luzmo-ai-chat", ["luzmoAiChat"], { "messages": { "alias": "messages"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stoppable": { "alias": "stoppable"; "required": false; }; "showAssistantContextMenu": { "alias": "showAssistantContextMenu"; "required": false; }; "showAssistantMessageFeedback": { "alias": "showAssistantMessageFeedback"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "includePublicDatasets": { "alias": "includePublicDatasets"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "hideDatasetButton": { "alias": "hideDatasetButton"; "required": false; }; "hideDatasetIcons": { "alias": "hideDatasetIcons"; "required": false; }; "disableDatasetModification": { "alias": "disableDatasetModification"; "required": false; }; "hideSelectedDatasets": { "alias": "hideSelectedDatasets"; "required": false; }; "hideAgents": { "alias": "hideAgents"; "required": false; }; "disableColumnMentions": { "alias": "disableColumnMentions"; "required": false; }; "requireDataset": { "alias": "requireDataset"; "required": false; }; "allowImages": { "alias": "allowImages"; "required": false; }; "allowVoiceInput": { "alias": "allowVoiceInput"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "uploadAttachments": { "alias": "uploadAttachments"; "required": false; }; "agent": { "alias": "agent"; "required": false; }; "agentConfig": { "alias": "agentConfig"; "required": false; }; "agentId": { "alias": "agentId"; "required": false; }; "task": { "alias": "task"; "required": false; }; "modelPreference": { "alias": "modelPreference"; "required": false; }; "interactions": { "alias": "interactions"; "required": false; }; "chatSession": { "alias": "chatSession"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "dashboard": { "alias": "dashboard"; "required": false; }; "customItem": { "alias": "customItem"; "required": false; }; "currentScreenMode": { "alias": "currentScreenMode"; "required": false; }; "localeId": { "alias": "localeId"; "required": false; }; "timezoneId": { "alias": "timezoneId"; "required": false; }; "apiVersion": { "alias": "apiVersion"; "required": false; }; "stream": { "alias": "stream"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "cancelledMessage": { "alias": "cancelledMessage"; "required": false; }; "initialPrompt": { "alias": "initialPrompt"; "required": false; }; "emptyStateTitle": { "alias": "emptyStateTitle"; "required": false; }; "emptyStateSubtitle": { "alias": "emptyStateSubtitle"; "required": false; }; "emptyStateSuggestions": { "alias": "emptyStateSuggestions"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoMessageSent": "luzmoMessageSent"; "luzmoDatasetsChanged": "luzmoDatasetsChanged"; "luzmoStep": "luzmoStep"; "luzmoComplete": "luzmoComplete"; "luzmoStop": "luzmoStop"; "luzmoConversationIdChanged": "luzmoConversationIdChanged"; "luzmoAssistantMessageAction": "luzmoAssistantMessageAction"; "luzmoAssistantMessageFeedback": "luzmoAssistantMessageFeedback"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_stoppable: unknown;
     static ngAcceptInputType_showAssistantContextMenu: unknown;

package/angular/esm/components/ai-chat.js

@@ -73,6 +73,8 @@ export class LuzmoAiChat {
     task;
     /** AI model preference for item agent chart generation */
     modelPreference;
+    /** 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`. */
+    interactions;
     /** Host-owned AiChatSession. The component subscribes and renders; does not abort on disconnect. */
     chatSession;
     /** Conversation ID (synced into the session; updated when the API returns a new id). */
@@ -111,7 +113,7 @@ export class LuzmoAiChat {
     luzmoMessageSent = output({ alias: 'luzmoMessageSent' });
     /** Fired when the selected datasets change */
     luzmoDatasetsChanged = output({ 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. */
     luzmoStep = output({ alias: 'luzmoStep' });
     /** Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`. */
     luzmoComplete = output({ alias: 'luzmoComplete' });
@@ -221,6 +223,9 @@ export class LuzmoAiChat {
                 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;
@@ -321,7 +326,7 @@ export class LuzmoAiChat {
         }));
     }
     static ɵfac = function LuzmoAiChat_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoAiChat)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAiChat, selectors: [["luzmo-ai-chat"]], inputs: { messages: "messages", selectedDatasets: "selectedDatasets", placeholder: "placeholder", disabled: [2, "disabled", "disabled", booleanAttribute], stoppable: [2, "stoppable", "stoppable", booleanAttribute], showAssistantContextMenu: [2, "showAssistantContextMenu", "showAssistantContextMenu", booleanAttribute], showAssistantMessageFeedback: [2, "showAssistantMessageFeedback", "showAssistantMessageFeedback", booleanAttribute], authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", includePublicDatasets: [2, "includePublicDatasets", "includePublicDatasets", booleanAttribute], flagOpendata: [2, "flagOpendata", "flagOpendata", booleanAttribute], hideDatasetButton: [2, "hideDatasetButton", "hideDatasetButton", booleanAttribute], hideDatasetIcons: [2, "hideDatasetIcons", "hideDatasetIcons", booleanAttribute], disableDatasetModification: [2, "disableDatasetModification", "disableDatasetModification", booleanAttribute], hideSelectedDatasets: [2, "hideSelectedDatasets", "hideSelectedDatasets", booleanAttribute], hideAgents: [2, "hideAgents", "hideAgents", booleanAttribute], disableColumnMentions: [2, "disableColumnMentions", "disableColumnMentions", booleanAttribute], requireDataset: [2, "requireDataset", "requireDataset", booleanAttribute], allowImages: [2, "allowImages", "allowImages", booleanAttribute], allowVoiceInput: [2, "allowVoiceInput", "allowVoiceInput", booleanAttribute], acceptedFileTypes: "acceptedFileTypes", uploadAttachments: "uploadAttachments", agent: "agent", agentConfig: "agentConfig", agentId: "agentId", task: "task", modelPreference: "modelPreference", chatSession: "chatSession", conversationId: "conversationId", chart: "chart", dashboard: "dashboard", customItem: "customItem", currentScreenMode: "currentScreenMode", localeId: "localeId", timezoneId: "timezoneId", apiVersion: "apiVersion", stream: [2, "stream", "stream", booleanAttribute], loadingMessage: "loadingMessage", cancelledMessage: "cancelledMessage", initialPrompt: "initialPrompt", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle", emptyStateSuggestions: "emptyStateSuggestions", size: "size" }, outputs: { luzmoMessageSent: "luzmoMessageSent", luzmoDatasetsChanged: "luzmoDatasetsChanged", luzmoStep: "luzmoStep", luzmoComplete: "luzmoComplete", luzmoStop: "luzmoStop", luzmoConversationIdChanged: "luzmoConversationIdChanged", luzmoAssistantMessageAction: "luzmoAssistantMessageAction", luzmoAssistantMessageFeedback: "luzmoAssistantMessageFeedback" }, exportAs: ["luzmoAiChat"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAiChat_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAiChat, selectors: [["luzmo-ai-chat"]], inputs: { messages: "messages", selectedDatasets: "selectedDatasets", placeholder: "placeholder", disabled: [2, "disabled", "disabled", booleanAttribute], stoppable: [2, "stoppable", "stoppable", booleanAttribute], showAssistantContextMenu: [2, "showAssistantContextMenu", "showAssistantContextMenu", booleanAttribute], showAssistantMessageFeedback: [2, "showAssistantMessageFeedback", "showAssistantMessageFeedback", booleanAttribute], authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", includePublicDatasets: [2, "includePublicDatasets", "includePublicDatasets", booleanAttribute], flagOpendata: [2, "flagOpendata", "flagOpendata", booleanAttribute], hideDatasetButton: [2, "hideDatasetButton", "hideDatasetButton", booleanAttribute], hideDatasetIcons: [2, "hideDatasetIcons", "hideDatasetIcons", booleanAttribute], disableDatasetModification: [2, "disableDatasetModification", "disableDatasetModification", booleanAttribute], hideSelectedDatasets: [2, "hideSelectedDatasets", "hideSelectedDatasets", booleanAttribute], hideAgents: [2, "hideAgents", "hideAgents", booleanAttribute], disableColumnMentions: [2, "disableColumnMentions", "disableColumnMentions", booleanAttribute], requireDataset: [2, "requireDataset", "requireDataset", booleanAttribute], allowImages: [2, "allowImages", "allowImages", booleanAttribute], allowVoiceInput: [2, "allowVoiceInput", "allowVoiceInput", booleanAttribute], acceptedFileTypes: "acceptedFileTypes", uploadAttachments: "uploadAttachments", agent: "agent", agentConfig: "agentConfig", agentId: "agentId", task: "task", modelPreference: "modelPreference", interactions: "interactions", chatSession: "chatSession", conversationId: "conversationId", chart: "chart", dashboard: "dashboard", customItem: "customItem", currentScreenMode: "currentScreenMode", localeId: "localeId", timezoneId: "timezoneId", apiVersion: "apiVersion", stream: [2, "stream", "stream", booleanAttribute], loadingMessage: "loadingMessage", cancelledMessage: "cancelledMessage", initialPrompt: "initialPrompt", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle", emptyStateSuggestions: "emptyStateSuggestions", size: "size" }, outputs: { luzmoMessageSent: "luzmoMessageSent", luzmoDatasetsChanged: "luzmoDatasetsChanged", luzmoStep: "luzmoStep", luzmoComplete: "luzmoComplete", luzmoStop: "luzmoStop", luzmoConversationIdChanged: "luzmoConversationIdChanged", luzmoAssistantMessageAction: "luzmoAssistantMessageAction", luzmoAssistantMessageFeedback: "luzmoAssistantMessageFeedback" }, exportAs: ["luzmoAiChat"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAiChat_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -422,6 +427,9 @@ export class LuzmoAiChat {
         }], modelPreference: [{
             type: Input,
             args: [{ alias: 'modelPreference' }]
+        }], interactions: [{
+            type: Input,
+            args: [{ alias: 'interactions' }]
         }], chatSession: [{
             type: Input,
             args: [{ alias: 'chatSession' }]

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

@@ -71,6 +71,8 @@ export declare class LuzmoDataFieldsSelect implements OnChanges {
      */
     private setHostProperty;
     private bindEvents;
+    /** Focuses the select trigger. */
+    focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDataFieldsSelect, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDataFieldsSelect, "luzmo-data-fields-select", ["luzmoDataFieldsSelect"], { "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "levels": { "alias": "levels"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "retrieving": { "alias": "retrieving"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoDataFieldsSelected": "luzmoDataFieldsSelected"; }, never, ["*"], true, never>;
     static ngAcceptInputType_allowEmpty: unknown;

package/angular/esm/components/data-fields-select.js

@@ -158,6 +158,10 @@ export class LuzmoDataFieldsSelect {
             this.luzmoDataFieldsSelected.emit(typed);
         }));
     }
+    /** Focuses the select trigger. */
+    focus(options) {
+        return this.host.focus(options);
+    }
     static ɵfac = function LuzmoDataFieldsSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDataFieldsSelect)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDataFieldsSelect, selectors: [["luzmo-data-fields-select"]], inputs: { contentLanguage: "contentLanguage", label: "label", icons: "icons", levels: "levels", allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], placeholder: "placeholder", selects: "selects", value: "value", retrieving: [2, "retrieving", "retrieving", booleanAttribute], invalid: [2, "invalid", "invalid", booleanAttribute], clearable: [2, "clearable", "clearable", booleanAttribute], pending: [2, "pending", "pending", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], quiet: [2, "quiet", "quiet", booleanAttribute], search: "search", placement: "placement", datasetsDataFields: "datasetsDataFields", language: "language", size: "size", autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoDataFieldsSelected: "luzmoDataFieldsSelected" }, exportAs: ["luzmoDataFieldsSelect"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDataFieldsSelect_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();

package/angular/esm/components/display-settings-period-over-period.d.ts

@@ -2,7 +2,7 @@ import { OnChanges, SimpleChanges } from '@angular/core';
 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';
 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';
 import * as i0 from "@angular/core";
 export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
 export declare class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
@@ -13,13 +13,19 @@ export declare class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoDisplaySettingsPeriodOverPeriodHostElement;
+    /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+    slotsContents?: VizItemSlot[];
+    /** Visualization type used to interpret comparison slot context. */
+    itemType?: VizItemType;
+    /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+    hasConnectedComparisonFilter?: boolean;
     /** The slotContent that is passed to the settings */
     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. */
     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. */
     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. */
     hidePastValue?: boolean;
     /** Datetime columns from the linked dataset available as offset/comparison date columns. */
     linkedDatasetDatetimeColumns?: (Column & {
@@ -42,7 +48,8 @@ export declare class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDisplaySettingsPeriodOverPeriod, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDisplaySettingsPeriodOverPeriod, "luzmo-display-settings-period-over-period", ["luzmoDisplaySettingsPeriodOverPeriod"], { "slotContent": { "alias": "slotContent"; "required": false; }; "periodOverPeriodUiType": { "alias": "periodOverPeriodType"; "required": false; }; "allowPeriodsWithoutDatetimeColumn": { "alias": "allowPeriodsWithoutDatetimeColumn"; "required": false; }; "hidePastValue": { "alias": "hidePastValue"; "required": false; }; "linkedDatasetDatetimeColumns": { "alias": "linkedDatasetDatetimeColumns"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDisplaySettingsPeriodOverPeriod, "luzmo-display-settings-period-over-period", ["luzmoDisplaySettingsPeriodOverPeriod"], { "slotsContents": { "alias": "slotsContents"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "hasConnectedComparisonFilter": { "alias": "hasConnectedComparisonFilter"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; "periodOverPeriodUiType": { "alias": "periodOverPeriodType"; "required": false; }; "allowPeriodsWithoutDatetimeColumn": { "alias": "allowPeriodsWithoutDatetimeColumn"; "required": false; }; "hidePastValue": { "alias": "hidePastValue"; "required": false; }; "linkedDatasetDatetimeColumns": { "alias": "linkedDatasetDatetimeColumns"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_hasConnectedComparisonFilter: unknown;
     static ngAcceptInputType_allowPeriodsWithoutDatetimeColumn: unknown;
     static ngAcceptInputType_hidePastValue: unknown;
 }

package/angular/esm/components/display-settings-period-over-period.js

@@ -15,13 +15,19 @@ export class LuzmoDisplaySettingsPeriodOverPeriod {
     get nativeElement() {
         return this.host;
     }
+    /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+    slotsContents;
+    /** Visualization type used to interpret comparison slot context. */
+    itemType;
+    /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+    hasConnectedComparisonFilter;
     /** The slotContent that is passed to the settings */
     slotContent;
-    /** 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. */
     periodOverPeriodUiType;
-    /** 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. */
     allowPeriodsWithoutDatetimeColumn;
-    /** 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. */
     hidePastValue;
     /** Datetime columns from the linked dataset available as offset/comparison date columns. */
     linkedDatasetDatetimeColumns;
@@ -42,6 +48,15 @@ export class LuzmoDisplaySettingsPeriodOverPeriod {
     ngOnChanges(changes) {
         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;
@@ -84,7 +99,7 @@ export class LuzmoDisplaySettingsPeriodOverPeriod {
         }));
     }
     static ɵfac = function LuzmoDisplaySettingsPeriodOverPeriod_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDisplaySettingsPeriodOverPeriod)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDisplaySettingsPeriodOverPeriod, selectors: [["luzmo-display-settings-period-over-period"]], inputs: { slotContent: "slotContent", periodOverPeriodUiType: [0, "periodOverPeriodType", "periodOverPeriodUiType"], allowPeriodsWithoutDatetimeColumn: [2, "allowPeriodsWithoutDatetimeColumn", "allowPeriodsWithoutDatetimeColumn", booleanAttribute], hidePastValue: [2, "hidePastValue", "hidePastValue", booleanAttribute], linkedDatasetDatetimeColumns: "linkedDatasetDatetimeColumns", language: "language", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, exportAs: ["luzmoDisplaySettingsPeriodOverPeriod"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDisplaySettingsPeriodOverPeriod_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDisplaySettingsPeriodOverPeriod, selectors: [["luzmo-display-settings-period-over-period"]], inputs: { slotsContents: "slotsContents", itemType: "itemType", hasConnectedComparisonFilter: [2, "hasConnectedComparisonFilter", "hasConnectedComparisonFilter", booleanAttribute], slotContent: "slotContent", periodOverPeriodUiType: [0, "periodOverPeriodType", "periodOverPeriodUiType"], allowPeriodsWithoutDatetimeColumn: [2, "allowPeriodsWithoutDatetimeColumn", "allowPeriodsWithoutDatetimeColumn", booleanAttribute], hidePastValue: [2, "hidePastValue", "hidePastValue", booleanAttribute], linkedDatasetDatetimeColumns: "linkedDatasetDatetimeColumns", language: "language", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, exportAs: ["luzmoDisplaySettingsPeriodOverPeriod"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDisplaySettingsPeriodOverPeriod_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -98,7 +113,16 @@ export class LuzmoDisplaySettingsPeriodOverPeriod {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { slotContent: [{
+    }], () => [], { slotsContents: [{
+            type: Input,
+            args: [{ alias: 'slotsContents' }]
+        }], itemType: [{
+            type: Input,
+            args: [{ alias: 'itemType' }]
+        }], hasConnectedComparisonFilter: [{
+            type: Input,
+            args: [{ alias: 'hasConnectedComparisonFilter', transform: booleanAttribute }]
+        }], slotContent: [{
             type: Input,
             args: [{ alias: 'slotContent' }]
         }], periodOverPeriodUiType: [{

package/angular/esm/components/display-settings.d.ts

@@ -4,7 +4,7 @@ import type { LuzmoDisplaySettings as LuzmoDisplaySettingsHostElement, DisplaySe
 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';
 import * as i0 from "@angular/core";
 export type { DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
 export declare class LuzmoDisplaySettings implements OnChanges {
@@ -15,6 +15,12 @@ export declare class LuzmoDisplaySettings implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoDisplaySettingsHostElement;
+    /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+    slotsContents?: VizItemSlot[];
+    /** Visualization type used to interpret comparison slot context. */
+    itemType?: VizItemType;
+    /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+    hasConnectedComparisonFilter?: boolean;
     /** The language of the settings interface */
     language?: string;
     /** The language to use for locale-aware formatting and labels */
@@ -31,7 +37,7 @@ export declare class LuzmoDisplaySettings implements OnChanges {
     isAggregationDisabled?: boolean;
     /** Whether to show the cumulative sum options */
     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. */
     periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
     /** Whether to show the trash button next to the label */
     showRemoveButton?: boolean;
@@ -41,7 +47,7 @@ export declare class LuzmoDisplaySettings implements OnChanges {
     slotName?: SlotName;
     /** The slot content model (label, formatting, aggregation, etc.) for the field being configured. */
     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). */
     datasetsDataFields?: DatasetDataFields[];
     /** The API URL used when resolving calculation previews by dataset id. */
     apiUrl?: string;
@@ -70,7 +76,8 @@ export declare class LuzmoDisplaySettings implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDisplaySettings, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDisplaySettings, "luzmo-display-settings", ["luzmoDisplaySettings"], { "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideDisplaySettings": { "alias": "hideDisplaySettings"; "required": false; }; "isBinningDisabled": { "alias": "isBinningDisabled"; "required": false; }; "areDatetimeOptionsEnabled": { "alias": "areDatetimeOptionsEnabled"; "required": false; }; "areGrandTotalsEnabled": { "alias": "areGrandTotalsEnabled"; "required": false; }; "isAggregationDisabled": { "alias": "isAggregationDisabled"; "required": false; }; "isCumulativeSumEnabled": { "alias": "isCumulativeSumEnabled"; "required": false; }; "periodOverPeriodUiType": { "alias": "periodOverPeriodUiType"; "required": false; }; "showRemoveButton": { "alias": "showRemoveButton"; "required": false; }; "slotType": { "alias": "slotType"; "required": false; }; "slotName": { "alias": "slotName"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "measureColumns": { "alias": "measureColumns"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; "luzmoRemoveSlotContent": "luzmoRemoveSlotContent"; "luzmoInfoVisibilityChanged": "luzmoInfoVisibilityChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDisplaySettings, "luzmo-display-settings", ["luzmoDisplaySettings"], { "slotsContents": { "alias": "slotsContents"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "hasConnectedComparisonFilter": { "alias": "hasConnectedComparisonFilter"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideDisplaySettings": { "alias": "hideDisplaySettings"; "required": false; }; "isBinningDisabled": { "alias": "isBinningDisabled"; "required": false; }; "areDatetimeOptionsEnabled": { "alias": "areDatetimeOptionsEnabled"; "required": false; }; "areGrandTotalsEnabled": { "alias": "areGrandTotalsEnabled"; "required": false; }; "isAggregationDisabled": { "alias": "isAggregationDisabled"; "required": false; }; "isCumulativeSumEnabled": { "alias": "isCumulativeSumEnabled"; "required": false; }; "periodOverPeriodUiType": { "alias": "periodOverPeriodUiType"; "required": false; }; "showRemoveButton": { "alias": "showRemoveButton"; "required": false; }; "slotType": { "alias": "slotType"; "required": false; }; "slotName": { "alias": "slotName"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "measureColumns": { "alias": "measureColumns"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; "luzmoRemoveSlotContent": "luzmoRemoveSlotContent"; "luzmoInfoVisibilityChanged": "luzmoInfoVisibilityChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_hasConnectedComparisonFilter: unknown;
     static ngAcceptInputType_hideDisplaySettings: unknown;
     static ngAcceptInputType_isBinningDisabled: unknown;
     static ngAcceptInputType_areDatetimeOptionsEnabled: unknown;

package/angular/esm/components/display-settings.js

@@ -15,6 +15,12 @@ export class LuzmoDisplaySettings {
     get nativeElement() {
         return this.host;
     }
+    /** Full saved slots for deriving comparison levels and implicit datetime offsets. */
+    slotsContents;
+    /** Visualization type used to interpret comparison slot context. */
+    itemType;
+    /** Whether a comparison filter currently applies to this item. Runtime only; never saved in slot contents. */
+    hasConnectedComparisonFilter;
     /** The language of the settings interface */
     language;
     /** The language to use for locale-aware formatting and labels */
@@ -31,7 +37,7 @@ export class LuzmoDisplaySettings {
     isAggregationDisabled;
     /** Whether to show the cumulative sum options */
     isCumulativeSumEnabled;
-    /** 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. */
     periodOverPeriodUiType;
     /** Whether to show the trash button next to the label */
     showRemoveButton;
@@ -41,7 +47,7 @@ export class LuzmoDisplaySettings {
     slotName;
     /** The slot content model (label, formatting, aggregation, etc.) for the field being configured. */
     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). */
     datasetsDataFields;
     /** The API URL used when resolving calculation previews by dataset id. */
     apiUrl;
@@ -70,6 +76,15 @@ export class LuzmoDisplaySettings {
     ngOnChanges(changes) {
         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;
@@ -156,7 +171,7 @@ export class LuzmoDisplaySettings {
         }));
     }
     static ɵfac = function LuzmoDisplaySettings_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDisplaySettings)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDisplaySettings, selectors: [["luzmo-display-settings"]], inputs: { language: "language", contentLanguage: "contentLanguage", hideDisplaySettings: [2, "hideDisplaySettings", "hideDisplaySettings", booleanAttribute], isBinningDisabled: [2, "isBinningDisabled", "isBinningDisabled", booleanAttribute], areDatetimeOptionsEnabled: [2, "areDatetimeOptionsEnabled", "areDatetimeOptionsEnabled", booleanAttribute], areGrandTotalsEnabled: [2, "areGrandTotalsEnabled", "areGrandTotalsEnabled", booleanAttribute], isAggregationDisabled: [2, "isAggregationDisabled", "isAggregationDisabled", booleanAttribute], isCumulativeSumEnabled: [2, "isCumulativeSumEnabled", "isCumulativeSumEnabled", booleanAttribute], periodOverPeriodUiType: "periodOverPeriodUiType", showRemoveButton: [2, "showRemoveButton", "showRemoveButton", booleanAttribute], slotType: "slotType", slotName: "slotName", slotContent: "slotContent", datasetsDataFields: "datasetsDataFields", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", measureColumns: "measureColumns", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged", luzmoRemoveSlotContent: "luzmoRemoveSlotContent", luzmoInfoVisibilityChanged: "luzmoInfoVisibilityChanged" }, exportAs: ["luzmoDisplaySettings"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDisplaySettings_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDisplaySettings, selectors: [["luzmo-display-settings"]], inputs: { slotsContents: "slotsContents", itemType: "itemType", hasConnectedComparisonFilter: [2, "hasConnectedComparisonFilter", "hasConnectedComparisonFilter", booleanAttribute], language: "language", contentLanguage: "contentLanguage", hideDisplaySettings: [2, "hideDisplaySettings", "hideDisplaySettings", booleanAttribute], isBinningDisabled: [2, "isBinningDisabled", "isBinningDisabled", booleanAttribute], areDatetimeOptionsEnabled: [2, "areDatetimeOptionsEnabled", "areDatetimeOptionsEnabled", booleanAttribute], areGrandTotalsEnabled: [2, "areGrandTotalsEnabled", "areGrandTotalsEnabled", booleanAttribute], isAggregationDisabled: [2, "isAggregationDisabled", "isAggregationDisabled", booleanAttribute], isCumulativeSumEnabled: [2, "isCumulativeSumEnabled", "isCumulativeSumEnabled", booleanAttribute], periodOverPeriodUiType: "periodOverPeriodUiType", showRemoveButton: [2, "showRemoveButton", "showRemoveButton", booleanAttribute], slotType: "slotType", slotName: "slotName", slotContent: "slotContent", datasetsDataFields: "datasetsDataFields", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", measureColumns: "measureColumns", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged", luzmoRemoveSlotContent: "luzmoRemoveSlotContent", luzmoInfoVisibilityChanged: "luzmoInfoVisibilityChanged" }, exportAs: ["luzmoDisplaySettings"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDisplaySettings_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -170,7 +185,16 @@ export class LuzmoDisplaySettings {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { language: [{
+    }], () => [], { slotsContents: [{
+            type: Input,
+            args: [{ alias: 'slotsContents' }]
+        }], itemType: [{
+            type: Input,
+            args: [{ alias: 'itemType' }]
+        }], hasConnectedComparisonFilter: [{
+            type: Input,
+            args: [{ alias: 'hasConnectedComparisonFilter', transform: booleanAttribute }]
+        }], language: [{
             type: Input,
             args: [{ alias: 'language' }]
         }], contentLanguage: [{

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

@@ -1,6 +1,7 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/interactive-viz-item';
-import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, 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';
+import type { OptionsConfig, SlotConfig, TranslationOverrides, TranslationsFile, VizItemExportType } from '@luzmo/dashboard-contents-types';
 import type { LuzmoEmbedVizItem } from '@luzmo/embed';
 import * as i0 from "@angular/core";
 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';
@@ -12,12 +13,6 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoInteractiveVizItemHostElement;
-    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
-    language?: string;
-    /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
-    addToDashboard?: boolean;
-    /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
-    canFilter?: LuzmoEmbedVizItem['canFilter'];
     /** Loose chart config (type, options, slots, filters, inlineData); slots may use the keyed-object form. */
     chart?: FlexChartConfig | null;
     /** Current feedback (drives the thumbs up/down selection). */
@@ -40,10 +35,32 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
     hideFeedback?: boolean;
     /** When present, hides the config-panel toggle and the panel itself. */
     hideConfigPanel?: boolean;
+    /** When present, hides the options tab of the config panel and keeps the data tab. */
+    hideConfigOptions?: boolean;
+    /** Whether each slot in the config panel takes one field or several, forwarded to `luzmo-item-slot-picker-panel` as `selects`. */
+    slotSelects?: 'single' | 'multiple';
+    /** When present, the slot pickers in the config panel grow to full width, forwarded as `grows`. */
+    slotGrows?: boolean;
+    /** Slots configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+    slotsConfiguration?: SlotConfig[] | null;
+    /** Options configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+    customOptionsConfiguration?: OptionsConfig | null;
+    /** Option label translations that go with `customOptionsConfiguration`. */
+    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. */
+    chartRenderOptions?: FlexChartConfig['options'] | null;
+    /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
+    addToDashboard?: boolean;
+    /** Host data operations for add to dashboard. When unset, the built-in adapter on the auth properties is used. */
+    dashboardActions?: DashboardActions | null;
     /** When present, chart changes are only emitted and the host sets `chart`; otherwise they are applied here and still emitted. */
     controlled?: boolean;
+    /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
+    canFilter?: LuzmoEmbedVizItem['canFilter'];
     /** Applies and emits option changes live while a control is dragged or a key is held, without debounce, and forwards `luzmo-option-interaction-*` events. Off by default. */
     liveInteractions?: boolean;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
     /** The size of the element */
     size?: 's' | 'm' | 'l' | 'xl';
     /** Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set. */
@@ -72,12 +89,16 @@ export declare class LuzmoInteractiveVizItem implements OnChanges {
      */
     private setHostProperty;
     private bindEvents;
+    /** 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>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoInteractiveVizItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInteractiveVizItem, "luzmo-interactive-viz-item", ["luzmoInteractiveVizItem"], { "language": { "alias": "language"; "required": false; }; "addToDashboard": { "alias": "addToDashboard"; "required": false; }; "canFilter": { "alias": "canFilter"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideActions": { "alias": "hideActions"; "required": false; }; "hideFeedback": { "alias": "hideFeedback"; "required": false; }; "hideConfigPanel": { "alias": "hideConfigPanel"; "required": false; }; "controlled": { "alias": "controlled"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoChartOptionsChanged": "luzmoChartOptionsChanged"; "luzmoChartChanged": "luzmoChartChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; "luzmoOptionInteractionCancel": "luzmoOptionInteractionCancel"; "luzmoFeedbackChanged": "luzmoFeedbackChanged"; "luzmoChartAdded": "luzmoChartAdded"; "luzmoChartAddFailed": "luzmoChartAddFailed"; }, never, ["*"], true, never>;
-    static ngAcceptInputType_addToDashboard: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInteractiveVizItem, "luzmo-interactive-viz-item", ["luzmoInteractiveVizItem"], { "chart": { "alias": "chart"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideActions": { "alias": "hideActions"; "required": false; }; "hideFeedback": { "alias": "hideFeedback"; "required": false; }; "hideConfigPanel": { "alias": "hideConfigPanel"; "required": false; }; "hideConfigOptions": { "alias": "hideConfigOptions"; "required": false; }; "slotSelects": { "alias": "slotSelects"; "required": false; }; "slotGrows": { "alias": "slotGrows"; "required": false; }; "slotsConfiguration": { "alias": "slotsConfiguration"; "required": false; }; "customOptionsConfiguration": { "alias": "customOptionsConfiguration"; "required": false; }; "customTranslations": { "alias": "customTranslations"; "required": false; }; "chartRenderOptions": { "alias": "chartRenderOptions"; "required": false; }; "addToDashboard": { "alias": "addToDashboard"; "required": false; }; "dashboardActions": { "alias": "dashboardActions"; "required": false; }; "controlled": { "alias": "controlled"; "required": false; }; "canFilter": { "alias": "canFilter"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoChartOptionsChanged": "luzmoChartOptionsChanged"; "luzmoChartChanged": "luzmoChartChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; "luzmoOptionInteractionCancel": "luzmoOptionInteractionCancel"; "luzmoFeedbackChanged": "luzmoFeedbackChanged"; "luzmoChartAdded": "luzmoChartAdded"; "luzmoChartAddFailed": "luzmoChartAddFailed"; }, never, ["*"], true, never>;
     static ngAcceptInputType_hideActions: unknown;
     static ngAcceptInputType_hideFeedback: unknown;
     static ngAcceptInputType_hideConfigPanel: unknown;
+    static ngAcceptInputType_hideConfigOptions: unknown;
+    static ngAcceptInputType_slotGrows: unknown;
+    static ngAcceptInputType_addToDashboard: unknown;
     static ngAcceptInputType_controlled: unknown;
     static ngAcceptInputType_liveInteractions: unknown;
 }