@luzmo/analytics-components-kit 1.0.8-beta.4 → 1.0.8-beta.6

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

@@ -0,0 +1,283 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/ai-interaction-textarea';
+import type { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaHostElement, Agent, Dataset, PromptBoxFileIcons, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+export type { Agent, Dataset, PromptBoxAttachment, PromptBoxFileIcons, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+
+@Component({
+  selector: 'luzmo-ai-interaction-textarea',
+  exportAs: 'luzmoAiInteractionTextarea',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-ai-interaction-textarea>
+ */
+export class LuzmoAiInteractionTextarea implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoAiInteractionTextareaHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoAiInteractionTextareaHostElement {
+    return this.host;
+  }
+
+  /** Placeholder text for the textarea */
+  @Input({ alias: 'placeholder' })
+  placeholder?: string;
+
+  /** Array of selected datasets */
+  @Input({ alias: 'selectedDatasets' })
+  selectedDatasets?: Dataset[];
+
+  /** Auth key for DataBroker authentication */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** Auth token for DataBroker authentication */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** API URL for DataBroker */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** The URL of the app server for thumbnails and assets */
+  @Input({ alias: 'appServer' })
+  appServer?: string;
+
+  /** When true, shows public datasets alongside the user's other datasets. */
+  @Input({ alias: 'includePublicDatasets', transform: booleanAttribute })
+  includePublicDatasets?: boolean;
+
+  /** Alias for includePublicDatasets. */
+  @Input({ alias: 'flagOpendata', transform: booleanAttribute })
+  flagOpendata?: boolean;
+
+  /** When true, disables the entire component (opacity 60%, no interactions) */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** When true, starts in compact single-line mode and auto-expands as needed */
+  @Input({ alias: 'singleLine', transform: booleanAttribute })
+  singleLine?: boolean;
+
+  /** When true, hides the "+ Add dataset" button */
+  @Input({ alias: 'hideDatasetButton', transform: booleanAttribute })
+  hideDatasetButton?: boolean;
+
+  /** When true, hides dataset-specific icons in selector tags and @ mention dataset headers */
+  @Input({ alias: 'hideDatasetIcons', transform: booleanAttribute })
+  hideDatasetIcons?: boolean;
+
+  /** Maximum number of selected dataset tags shown before the overflow control. */
+  @Input({ alias: 'maxVisibleSelectedDatasets' })
+  maxVisibleSelectedDatasets?: number;
+
+  /** The saved Agent the prompt is scoped to, or null */
+  @Input({ alias: 'selectedAgent' })
+  selectedAgent?: Agent | null;
+
+  /** When true, hides the Agents section in the add dropdown and ignores `selectedAgent` for `require-dataset` and `prompt-submitted` */
+  @Input({ alias: 'hideAgents', transform: booleanAttribute })
+  hideAgents?: boolean;
+
+  /** When true, disables the "+ Add dataset" button and disables dataset pill removal */
+  @Input({ alias: 'disableDatasetModification', transform: booleanAttribute })
+  disableDatasetModification?: boolean;
+
+  /** When true, hides the dataset row entirely */
+  @Input({ alias: 'hideSelectedDatasets', transform: booleanAttribute })
+  hideSelectedDatasets?: boolean;
+
+  /** When true, disables @ trigger mentions completely */
+  @Input({ alias: 'disableColumnMentions', transform: booleanAttribute })
+  disableColumnMentions?: boolean;
+
+  /** When true, shows a spinning loader icon instead of the submit arrow */
+  @Input({ alias: 'isGenerating', transform: booleanAttribute })
+  isGenerating?: boolean;
+
+  /** When true, shows a stop control while `is-generating` is true */
+  @Input({ alias: 'stoppable', transform: booleanAttribute })
+  stoppable?: boolean;
+
+  /** The current value of the textarea (can be controlled from parent to clear or set text) */
+  @Input({ alias: 'value' })
+  value?: string;
+
+  /** When true, retains the input value after submitting a prompt (default: false) When false (default), clears the textarea value after submission */
+  @Input({ alias: 'retainOnSubmit', transform: booleanAttribute })
+  retainOnSubmit?: boolean;
+
+  /** When true, a selected agent or at least one selected dataset is required before the prompt can be submitted */
+  @Input({ alias: 'requireDataset', transform: booleanAttribute })
+  requireDataset?: boolean;
+
+  /** When true, enables image attachments via paste or the file picker. */
+  @Input({ alias: 'allowImages', transform: booleanAttribute })
+  allowImages?: boolean;
+
+  /** When true, shows Lucero's mic control; the `POST /aidictation` transcript is inserted, never auto-sent. */
+  @Input({ alias: 'allowVoiceInput', transform: booleanAttribute })
+  allowVoiceInput?: boolean;
+
+  /** Accepted attachment MIME types or extensions. */
+  @Input({ alias: 'acceptedFileTypes' })
+  acceptedFileTypes?: string[];
+
+  /** API version for built-in `POST /upload` and `POST /aidictation` (default `0.1.0`). */
+  @Input({ alias: 'apiVersion' })
+  apiVersion?: string;
+
+  /** Optional override for eager image upload on attach; return one signed URL per file */
+  @Input({ alias: 'uploadAttachments' })
+  uploadAttachments?: unknown;
+
+  /** Custom icons for non-image attachment tiles, keyed by extension. */
+  @Input({ alias: 'fileIcons' })
+  fileIcons?: PromptBoxFileIcons;
+
+  /** Fired when a prompt is submitted with selected datasets */
+  readonly promptSubmitted = output<CustomEvent<PromptSubmittedEventDetail>>({ alias: 'promptSubmitted' });
+
+  /** Fired when a running prompt is stopped */
+  readonly promptStopped = output<CustomEvent<void>>({ alias: 'promptStopped' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'placeholder':
+          this.setHostProperty('placeholder', changes['placeholder'].currentValue);
+          break;
+        case 'selectedDatasets':
+          this.setHostProperty('selectedDatasets', changes['selectedDatasets'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'appServer':
+          this.setHostProperty('appServer', changes['appServer'].currentValue);
+          break;
+        case 'includePublicDatasets':
+          this.setHostProperty('includePublicDatasets', changes['includePublicDatasets'].currentValue);
+          break;
+        case 'flagOpendata':
+          this.setHostProperty('flagOpendata', changes['flagOpendata'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'singleLine':
+          this.setHostProperty('singleLine', changes['singleLine'].currentValue);
+          break;
+        case 'hideDatasetButton':
+          this.setHostProperty('hideDatasetButton', changes['hideDatasetButton'].currentValue);
+          break;
+        case 'hideDatasetIcons':
+          this.setHostProperty('hideDatasetIcons', changes['hideDatasetIcons'].currentValue);
+          break;
+        case 'maxVisibleSelectedDatasets':
+          this.setHostProperty('maxVisibleSelectedDatasets', changes['maxVisibleSelectedDatasets'].currentValue);
+          break;
+        case 'selectedAgent':
+          this.setHostProperty('selectedAgent', changes['selectedAgent'].currentValue);
+          break;
+        case 'hideAgents':
+          this.setHostProperty('hideAgents', changes['hideAgents'].currentValue);
+          break;
+        case 'disableDatasetModification':
+          this.setHostProperty('disableDatasetModification', changes['disableDatasetModification'].currentValue);
+          break;
+        case 'hideSelectedDatasets':
+          this.setHostProperty('hideSelectedDatasets', changes['hideSelectedDatasets'].currentValue);
+          break;
+        case 'disableColumnMentions':
+          this.setHostProperty('disableColumnMentions', changes['disableColumnMentions'].currentValue);
+          break;
+        case 'isGenerating':
+          this.setHostProperty('isGenerating', changes['isGenerating'].currentValue);
+          break;
+        case 'stoppable':
+          this.setHostProperty('stoppable', changes['stoppable'].currentValue);
+          break;
+        case 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'retainOnSubmit':
+          this.setHostProperty('retainOnSubmit', changes['retainOnSubmit'].currentValue);
+          break;
+        case 'requireDataset':
+          this.setHostProperty('requireDataset', changes['requireDataset'].currentValue);
+          break;
+        case 'allowImages':
+          this.setHostProperty('allowImages', changes['allowImages'].currentValue);
+          break;
+        case 'allowVoiceInput':
+          this.setHostProperty('allowVoiceInput', changes['allowVoiceInput'].currentValue);
+          break;
+        case 'acceptedFileTypes':
+          this.setHostProperty('acceptedFileTypes', changes['acceptedFileTypes'].currentValue);
+          break;
+        case 'apiVersion':
+          this.setHostProperty('apiVersion', changes['apiVersion'].currentValue);
+          break;
+        case 'uploadAttachments':
+          this.setHostProperty('uploadAttachments', changes['uploadAttachments'].currentValue);
+          break;
+        case 'fileIcons':
+          this.setHostProperty('fileIcons', changes['fileIcons'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'prompt-submitted', (event: Event) => {
+        const typed = event as CustomEvent<PromptSubmittedEventDetail>;
+        this.promptSubmitted.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'prompt-stopped', (event: Event) => {
+        const typed = event as CustomEvent<void>;
+        this.promptStopped.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoAiInteractionTextarea */
+export type LuzmoAiInteractionTextareaElement = LuzmoAiInteractionTextareaHostElement;

package/angular/components/data-field-level.ts

@@ -0,0 +1,130 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field-level';
+import type { LuzmoDataFieldLevel as LuzmoDataFieldLevelHostElement, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
+export type { DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
+import type { DatasetDataField } from '@luzmo/analytics-components-kit/types';
+
+@Component({
+  selector: 'luzmo-data-field-level',
+  exportAs: 'luzmoDataFieldLevel',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-data-field-level>
+ */
+export class LuzmoDataFieldLevel implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDataFieldLevelHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoDataFieldLevelHostElement {
+    return this.host;
+  }
+
+  /** Visual treatment of the level: `highlight` to emphasize it, or `normal`. */
+  @Input({ alias: 'variant' })
+  variant?: 'highlight' | 'normal';
+
+  /** Hides the data type icon shown before the level label. */
+  @Input({ alias: 'hideTypeIcon', transform: booleanAttribute })
+  hideTypeIcon?: boolean;
+
+  /** Whether this is rendered as a nested sublevel row (indented under a parent field). */
+  @Input({ alias: 'sublevel', transform: booleanAttribute })
+  sublevel?: boolean;
+
+  /** The language in which to display the level labels. */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** Whether the level is disabled (non-interactive and visually muted). */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** The dataset data field descriptor (column or formula field) this level represents. */
+  @Input({ alias: 'data' })
+  data?: DatasetDataField;
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Announces that the data field has been dropped */
+  readonly luzmoDataFieldDropped = output<CustomEvent<DataFieldDroppedEventDetail>>({ alias: 'luzmoDataFieldDropped' });
+
+  /** Announces that the drag is started on the data field */
+  readonly luzmoDataFieldDragStarted = output<CustomEvent<DataFieldDragStartedEventDetail>>({ alias: 'luzmoDataFieldDragStarted' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'variant':
+          this.setHostProperty('variant', changes['variant'].currentValue);
+          break;
+        case 'hideTypeIcon':
+          this.setHostProperty('hideTypeIcon', changes['hideTypeIcon'].currentValue);
+          break;
+        case 'sublevel':
+          this.setHostProperty('sublevel', changes['sublevel'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'data':
+          this.setHostProperty('data', changes['data'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-data-field-dropped', (event: Event) => {
+        const typed = event as CustomEvent<DataFieldDroppedEventDetail>;
+        this.luzmoDataFieldDropped.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-data-field-drag-started', (event: Event) => {
+        const typed = event as CustomEvent<DataFieldDragStartedEventDetail>;
+        this.luzmoDataFieldDragStarted.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoDataFieldLevel */
+export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelHostElement;

package/angular/components/data-field-panel.ts

@@ -0,0 +1,256 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field-panel';
+import type { LuzmoDataFieldPanel as LuzmoDataFieldPanelHostElement, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail, DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
+export type { DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail, DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
+
+@Component({
+  selector: 'luzmo-data-field-panel',
+  exportAs: 'luzmoDataFieldPanel',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * A panel component that displays a list of data fields from a dataset.
+ * Optionally includes a dataset picker dropdown to switch between datasets.
+ * 
+ * Data can be provided in two ways:
+ * 1. `datasetsDataFields` - Direct data, takes preference when provided
+ * 2. `datasetIds` + auth props - Fetches data automatically using the Luzmo API
+ */
+export class LuzmoDataFieldPanel implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDataFieldPanelHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoDataFieldPanelHostElement {
+    return this.host;
+  }
+
+  /** Array of dataset IDs to fetch and display. Used as an alternative to datasetsDataFields - when provided (and datasetsDataFields is empty), the component will fetch the dataset metadata automatically. Requires apiUrl, authKey, and authToken to be set. */
+  @Input({ alias: 'datasetIds' })
+  datasetIds?: string[];
+
+  /** The datasets and their data fields (columns and formulas) to display. Takes preference over datasetIds when provided. */
+  @Input({ alias: 'datasetsDataFields' })
+  datasetsDataFields?: DatasetDataFields[];
+
+  /** The currently selected dataset ID. If not provided, defaults to the first available dataset. */
+  @Input({ alias: 'selectedDatasetId' })
+  selectedDatasetId?: string;
+
+  /** Whether to show the dataset picker dropdown. */
+  @Input({ alias: 'datasetPicker', transform: booleanAttribute })
+  datasetPicker?: boolean;
+
+  /** Whether the panel is disabled. */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** Whether the panel is in a pending/loading state. When true, shows a loading indicator instead of data fields. */
+  @Input({ alias: 'pending', transform: booleanAttribute })
+  pending?: boolean;
+
+  /** Visual variant for the draggable items. */
+  @Input({ alias: 'dataFieldVariant' })
+  dataFieldVariant?: 'highlight' | 'normal';
+
+  /** Whether the search input should use quiet styling. */
+  @Input({ alias: 'searchQuiet', transform: booleanAttribute })
+  searchQuiet?: boolean;
+
+  /** Whether to hide the type icons on data fields. */
+  @Input({ alias: 'hideTypeIcon', transform: booleanAttribute })
+  hideTypeIcon?: boolean;
+
+  /** Whether to hide the sublevels (datetime levels, hierarchy levels) on data fields. */
+  @Input({ alias: 'hideSublevels', transform: booleanAttribute })
+  hideSublevels?: boolean;
+
+  /** Placeholder text for the dataset picker. */
+  @Input({ alias: 'datasetPickerPlaceholder' })
+  datasetPickerPlaceholder?: string;
+
+  /** The Luzmo API URL. Required when using datasetIds. */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** Authentication key for the Luzmo API. Required when using datasetIds. */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** Authentication token for the Luzmo API. Required when using datasetIds. */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** The search input container */
+  @Input({ alias: 'search' })
+  search?: 'on' | 'off' | 'auto';
+
+  /** Placeholder text for the search input. */
+  @Input({ alias: 'searchPlaceholder' })
+  searchPlaceholder?: string;
+
+  /** Threshold for auto-showing search (number of items). */
+  @Input({ alias: 'searchThreshold' })
+  searchThreshold?: number;
+
+  /** The main container element */
+  @Input({ alias: 'container' })
+  container?: string;
+
+  /** The scrollable list of data fields */
+  @Input({ alias: 'dataFieldsList' })
+  datafieldslist?: string;
+
+  /** The pending state container with progress circle */
+  @Input({ alias: 'pendingState' })
+  pendingstate?: string;
+
+  /** The empty state container when no data fields are available */
+  @Input({ alias: 'emptyState' })
+  emptystate?: string;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Announces that the selected dataset has changed */
+  readonly luzmoDatasetChanged = output<CustomEvent<DatasetChangedEventDetail>>({ alias: 'luzmoDatasetChanged' });
+
+  /** Announces that a data field has been dropped */
+  readonly luzmoDataFieldDropped = output<CustomEvent<DataFieldDroppedEventDetail>>({ alias: 'luzmoDataFieldDropped' });
+
+  /** Announces that a drag has started on a data field */
+  readonly luzmoDataFieldDragStarted = output<CustomEvent<DataFieldDragStartedEventDetail>>({ alias: 'luzmoDataFieldDragStarted' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'datasetIds':
+          this.setHostProperty('datasetIds', changes['datasetIds'].currentValue);
+          break;
+        case 'datasetsDataFields':
+          this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].currentValue);
+          break;
+        case 'selectedDatasetId':
+          this.setHostProperty('selectedDatasetId', changes['selectedDatasetId'].currentValue);
+          break;
+        case 'datasetPicker':
+          this.setHostProperty('datasetPicker', changes['datasetPicker'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'pending':
+          this.setHostProperty('pending', changes['pending'].currentValue);
+          break;
+        case 'dataFieldVariant':
+          this.setHostProperty('dataFieldVariant', changes['dataFieldVariant'].currentValue);
+          break;
+        case 'searchQuiet':
+          this.setHostProperty('searchQuiet', changes['searchQuiet'].currentValue);
+          break;
+        case 'hideTypeIcon':
+          this.setHostProperty('hideTypeIcon', changes['hideTypeIcon'].currentValue);
+          break;
+        case 'hideSublevels':
+          this.setHostProperty('hideSublevels', changes['hideSublevels'].currentValue);
+          break;
+        case 'datasetPickerPlaceholder':
+          this.setHostProperty('datasetPickerPlaceholder', changes['datasetPickerPlaceholder'].currentValue);
+          break;
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'search':
+          this.setHostProperty('search', changes['search'].currentValue);
+          break;
+        case 'searchPlaceholder':
+          this.setHostProperty('searchPlaceholder', changes['searchPlaceholder'].currentValue);
+          break;
+        case 'searchThreshold':
+          this.setHostProperty('searchThreshold', changes['searchThreshold'].currentValue);
+          break;
+        case 'container':
+          this.setHostProperty('container', changes['container'].currentValue);
+          break;
+        case 'datafieldslist':
+          this.setHostProperty('data-fields-list', changes['datafieldslist'].currentValue);
+          break;
+        case 'pendingstate':
+          this.setHostProperty('pending-state', changes['pendingstate'].currentValue);
+          break;
+        case 'emptystate':
+          this.setHostProperty('empty-state', changes['emptystate'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-dataset-changed', (event: Event) => {
+        const typed = event as CustomEvent<DatasetChangedEventDetail>;
+        this.luzmoDatasetChanged.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-data-field-dropped', (event: Event) => {
+        const typed = event as CustomEvent<DataFieldDroppedEventDetail>;
+        this.luzmoDataFieldDropped.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-data-field-drag-started', (event: Event) => {
+        const typed = event as CustomEvent<DataFieldDragStartedEventDetail>;
+        this.luzmoDataFieldDragStarted.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoDataFieldPanel */
+export type LuzmoDataFieldPanelElement = LuzmoDataFieldPanelHostElement;