@luzmo/analytics-components-kit 1.0.1-alpha.85 → 1.0.1-alpha.87

package/angular/README.md

@@ -26,6 +26,7 @@ bootstrapApplication(AiChatMessageAssistantComponent);
 - `AiChatMessageUserComponent` → <luzmo-ai-chat-message-user>
 - `AiChatMessagesContainerComponent` → <luzmo-ai-chat-messages-container>
 - `AiInteractionTextareaComponent` → <luzmo-ai-interaction-textarea>
+- `DatasetIconComponent` → <luzmo-dataset-icon>
 - `DatasetSelectorListComponent` → <luzmo-dataset-selector-list>
 - `DatasetSelectorRowComponent` → <luzmo-dataset-selector-row>
 - `DisplaySettingsComponent` → <luzmo-display-settings>

package/angular/components/ai-interaction-textarea.component.ts

@@ -13,6 +13,7 @@ import type { Dataset } from '../types';
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
 </luzmo-ai-interaction-textarea>`
@@ -25,5 +26,6 @@ export class AiInteractionTextareaComponent {
   @Input() apiUrl?: string;
   @Input() appServer?: string;
   @Input() flagOpendata?: boolean;
+  @Input() disabled?: boolean;
   @Output() promptSubmitted = new EventEmitter<CustomEvent>();
 }

package/angular/components/dataset-icon.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DatasetIcon } from '../types';
+
+@Component({
+  selector: 'luzmo-dataset-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-dataset-icon
+        [attr.dataset]="dataset"
+        [attr.size]="size"
+        [attr.app-url]="appUrl"
+>
+  <ng-content></ng-content>
+</luzmo-dataset-icon>`
+})
+export class DatasetIconComponent {
+  @Input() dataset?: DatasetIcon;
+  @Input() size?: '16px' | '24px' | '32px' | '48px' | '64px';
+  @Input() appUrl?: string;
+
+}

package/angular/components/dataset-selector-row.component.ts

@@ -13,6 +13,7 @@ import type { Dataset } from '../types';
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (dataset-selected)="datasetSelected.emit($event)"
         (dataset-removed)="datasetRemoved.emit($event)">
   <ng-content></ng-content>
@@ -26,6 +27,7 @@ export class DatasetSelectorRowComponent {
   @Input() apiUrl?: string;
   @Input() appServer?: string;
   @Input() flagOpendata?: boolean;
+  @Input() disabled?: boolean;
   @Output() datasetSelected = new EventEmitter<CustomEvent>();
   @Output() datasetRemoved = new EventEmitter<CustomEvent>();
 }

package/angular/esm/components/ai-interaction-textarea.component.d.ts

@@ -9,7 +9,8 @@ export declare class AiInteractionTextareaComponent {
     apiUrl?: string;
     appServer?: string;
     flagOpendata?: boolean;
+    disabled?: boolean;
     promptSubmitted: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AiInteractionTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AiInteractionTextareaComponent, "luzmo-ai-interaction-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; }, { "promptSubmitted": "promptSubmitted"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AiInteractionTextareaComponent, "luzmo-ai-interaction-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "promptSubmitted": "promptSubmitted"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/ai-interaction-textarea.component.js

@@ -8,9 +8,10 @@ export class AiInteractionTextareaComponent {
     apiUrl;
     appServer;
     flagOpendata;
+    disabled;
     promptSubmitted = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AiInteractionTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: AiInteractionTextareaComponent, isStandalone: true, selector: "luzmo-ai-interaction-textarea", inputs: { placeholder: "placeholder", selectedDatasets: "selectedDatasets", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata" }, outputs: { promptSubmitted: "promptSubmitted" }, ngImport: i0, template: `<luzmo-ai-interaction-textarea
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: AiInteractionTextareaComponent, isStandalone: true, selector: "luzmo-ai-interaction-textarea", inputs: { placeholder: "placeholder", selectedDatasets: "selectedDatasets", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata", disabled: "disabled" }, outputs: { promptSubmitted: "promptSubmitted" }, ngImport: i0, template: `<luzmo-ai-interaction-textarea
         [attr.placeholder]="placeholder"
         [attr.selectedDatasets]="selectedDatasets"
         [attr.auth-key]="authKey"
@@ -18,9 +19,10 @@ export class AiInteractionTextareaComponent {
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
-</luzmo-ai-interaction-textarea>`, isInline: true, dependencies: [{ kind: "component", type: AiInteractionTextareaComponent, selector: "luzmo-ai-interaction-textarea", inputs: ["placeholder", "selectedDatasets", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata"], outputs: ["promptSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-ai-interaction-textarea>`, isInline: true, dependencies: [{ kind: "component", type: AiInteractionTextareaComponent, selector: "luzmo-ai-interaction-textarea", inputs: ["placeholder", "selectedDatasets", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata", "disabled"], outputs: ["promptSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AiInteractionTextareaComponent, decorators: [{
             type: Component,
@@ -36,6 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
 </luzmo-ai-interaction-textarea>`
@@ -54,6 +57,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], flagOpendata: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], promptSubmitted: [{
                 type: Output
             }] } });

package/angular/esm/components/dataset-icon.component.d.ts

@@ -0,0 +1,9 @@
+import type { DatasetIcon } from '../types';
+import * as i0 from "@angular/core";
+export declare class DatasetIconComponent {
+    dataset?: DatasetIcon;
+    size?: '16px' | '24px' | '32px' | '48px' | '64px';
+    appUrl?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatasetIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatasetIconComponent, "luzmo-dataset-icon", never, { "dataset": { "alias": "dataset"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appUrl": { "alias": "appUrl"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/angular/esm/components/dataset-icon.component.js

@@ -0,0 +1,36 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DatasetIconComponent {
+    dataset;
+    size;
+    appUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DatasetIconComponent, isStandalone: true, selector: "luzmo-dataset-icon", inputs: { dataset: "dataset", size: "size", appUrl: "appUrl" }, ngImport: i0, template: `<luzmo-dataset-icon
+        [attr.dataset]="dataset"
+        [attr.size]="size"
+        [attr.app-url]="appUrl"
+>
+  <ng-content></ng-content>
+</luzmo-dataset-icon>`, isInline: true, dependencies: [{ kind: "component", type: DatasetIconComponent, selector: "luzmo-dataset-icon", inputs: ["dataset", "size", "appUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luzmo-dataset-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<luzmo-dataset-icon
+        [attr.dataset]="dataset"
+        [attr.size]="size"
+        [attr.app-url]="appUrl"
+>
+  <ng-content></ng-content>
+</luzmo-dataset-icon>`
+                }]
+        }], propDecorators: { dataset: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], appUrl: [{
+                type: Input
+            }] } });

package/angular/esm/components/dataset-selector-row.component.d.ts

@@ -9,8 +9,9 @@ export declare class DatasetSelectorRowComponent {
     apiUrl?: string;
     appServer?: string;
     flagOpendata?: boolean;
+    disabled?: boolean;
     datasetSelected: EventEmitter<CustomEvent<any>>;
     datasetRemoved: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatasetSelectorRowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatasetSelectorRowComponent, "luzmo-dataset-selector-row", never, { "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; }, { "datasetSelected": "datasetSelected"; "datasetRemoved": "datasetRemoved"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatasetSelectorRowComponent, "luzmo-dataset-selector-row", never, { "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "datasetSelected": "datasetSelected"; "datasetRemoved": "datasetRemoved"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/dataset-selector-row.component.js

@@ -8,10 +8,11 @@ export class DatasetSelectorRowComponent {
     apiUrl;
     appServer;
     flagOpendata;
+    disabled;
     datasetSelected = new EventEmitter();
     datasetRemoved = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetSelectorRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DatasetSelectorRowComponent, isStandalone: true, selector: "luzmo-dataset-selector-row", inputs: { selectedDatasets: "selectedDatasets", buttonLabel: "buttonLabel", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata" }, outputs: { datasetSelected: "datasetSelected", datasetRemoved: "datasetRemoved" }, ngImport: i0, template: `<luzmo-dataset-selector-row
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DatasetSelectorRowComponent, isStandalone: true, selector: "luzmo-dataset-selector-row", inputs: { selectedDatasets: "selectedDatasets", buttonLabel: "buttonLabel", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata", disabled: "disabled" }, outputs: { datasetSelected: "datasetSelected", datasetRemoved: "datasetRemoved" }, ngImport: i0, template: `<luzmo-dataset-selector-row
         [attr.selectedDatasets]="selectedDatasets"
         [attr.button-label]="buttonLabel"
         [attr.auth-key]="authKey"
@@ -19,10 +20,11 @@ export class DatasetSelectorRowComponent {
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (dataset-selected)="datasetSelected.emit($event)"
         (dataset-removed)="datasetRemoved.emit($event)">
   <ng-content></ng-content>
-</luzmo-dataset-selector-row>`, isInline: true, dependencies: [{ kind: "component", type: DatasetSelectorRowComponent, selector: "luzmo-dataset-selector-row", inputs: ["selectedDatasets", "buttonLabel", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata"], outputs: ["datasetSelected", "datasetRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-dataset-selector-row>`, isInline: true, dependencies: [{ kind: "component", type: DatasetSelectorRowComponent, selector: "luzmo-dataset-selector-row", inputs: ["selectedDatasets", "buttonLabel", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata", "disabled"], outputs: ["datasetSelected", "datasetRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetSelectorRowComponent, decorators: [{
             type: Component,
@@ -38,6 +40,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.api-url]="apiUrl"
         [attr.app-server]="appServer"
         [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
         (dataset-selected)="datasetSelected.emit($event)"
         (dataset-removed)="datasetRemoved.emit($event)">
   <ng-content></ng-content>
@@ -57,6 +60,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], flagOpendata: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], datasetSelected: [{
                 type: Output
             }], datasetRemoved: [{

package/angular/esm/index.d.ts

@@ -2,6 +2,7 @@ import { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 import { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 import { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 import { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+import { DatasetIconComponent } from './components/dataset-icon.component';
 import { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 import { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 import { DisplaySettingsComponent } from './components/display-settings.component';
@@ -35,6 +36,7 @@ export { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 export { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 export { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 export { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+export { DatasetIconComponent } from './components/dataset-icon.component';
 export { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 export { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 export { DisplaySettingsComponent } from './components/display-settings.component';
@@ -64,4 +66,4 @@ export { GridItemActionsMenuComponent } from './components/grid-item-actions-men
 export { SlotContentsPickerComponent } from './components/slot-contents-picker.component';
 export { SlotMenuComponent } from './components/slot-menu.component';
 export { SlotMenuListComponent } from './components/slot-menu-list.component';
-export declare const LUZMO_COMPONENTS: readonly [typeof AiChatMessageAssistantComponent, typeof AiChatMessageUserComponent, typeof AiChatMessagesContainerComponent, typeof AiInteractionTextareaComponent, typeof DatasetSelectorListComponent, typeof DatasetSelectorRowComponent, typeof DisplaySettingsComponent, typeof DisplaySettingsBinningComponent, typeof DisplaySettingsDatetimeComponent, typeof DisplaySettingsGrandTotalsComponent, typeof DisplaySettingsNumericComponent, typeof DisplaySettingsPeriodOverPeriodComponent, typeof DraggableDataItemComponent, typeof DraggableDataItemLevelComponent, typeof DroppableSlotComponent, typeof EditItemComponent, typeof EditOptionComponent, typeof EditOptionColorPickerComponent, typeof EditOptionColorRangeComponent, typeof FilterDataItemPickerComponent, typeof FilterExpressionPickerComponent, typeof FilterGroupComponent, typeof FilterItemComponent, typeof FilterParameterPickerComponent, typeof FilterValuePickerComponent, typeof FilterValuePickerDatetimeComponent, typeof FilterValuePickerHierarchyComponent, typeof FilterValuePickerNumericComponent, typeof GridComponent, typeof GridItemActionsMenuComponent, typeof SlotContentsPickerComponent, typeof SlotMenuComponent, typeof SlotMenuListComponent];
+export declare const LUZMO_COMPONENTS: readonly [typeof AiChatMessageAssistantComponent, typeof AiChatMessageUserComponent, typeof AiChatMessagesContainerComponent, typeof AiInteractionTextareaComponent, typeof DatasetIconComponent, typeof DatasetSelectorListComponent, typeof DatasetSelectorRowComponent, typeof DisplaySettingsComponent, typeof DisplaySettingsBinningComponent, typeof DisplaySettingsDatetimeComponent, typeof DisplaySettingsGrandTotalsComponent, typeof DisplaySettingsNumericComponent, typeof DisplaySettingsPeriodOverPeriodComponent, typeof DraggableDataItemComponent, typeof DraggableDataItemLevelComponent, typeof DroppableSlotComponent, typeof EditItemComponent, typeof EditOptionComponent, typeof EditOptionColorPickerComponent, typeof EditOptionColorRangeComponent, typeof FilterDataItemPickerComponent, typeof FilterExpressionPickerComponent, typeof FilterGroupComponent, typeof FilterItemComponent, typeof FilterParameterPickerComponent, typeof FilterValuePickerComponent, typeof FilterValuePickerDatetimeComponent, typeof FilterValuePickerHierarchyComponent, typeof FilterValuePickerNumericComponent, typeof GridComponent, typeof GridItemActionsMenuComponent, typeof SlotContentsPickerComponent, typeof SlotMenuComponent, typeof SlotMenuListComponent];

package/angular/esm/index.js

@@ -2,6 +2,7 @@ import { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 import { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 import { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 import { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+import { DatasetIconComponent } from './components/dataset-icon.component';
 import { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 import { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 import { DisplaySettingsComponent } from './components/display-settings.component';
@@ -35,6 +36,7 @@ export { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 export { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 export { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 export { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+export { DatasetIconComponent } from './components/dataset-icon.component';
 export { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 export { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 export { DisplaySettingsComponent } from './components/display-settings.component';
@@ -69,6 +71,7 @@ export const LUZMO_COMPONENTS = [
     AiChatMessageUserComponent,
     AiChatMessagesContainerComponent,
     AiInteractionTextareaComponent,
+    DatasetIconComponent,
     DatasetSelectorListComponent,
     DatasetSelectorRowComponent,
     DisplaySettingsComponent,

package/angular/esm/types.d.ts

@@ -64,6 +64,20 @@ export type DataItem = {
     lowestLevel?: string;
 };
 export type GridItemRenderer = (item: GridItemData, index: number) => TemplateResult;
+/**
+ * Dataset icon interface matching the Angular component
+ */
+export interface DatasetIcon {
+    subtype: string;
+    account?: {
+        plugin?: {
+            thumbnails?: {
+                url: string;
+                size: string;
+            }[];
+        };
+    };
+}
 export type { ElementSize, Placement } from '@luzmo/lucero';
 export interface Dataset {
     id: string;

package/angular/index.ts

@@ -2,6 +2,7 @@ import { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 import { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 import { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 import { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+import { DatasetIconComponent } from './components/dataset-icon.component';
 import { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 import { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 import { DisplaySettingsComponent } from './components/display-settings.component';
@@ -36,6 +37,7 @@ export { AiChatMessageAssistantComponent } from './components/ai-chat-message-as
 export { AiChatMessageUserComponent } from './components/ai-chat-message-user.component';
 export { AiChatMessagesContainerComponent } from './components/ai-chat-messages-container.component';
 export { AiInteractionTextareaComponent } from './components/ai-interaction-textarea.component';
+export { DatasetIconComponent } from './components/dataset-icon.component';
 export { DatasetSelectorListComponent } from './components/dataset-selector-list.component';
 export { DatasetSelectorRowComponent } from './components/dataset-selector-row.component';
 export { DisplaySettingsComponent } from './components/display-settings.component';
@@ -71,6 +73,7 @@ export const LUZMO_COMPONENTS = [
   AiChatMessageUserComponent,
   AiChatMessagesContainerComponent,
   AiInteractionTextareaComponent,
+  DatasetIconComponent,
   DatasetSelectorListComponent,
   DatasetSelectorRowComponent,
   DisplaySettingsComponent,

package/angular/types.ts

@@ -91,6 +91,19 @@ export type GridItemRenderer = (
   index: number
 ) => TemplateResult;
 
+/**
+ * Dataset icon interface matching the Angular component
+ */
+
+export interface DatasetIcon {
+  subtype: string;
+  account?: {
+    plugin?: {
+      thumbnails?: { url: string; size: string }[];
+    };
+  };
+}
+
 export type { ElementSize, Placement } from '@luzmo/lucero';
 
 // Dataset interface for dataset selector components

package/components/ai-interaction-textarea/ai-interaction-textarea.d.ts

@@ -1,11 +1,13 @@
 import { LitElement, TemplateResult } from 'lit';
 import { Dataset } from '../../types';
-import '../dataset-selector-row/index';
+import '../dataset-selector-row';
 /**
  * @element luzmo-ai-interaction-textarea
  * @summary A textarea component for AI interaction with dataset selection
  * @fires prompt-submitted - Fired when a prompt is submitted with selected datasets
  *
+ * @attr {boolean} disabled - When true, disables the entire component (opacity 60%, no interactions)
+ *
  * @cssprop --luzmo-ai-interaction-textarea-background-color - Override for background color of the component (client customization)
  * @cssprop --ai-interaction-textarea-background-color - Background color of the component
  * @cssprop --ai-interaction-textarea-border-color - Border color of the component
@@ -63,6 +65,10 @@ export declare class LuzmoAiInteractionTextarea extends LitElement {
      * When true, restricts results to public datasets (opendata parity)
      */
     flagOpendata: boolean;
+    /**
+     * When true, disables the entire component (sets opacity to 60% and prevents all interactions)
+     */
+    disabled: boolean;
     private _promptValue;
     private _isPromptValid;
     private get _buttonDisabled();

package/components/ai-interaction-textarea/index.cjs

@@ -17,34 +17,38 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@lit/localize"),u=require("@luzmo/icons"),l=require("lit"),i=require("lit/decorators.js");require("../dataset-selector-row/index.cjs");const m=":host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--luzmo-ai-interaction-textarea-background-color, var(--ai-interaction-textarea-background-color));border:1px solid var(--luzmo-ai-interaction-textarea-border-color, var(--ai-interaction-textarea-border-color));border-radius:var(--luzmo-ai-interaction-textarea-border-radius, var(--ai-interaction-textarea-border-radius));padding:var(--luzmo-ai-interaction-textarea-padding, var(--ai-interaction-textarea-padding));gap:var(--luzmo-ai-interaction-textarea-gap, var(--ai-interaction-textarea-gap));font-family:var(--luzmo-ai-interaction-textarea-font-family, var(--ai-interaction-textarea-font-family));font-size:var(--luzmo-ai-interaction-textarea-font-size, var(--ai-interaction-textarea-font-size))}:host:has(textarea:focus){border-color:var(--luzmo-ai-interaction-textarea-focus-border-color, var(--ai-interaction-textarea-focus-border-color));box-shadow:var(--luzmo-ai-interaction-textarea-focus-box-shadow, var(--ai-interaction-textarea-focus-box-shadow))}:host textarea{background-color:var(--luzmo-ai-interaction-textarea-textarea-background, var(--ai-interaction-textarea-textarea-background));border:none;resize:none;outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;vertical-align:middle;padding:0;min-height:3rem;color:var(--luzmo-ai-interaction-textarea-textarea-color, var(--ai-interaction-textarea-textarea-color));font-family:var(--luzmo-ai-interaction-textarea-font-family, var(--ai-interaction-textarea-font-family));font-size:var(--luzmo-ai-interaction-textarea-font-size, var(--ai-interaction-textarea-font-size));line-height:1.5}:host textarea::placeholder{color:var(--luzmo-ai-interaction-textarea-textarea-placeholder-color, var(--ai-interaction-textarea-textarea-placeholder-color))}:host .button-container{text-align:var(--luzmo-ai-interaction-textarea-button-container-text-align, var(--ai-interaction-textarea-button-container-text-align))}:host .button-container button{padding:var(--luzmo-ai-interaction-textarea-button-padding, var(--ai-interaction-textarea-button-padding));min-width:var(--luzmo-ai-interaction-textarea-button-min-width, var(--ai-interaction-textarea-button-min-width));min-height:var(--luzmo-ai-interaction-textarea-button-min-height, var(--ai-interaction-textarea-button-min-height));border:none;border-radius:var(--luzmo-ai-interaction-textarea-button-border-radius, var(--ai-interaction-textarea-button-border-radius));font-size:var(--luzmo-ai-interaction-textarea-button-font-size, var(--ai-interaction-textarea-button-font-size));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}:host .button-container button:disabled{opacity:.6;cursor:not-allowed}:host .button-container button.disabled{opacity:.6;cursor:not-allowed}:host .button-container button svg{display:flex;align-items:center;justify-content:center}:host .button-container button.btn-primary{background-color:var(--luzmo-ai-interaction-textarea-button-background-color, var(--ai-interaction-textarea-button-background-color));color:var(--luzmo-ai-interaction-textarea-button-color, var(--ai-interaction-textarea-button-color))}:host .button-container button.btn-primary:hover:not(:disabled):not(.disabled){background-color:var(--luzmo-ai-interaction-textarea-button-background-color-hover, var(--ai-interaction-textarea-button-background-color-hover))}:host .button-container button.btn-primary:disabled,:host .button-container button.btn-primary.disabled{background-color:var(--luzmo-ai-interaction-textarea-button-background-color-disabled, var(--ai-interaction-textarea-button-background-color-disabled));opacity:.6}:host{--ai-interaction-textarea-background-color: var(--luzmo-background-color-alt-2);--ai-interaction-textarea-border-color: var(--luzmo-border-color);--ai-interaction-textarea-border-radius: .5rem;--ai-interaction-textarea-padding: .75rem;--ai-interaction-textarea-gap: 1rem;--ai-interaction-textarea-focus-border-color: var(--luzmo-primary);--ai-interaction-textarea-focus-box-shadow: 0 0 1rem 0 var(--luzmo-primary-50);--ai-interaction-textarea-font-family: var(--luzmo-font-family);--ai-interaction-textarea-font-size: .875rem;--ai-interaction-textarea-textarea-background: transparent;--ai-interaction-textarea-textarea-color: var(--luzmo-font-color);--ai-interaction-textarea-textarea-placeholder-color: var(--luzmo-font-color-extra-dimmed);--ai-interaction-textarea-button-container-text-align: right;--ai-interaction-textarea-button-padding: 0;--ai-interaction-textarea-button-min-width: 2rem;--ai-interaction-textarea-button-min-height: 1.875rem;--ai-interaction-textarea-button-border-radius: .5rem;--ai-interaction-textarea-button-font-size: 1rem;--ai-interaction-textarea-button-background-color: var(--luzmo-primary);--ai-interaction-textarea-button-background-color-hover: var(--luzmo-primary-hover);--ai-interaction-textarea-button-background-color-disabled: var(--luzmo-primary);--ai-interaction-textarea-button-color: var(--luzmo-primary-inverse-color)}";var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(n,t,a,e)=>{for(var o=e>1?void 0:e?b(t,a):t,c=n.length-1,s;c>=0;c--)(s=n[c])&&(o=(e?s(t,a,o):s(o))||o);return e&&o&&p(t,a,o),o};exports.LuzmoAiInteractionTextarea=class extends l.LitElement{constructor(){super(...arguments),this.placeholder="Type your prompt here...",this.selectedDatasets=[],this.authKey="",this.authToken="",this.apiUrl="https://api.luzmo.com",this.appServer="https://app.luzmo.com",this.flagOpendata=!1,this._promptValue="",this._isPromptValid=!1}get _buttonDisabled(){return this.selectedDatasets.length===0||!this._isPromptValid}_autoResizeTextarea(t){t.style.height="auto";const a=2*1.5*16,e=8*1.5*16,o=Math.max(a,Math.min(t.scrollHeight,e));t.style.height=`${o}px`}_handlePromptInput(t){const a=t.target;this._promptValue=a.value,this._isPromptValid=a.value.trim().length>0,this._autoResizeTextarea(a),a.scrollTo({top:a.scrollHeight})}_handleKeyDown(t){t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this._submitPrompt())}_submitPrompt(){if(this._buttonDisabled)return;const t=this._promptValue.trim();this.dispatchEvent(new CustomEvent("prompt-submitted",{detail:{prompt:t,selectedDatasets:this.selectedDatasets},bubbles:!0,composed:!0}))}_handleDatasetSelected(t){const a=t.detail;this.selectedDatasets.some(e=>e.id===a.id)||(this.selectedDatasets=[...this.selectedDatasets,a])}_handleDatasetRemoved(t){const a=t.detail;this.selectedDatasets=this.selectedDatasets.filter(e=>e.id!==a.id)}firstUpdated(){const t=this.shadowRoot?.querySelector("textarea");t&&this._autoResizeTextarea(t)}render(){return l.html`
-      <luzmo-dataset-selector-row
-        .selectedDatasets=${this.selectedDatasets}
-        auth-key=${this.authKey}
-        auth-token=${this.authToken}
-        api-url=${this.apiUrl}
-        app-server=${this.appServer}
-        ?flag-opendata=${this.flagOpendata}
-        @dataset-selected=${this._handleDatasetSelected}
-        @dataset-removed=${this._handleDatasetRemoved}
-      ></luzmo-dataset-selector-row>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@lit/localize"),u=require("@luzmo/icons"),l=require("lit"),o=require("lit/decorators.js"),p=require("lit/directives/class-map.js");require("../dataset-selector-row/index.cjs");const m=":host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--luzmo-ai-interaction-textarea-background-color, var(--ai-interaction-textarea-background-color));border:1px solid var(--luzmo-ai-interaction-textarea-border-color, var(--ai-interaction-textarea-border-color));border-radius:var(--luzmo-ai-interaction-textarea-border-radius, var(--ai-interaction-textarea-border-radius));padding:var(--luzmo-ai-interaction-textarea-padding, var(--ai-interaction-textarea-padding));gap:var(--luzmo-ai-interaction-textarea-gap, var(--ai-interaction-textarea-gap));font-family:var(--luzmo-ai-interaction-textarea-font-family, var(--ai-interaction-textarea-font-family));font-size:var(--luzmo-ai-interaction-textarea-font-size, var(--ai-interaction-textarea-font-size))}:host:has(textarea:focus){border-color:var(--luzmo-ai-interaction-textarea-focus-border-color, var(--ai-interaction-textarea-focus-border-color));box-shadow:var(--luzmo-ai-interaction-textarea-focus-box-shadow, var(--ai-interaction-textarea-focus-box-shadow))}:host .content-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-ai-interaction-textarea-gap, var(--ai-interaction-textarea-gap))}:host .content-wrapper.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}:host .content-wrapper.disabled *{pointer-events:none}:host textarea{background-color:var(--luzmo-ai-interaction-textarea-textarea-background, var(--ai-interaction-textarea-textarea-background));border:none;resize:none;outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;vertical-align:middle;padding:0;min-height:3rem;color:var(--luzmo-ai-interaction-textarea-textarea-color, var(--ai-interaction-textarea-textarea-color));font-family:var(--luzmo-ai-interaction-textarea-font-family, var(--ai-interaction-textarea-font-family));font-size:var(--luzmo-ai-interaction-textarea-font-size, var(--ai-interaction-textarea-font-size));line-height:1.5}:host textarea::placeholder{color:var(--luzmo-ai-interaction-textarea-textarea-placeholder-color, var(--ai-interaction-textarea-textarea-placeholder-color))}:host .button-container{text-align:var(--luzmo-ai-interaction-textarea-button-container-text-align, var(--ai-interaction-textarea-button-container-text-align))}:host .button-container button{padding:var(--luzmo-ai-interaction-textarea-button-padding, var(--ai-interaction-textarea-button-padding));min-width:var(--luzmo-ai-interaction-textarea-button-min-width, var(--ai-interaction-textarea-button-min-width));min-height:var(--luzmo-ai-interaction-textarea-button-min-height, var(--ai-interaction-textarea-button-min-height));border:none;border-radius:var(--luzmo-ai-interaction-textarea-button-border-radius, var(--ai-interaction-textarea-button-border-radius));font-size:var(--luzmo-ai-interaction-textarea-button-font-size, var(--ai-interaction-textarea-button-font-size));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}:host .button-container button:disabled{opacity:.6;cursor:not-allowed}:host .button-container button.disabled{opacity:.6;cursor:not-allowed}:host .button-container button svg{display:flex;align-items:center;justify-content:center}:host .button-container button.btn-primary{background-color:var(--luzmo-ai-interaction-textarea-button-background-color, var(--ai-interaction-textarea-button-background-color));color:var(--luzmo-ai-interaction-textarea-button-color, var(--ai-interaction-textarea-button-color))}:host .button-container button.btn-primary:hover:not(:disabled):not(.disabled){background-color:var(--luzmo-ai-interaction-textarea-button-background-color-hover, var(--ai-interaction-textarea-button-background-color-hover))}:host .button-container button.btn-primary:disabled,:host .button-container button.btn-primary.disabled{background-color:var(--luzmo-ai-interaction-textarea-button-background-color-disabled, var(--ai-interaction-textarea-button-background-color-disabled));opacity:.6}:host{--ai-interaction-textarea-background-color: var(--luzmo-background-color-alt-2);--ai-interaction-textarea-border-color: var(--luzmo-border-color);--ai-interaction-textarea-border-radius: .5rem;--ai-interaction-textarea-padding: .75rem;--ai-interaction-textarea-gap: 1rem;--ai-interaction-textarea-focus-border-color: var(--luzmo-primary);--ai-interaction-textarea-focus-box-shadow: 0 0 1rem 0 var(--luzmo-primary-50);--ai-interaction-textarea-font-family: var(--luzmo-font-family);--ai-interaction-textarea-font-size: .875rem;--ai-interaction-textarea-textarea-background: transparent;--ai-interaction-textarea-textarea-color: var(--luzmo-font-color);--ai-interaction-textarea-textarea-placeholder-color: var(--luzmo-font-color-extra-dimmed);--ai-interaction-textarea-button-container-text-align: right;--ai-interaction-textarea-button-padding: 0;--ai-interaction-textarea-button-min-width: 2rem;--ai-interaction-textarea-button-min-height: 1.875rem;--ai-interaction-textarea-button-border-radius: .5rem;--ai-interaction-textarea-button-font-size: 1rem;--ai-interaction-textarea-button-background-color: var(--luzmo-primary);--ai-interaction-textarea-button-background-color-hover: var(--luzmo-primary-hover);--ai-interaction-textarea-button-background-color-disabled: var(--luzmo-primary);--ai-interaction-textarea-button-color: var(--luzmo-primary-inverse-color)}";var b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,e=(n,t,a,r)=>{for(var i=r>1?void 0:r?h(t,a):t,s=n.length-1,c;s>=0;s--)(c=n[s])&&(i=(r?c(t,a,i):c(i))||i);return r&&i&&b(t,a,i),i};exports.LuzmoAiInteractionTextarea=class extends l.LitElement{constructor(){super(...arguments),this.placeholder="Type your prompt here...",this.selectedDatasets=[],this.authKey="",this.authToken="",this.apiUrl="https://api.luzmo.com",this.appServer="https://app.luzmo.com",this.flagOpendata=!1,this.disabled=!1,this._promptValue="",this._isPromptValid=!1}get _buttonDisabled(){return this.disabled||this.selectedDatasets.length===0||!this._isPromptValid}_autoResizeTextarea(t){t.style.height="auto";const a=2*1.5*16,r=8*1.5*16,i=Math.max(a,Math.min(t.scrollHeight,r));t.style.height=`${i}px`}_handlePromptInput(t){const a=t.target;this._promptValue=a.value,this._isPromptValid=a.value.trim().length>0,this._autoResizeTextarea(a),a.scrollTo({top:a.scrollHeight})}_handleKeyDown(t){t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this._submitPrompt())}_submitPrompt(){if(this._buttonDisabled)return;const t=this._promptValue.trim();this.dispatchEvent(new CustomEvent("prompt-submitted",{detail:{prompt:t,selectedDatasets:this.selectedDatasets},bubbles:!0,composed:!0}))}_handleDatasetSelected(t){const a=t.detail;this.selectedDatasets.some(r=>r.id===a.id)||(this.selectedDatasets=[...this.selectedDatasets,a])}_handleDatasetRemoved(t){const a=t.detail;this.selectedDatasets=this.selectedDatasets.filter(r=>r.id!==a.id)}firstUpdated(){const t=this.shadowRoot?.querySelector("textarea");t&&this._autoResizeTextarea(t)}render(){const t={"content-wrapper":!0,disabled:this.disabled};return l.html`
+      <div class=${p.classMap(t)}>
+        <luzmo-dataset-selector-row
+          .selectedDatasets=${this.selectedDatasets}
+          auth-key=${this.authKey}
+          auth-token=${this.authToken}
+          api-url=${this.apiUrl}
+          app-server=${this.appServer}
+          ?flag-opendata=${this.flagOpendata}
+          ?disabled=${this.disabled}
+          @dataset-selected=${this._handleDatasetSelected}
+          @dataset-removed=${this._handleDatasetRemoved}
+        ></luzmo-dataset-selector-row>
 
-      <textarea
-        autofocus
-        .placeholder=${this.placeholder}
-        .value=${this._promptValue}
-        @input=${this._handlePromptInput}
-        @keydown=${this._handleKeyDown}
-        rows="2"
-      ></textarea>
+        <textarea
+          ?autofocus=${!this.disabled}
+          ?disabled=${this.disabled}
+          .placeholder=${this.placeholder}
+          .value=${this._promptValue}
+          @input=${this._handlePromptInput}
+          @keydown=${this._handleKeyDown}
+          rows="2"
+        ></textarea>
 
-      <div class="button-container">
-        <button
-          class="btn btn-primary"
-          ?disabled=${this._buttonDisabled}
-          @click=${this._submitPrompt}
-        >
-          ${u.luzmoIcon(u.luzmoArrowRight)}
-        </button>
+        <div class="button-container">
+          <button
+            class="btn btn-primary"
+            ?disabled=${this._buttonDisabled}
+            @click=${this._submitPrompt}
+          >
+            ${u.luzmoIcon(u.luzmoArrowRight)}
+          </button>
+        </div>
       </div>
-    `}};exports.LuzmoAiInteractionTextarea.styles=l.unsafeCSS(m);exports.LuzmoAiInteractionTextarea.tagName="luzmo-ai-interaction-textarea";r([i.property({type:String})],exports.LuzmoAiInteractionTextarea.prototype,"placeholder",2);r([i.property({type:Array})],exports.LuzmoAiInteractionTextarea.prototype,"selectedDatasets",2);r([i.property({type:String,attribute:"auth-key"})],exports.LuzmoAiInteractionTextarea.prototype,"authKey",2);r([i.property({type:String,attribute:"auth-token"})],exports.LuzmoAiInteractionTextarea.prototype,"authToken",2);r([i.property({type:String,attribute:"api-url"})],exports.LuzmoAiInteractionTextarea.prototype,"apiUrl",2);r([i.property({type:String,attribute:"app-server"})],exports.LuzmoAiInteractionTextarea.prototype,"appServer",2);r([i.property({type:Boolean,attribute:"flag-opendata"})],exports.LuzmoAiInteractionTextarea.prototype,"flagOpendata",2);r([i.state()],exports.LuzmoAiInteractionTextarea.prototype,"_promptValue",2);r([i.state()],exports.LuzmoAiInteractionTextarea.prototype,"_isPromptValid",2);exports.LuzmoAiInteractionTextarea=r([d.localized()],exports.LuzmoAiInteractionTextarea);customElements.get("luzmo-ai-interaction-textarea")||customElements.define("luzmo-ai-interaction-textarea",exports.LuzmoAiInteractionTextarea);
+    `}};exports.LuzmoAiInteractionTextarea.styles=l.unsafeCSS(m);exports.LuzmoAiInteractionTextarea.tagName="luzmo-ai-interaction-textarea";e([o.property({type:String})],exports.LuzmoAiInteractionTextarea.prototype,"placeholder",2);e([o.property({type:Array})],exports.LuzmoAiInteractionTextarea.prototype,"selectedDatasets",2);e([o.property({type:String,attribute:"auth-key"})],exports.LuzmoAiInteractionTextarea.prototype,"authKey",2);e([o.property({type:String,attribute:"auth-token"})],exports.LuzmoAiInteractionTextarea.prototype,"authToken",2);e([o.property({type:String,attribute:"api-url"})],exports.LuzmoAiInteractionTextarea.prototype,"apiUrl",2);e([o.property({type:String,attribute:"app-server"})],exports.LuzmoAiInteractionTextarea.prototype,"appServer",2);e([o.property({type:Boolean,attribute:"flag-opendata"})],exports.LuzmoAiInteractionTextarea.prototype,"flagOpendata",2);e([o.property({type:Boolean,reflect:!0,attribute:"disabled"})],exports.LuzmoAiInteractionTextarea.prototype,"disabled",2);e([o.state()],exports.LuzmoAiInteractionTextarea.prototype,"_promptValue",2);e([o.state()],exports.LuzmoAiInteractionTextarea.prototype,"_isPromptValid",2);exports.LuzmoAiInteractionTextarea=e([d.localized()],exports.LuzmoAiInteractionTextarea);customElements.get("luzmo-ai-interaction-textarea")||customElements.define("luzmo-ai-interaction-textarea",exports.LuzmoAiInteractionTextarea);