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

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

@@ -1,283 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,256 +0,0 @@
-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;