@luzmo/analytics-components-kit 1.0.7 → 1.0.8-beta.2

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

@@ -1,212 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/data-fields-select';
-import type { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectHostElement, AdHocFormulaInput, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
-export type { AdHocFormulaFieldData, AdHocFormulaInput, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
-import type { DatasetFormulaMetadata, DatasetMetadata } from '@luzmo/analytics-components-kit/types';
-import type { Placement } from '@luzmo/lucero';
-
-@Component({
-  selector: 'luzmo-data-fields-select',
-  exportAs: 'luzmoDataFieldsSelect',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-data-fields-select>
- */
-export class LuzmoDataFieldsSelect implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoDataFieldsSelectHostElement>>(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(): LuzmoDataFieldsSelectHostElement {
-    return this.host;
-  }
-
-  /** The language to use for locale-aware formatting and labels */
-  @Input({ alias: 'contentLanguage' })
-  contentLanguage?: string;
-
-  /** The accessible label for the select (used for aria-label) */
-  @Input({ alias: 'label' })
-  label?: string;
-
-  /** Where to show icons */
-  @Input({ alias: 'icons' })
-  icons?: 'none' | 'menu-only' | 'all';
-
-  /** Whether datetime and hierarchy columns expand into selectable sublevels. Turn this off in contexts that address the column as a whole, so the column stays selectable by its own id. */
-  @Input({ alias: 'levels' })
-  levels?: 'on' | 'off';
-
-  /** Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item. */
-  @Input({ alias: 'allowEmpty', transform: booleanAttribute })
-  allowEmpty?: boolean;
-
-  /** The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label. */
-  @Input({ alias: 'placeholder' })
-  placeholder?: string;
-
-  /** Whether the picker allows single or multiple selections. */
-  @Input({ alias: 'selects' })
-  selects?: 'single' | 'multiple';
-
-  /** The IDs of the selected data fields. If not provided, the first item will be selected (when allowEmpty is false). */
-  @Input({ alias: 'value' })
-  value?: string[];
-
-  /** Whether the picker is in retrieving state (shows loading indicator) */
-  @Input({ alias: 'retrieving', transform: booleanAttribute })
-  retrieving?: boolean;
-
-  /** Whether the picker is invalid - eg. the dataFieldId is not found in the datasetsDataFields or query failed to fetch data */
-  @Input({ alias: 'invalid', transform: booleanAttribute })
-  invalid?: boolean;
-
-  /** Whether the picker is clearable */
-  @Input({ alias: 'clearable', transform: booleanAttribute })
-  clearable?: boolean;
-
-  /** Whether the picker is in pending state */
-  @Input({ alias: 'pending', transform: booleanAttribute })
-  pending?: boolean;
-
-  /** Whether the picker is disabled */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Whether to show a search field in the dropdown */
-  @Input({ alias: 'search' })
-  search?: 'on' | 'off' | 'auto';
-
-  /** The placement of the dropdown menu */
-  @Input({ alias: 'placement' })
-  placement?: Placement;
-
-  /** The datasets and their dataFields to display. The `formulas` array accepts both saved formulas (with `id`) and ad hoc formulas (with a `formula` expression string). Ad hoc formulas render inline with a formula icon. */
-  @Input({ alias: 'datasetsDataFields' })
-  datasetsDataFields?: (Pick<DatasetMetadata, 'id' | 'name' | 'columns'> & { formulas: (DatasetFormulaMetadata | AdHocFormulaInput)[]; })[];
-
-  /** 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';
-
-  /** When this control is rendered, focus it automatically */
-  @Input({ alias: 'autofocus', transform: booleanAttribute })
-  autofocus?: boolean;
-
-  /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
-  @Input({ alias: 'tabIndex' })
-  tabIndex?: number;
-
-  /** Emitted when data fields are selected */
-  readonly luzmoDataFieldsSelected = output<CustomEvent<DataFieldsSelectedEventDetail>>({ alias: 'luzmoDataFieldsSelected' });
-
-  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 'contentLanguage':
-          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
-          break;
-        case 'label':
-          this.setHostProperty('label', changes['label'].currentValue);
-          break;
-        case 'icons':
-          this.setHostProperty('icons', changes['icons'].currentValue);
-          break;
-        case 'levels':
-          this.setHostProperty('levels', changes['levels'].currentValue);
-          break;
-        case 'allowEmpty':
-          this.setHostProperty('allowEmpty', changes['allowEmpty'].currentValue);
-          break;
-        case 'placeholder':
-          this.setHostProperty('placeholder', changes['placeholder'].currentValue);
-          break;
-        case 'selects':
-          this.setHostProperty('selects', changes['selects'].currentValue);
-          break;
-        case 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'retrieving':
-          this.setHostProperty('retrieving', changes['retrieving'].currentValue);
-          break;
-        case 'invalid':
-          this.setHostProperty('invalid', changes['invalid'].currentValue);
-          break;
-        case 'clearable':
-          this.setHostProperty('clearable', changes['clearable'].currentValue);
-          break;
-        case 'pending':
-          this.setHostProperty('pending', changes['pending'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'search':
-          this.setHostProperty('search', changes['search'].currentValue);
-          break;
-        case 'placement':
-          this.setHostProperty('placement', changes['placement'].currentValue);
-          break;
-        case 'datasetsDataFields':
-          this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].currentValue);
-          break;
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
-          break;
-        case 'size':
-          this.setHostProperty('size', changes['size'].currentValue);
-          break;
-        case 'autofocus':
-          this.setHostProperty('autofocus', changes['autofocus'].currentValue);
-          break;
-        case 'tabIndex':
-          this.setHostProperty('tabIndex', changes['tabIndex'].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-fields-selected', (event: Event) => {
-        const typed = event as CustomEvent<DataFieldsSelectedEventDetail>;
-        this.luzmoDataFieldsSelected.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoDataFieldsSelect */
-export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectHostElement;

package/angular/components/dataset-icon.ts

@@ -1,83 +0,0 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/dataset-icon';
-import type { LuzmoDatasetIcon as LuzmoDatasetIconHostElement, DatasetIcon } from '@luzmo/analytics-components-kit/dataset-icon';
-export type { DatasetIcon } from '@luzmo/analytics-components-kit/dataset-icon';
-
-@Component({
-  selector: 'luzmo-dataset-icon',
-  exportAs: 'luzmoDatasetIcon',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-dataset-icon>
- */
-export class LuzmoDatasetIcon implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoDatasetIconHostElement>>(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(): LuzmoDatasetIconHostElement {
-    return this.host;
-  }
-
-  /** The dataset information containing subtype and thumbnail data */
-  @Input({ alias: 'dataset' })
-  datasetInfo?: DatasetIcon;
-
-  /** The size of the icon */
-  @Input({ alias: 'size' })
-  size?: '16px' | '24px' | '32px' | '48px' | '64px';
-
-  /** The base URL for the application (used for thumbnail URLs) */
-  @Input({ alias: 'appUrl' })
-  appUrl?: string;
-
-  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 'datasetInfo':
-          this.setHostProperty('datasetInfo', changes['datasetInfo'].currentValue);
-          break;
-        case 'size':
-          this.setHostProperty('size', changes['size'].currentValue);
-          break;
-        case 'appUrl':
-          this.setHostProperty('appUrl', changes['appUrl'].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 {
-    // No custom events for this wrapper.
-  }
-}
-
-/** The underlying custom element type for LuzmoDatasetIcon */
-export type LuzmoDatasetIconElement = LuzmoDatasetIconHostElement;

package/angular/components/dataset-selector-list.ts

@@ -1,140 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/dataset-selector-list';
-import type { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListHostElement, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
-export type { Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
-
-@Component({
-  selector: 'luzmo-dataset-selector-list',
-  exportAs: 'luzmoDatasetSelectorList',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-dataset-selector-list>
- */
-export class LuzmoDatasetSelectorList implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoDatasetSelectorListHostElement>>(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(): LuzmoDatasetSelectorListHostElement {
-    return this.host;
-  }
-
-  /** Set of dataset IDs that are already selected and should be filtered out */
-  @Input({ alias: 'selectedDatasets' })
-  selectedDatasets?: Set<string>;
-
-  /** Whether to show the search input field */
-  @Input({ alias: 'showSearch', transform: booleanAttribute })
-  showSearch?: boolean;
-
-  /** Placeholder text for the search input */
-  @Input({ alias: 'searchPlaceholder' })
-  searchPlaceholder?: string;
-
-  /** Message to show when no datasets are found */
-  @Input({ alias: 'noDatasetsMessage' })
-  noDatasetsMessage?: string;
-
-  /** Whether to highlight matched search terms in dataset names */
-  @Input({ alias: 'highlightSearchMatches', transform: booleanAttribute })
-  highlightSearchMatches?: boolean;
-
-  /** 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, restricts results to public datasets (opendata parity) */
-  @Input({ alias: 'flagOpendata', transform: booleanAttribute })
-  flagOpendata?: boolean;
-
-  /** Fired when a dataset is selected */
-  readonly datasetSelected = output<CustomEvent<Dataset>>({ alias: 'datasetSelected' });
-
-  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 'selectedDatasets':
-          this.setHostProperty('selectedDatasets', changes['selectedDatasets'].currentValue);
-          break;
-        case 'showSearch':
-          this.setHostProperty('showSearch', changes['showSearch'].currentValue);
-          break;
-        case 'searchPlaceholder':
-          this.setHostProperty('searchPlaceholder', changes['searchPlaceholder'].currentValue);
-          break;
-        case 'noDatasetsMessage':
-          this.setHostProperty('noDatasetsMessage', changes['noDatasetsMessage'].currentValue);
-          break;
-        case 'highlightSearchMatches':
-          this.setHostProperty('highlightSearchMatches', changes['highlightSearchMatches'].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 'flagOpendata':
-          this.setHostProperty('flagOpendata', changes['flagOpendata'].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, 'dataset-selected', (event: Event) => {
-        const typed = event as CustomEvent<Dataset>;
-        this.datasetSelected.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoDatasetSelectorList */
-export type LuzmoDatasetSelectorListElement = LuzmoDatasetSelectorListHostElement;

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

@@ -1,143 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/dataset-selector-row';
-import type { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowHostElement, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
-export type { Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
-
-@Component({
-  selector: 'luzmo-dataset-selector-row',
-  exportAs: 'luzmoDatasetSelectorRow',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-dataset-selector-row>
- */
-export class LuzmoDatasetSelectorRow implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoDatasetSelectorRowHostElement>>(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(): LuzmoDatasetSelectorRowHostElement {
-    return this.host;
-  }
-
-  /** Array of selected datasets */
-  @Input({ alias: 'selectedDatasets' })
-  selectedDatasets?: Dataset[];
-
-  /** Accessible label and hover tooltip text for the dataset search trigger */
-  @Input({ alias: 'buttonLabel' })
-  buttonLabel?: string;
-
-  /** 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, restricts results to public datasets (opendata parity) */
-  @Input({ alias: 'flagOpendata', transform: booleanAttribute })
-  flagOpendata?: boolean;
-
-  /** When true, disables all interactions: disables the add button, removes dataset pill delete buttons, and makes tags non-interactive */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** When true, hides dataset icons in selected tags and search options */
-  @Input({ alias: 'hideDatasetIcons', transform: booleanAttribute })
-  hideDatasetIcons?: boolean;
-
-  /** Fired when a dataset is selected */
-  readonly datasetSelected = output<CustomEvent<Dataset>>({ alias: 'datasetSelected' });
-
-  /** Fired when a dataset is removed */
-  readonly datasetRemoved = output<CustomEvent<Dataset>>({ alias: 'datasetRemoved' });
-
-  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 'selectedDatasets':
-          this.setHostProperty('selectedDatasets', changes['selectedDatasets'].currentValue);
-          break;
-        case 'buttonLabel':
-          this.setHostProperty('buttonLabel', changes['buttonLabel'].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 'flagOpendata':
-          this.setHostProperty('flagOpendata', changes['flagOpendata'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'hideDatasetIcons':
-          this.setHostProperty('hideDatasetIcons', changes['hideDatasetIcons'].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, 'dataset-selected', (event: Event) => {
-        const typed = event as CustomEvent<Dataset>;
-        this.datasetSelected.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'dataset-removed', (event: Event) => {
-        const typed = event as CustomEvent<Dataset>;
-        this.datasetRemoved.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoDatasetSelectorRow */
-export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowHostElement;

package/angular/components/display-settings-binning.ts

@@ -1,92 +0,0 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/display-settings-binning';
-import type { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
-export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
-import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
-
-@Component({
-  selector: 'luzmo-display-settings-binning',
-  exportAs: 'luzmoDisplaySettingsBinning',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-display-settings-binning>
- */
-export class LuzmoDisplaySettingsBinning implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsBinningHostElement>>(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(): LuzmoDisplaySettingsBinningHostElement {
-    return this.host;
-  }
-
-  /** The slot content whose binning configuration (enabled state and bin width) is edited. */
-  @Input({ alias: 'slotContent' })
-  slotContent?: GenericSlotContent;
-
-  /** 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';
-
-  /** Event that is fired when the slot content is changed */
-  readonly luzmoSlotContentChanged = output<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>({ alias: 'luzmoSlotContentChanged' });
-
-  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 'slotContent':
-          this.setHostProperty('slotContent', changes['slotContent'].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-slot-content-changed', (event: Event) => {
-        const typed = event as CustomEvent<DisplaySettingsSlotContentChangedEventDetail>;
-        this.luzmoSlotContentChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoDisplaySettingsBinning */
-export type LuzmoDisplaySettingsBinningElement = LuzmoDisplaySettingsBinningHostElement;