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

package/angular/components/item-grid.ts

@@ -1,242 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-grid';
-import type { LuzmoItemGrid as LuzmoItemGridHostElement, ClonedItemPositioning, GridItemActionEventDetail, GridItemData, GridItemRenderer, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, InputActionGroup, ItemStates } from '@luzmo/analytics-components-kit/item-grid';
-export type { Action, ActionGroup, AddGridItemInput, ClonedItemPositioning, DefaultActionType, GridItemActionEventDetail, GridItemData, GridItemPatch, GridItemPosition, GridItemPositionPatch, GridItemRenderer, GridItemSizePatch, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, InputActionGroup, ItemStates } from '@luzmo/analytics-components-kit/item-grid';
-import type { ThemeConfig } from '@luzmo/dashboard-contents-types';
-import type { Placement } from '@luzmo/lucero';
-
-@Component({
-  selector: 'luzmo-item-grid',
-  exportAs: 'luzmoItemGrid',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-grid>
- */
-export class LuzmoItemGrid implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemGridHostElement>>(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(): LuzmoItemGridHostElement {
-    return this.host;
-  }
-
-  /** The URL of the app server */
-  @Input({ alias: 'appServer' })
-  appServer?: string;
-
-  /** The API Host of the databroker */
-  @Input({ alias: 'apiHost' })
-  apiHost?: string;
-
-  /** The auth key of the databroker */
-  @Input({ alias: 'authKey' })
-  authKey?: string;
-
-  /** The auth token of the databroker */
-  @Input({ alias: 'authToken' })
-  authToken?: string;
-
-  /** The cache time of the databroker */
-  @Input({ alias: 'cacheTime' })
-  cacheTime?: number;
-
-  /** The language of the settings interface */
-  @Input({ alias: 'language' })
-  language?: string;
-
-  /** The language to use for locale-aware formatting and labels */
-  @Input({ alias: 'contentLanguage' })
-  contentLanguage?: string;
-
-  /** The number of columns in the grid. */
-  @Input({ alias: 'columns' })
-  columns?: number;
-
-  /** The height of each row in pixels in the grid. */
-  @Input({ alias: 'rowHeight' })
-  rowHeight?: number;
-
-  /** Whether the grid is in view mode. When true, dragging, resizing and action buttons are disabled. */
-  @Input({ alias: 'viewMode', transform: booleanAttribute })
-  viewMode?: boolean;
-
-  /** When true (default), the item actions menu uses the Document Popover API (`popover="manual"`), which paints in the top layer. Set to false when embedding the grid next to another UI that also uses a document popover (e.g. an analyst side pane) so the actions menu stays in normal stacking with `position: fixed` + Floating UI instead. */
-  @Input({ alias: 'itemActionsDocumentPopover', transform: booleanAttribute })
-  itemActionsDocumentPopover?: boolean;
-
-  /** The placement of the item actions menu. */
-  @Input({ alias: 'placementItemActionsMenu' })
-  placementItemActionsMenu?: Placement;
-
-  /** The default item actions menu. */
-  @Input({ alias: 'defaultItemActionsMenu' })
-  defaultItemActionsMenu?: InputActionGroup[];
-
-  /** Where to position a cloned item in the grid. - `'below-item'` (default): places the clone directly below the original item, shifting other items down. - `'auto-position'`: lets the grid engine find the first available space (row-major scan, then compact upward). */
-  @Input({ alias: 'clonedItemPositioning' })
-  clonedItemPositioning?: ClonedItemPositioning;
-
-  /** Grid options configuration */
-  @Input({ alias: 'theme' })
-  theme?: ThemeConfig;
-
-  /** Items to add to the grid. The array is cloned on set so the component never mutates the caller's data. */
-  @Input({ alias: 'items' })
-  items?: GridItemData[];
-
-  /** Seed value for uncontrolled items mode. The component manages item changes internally from this starting point. Ignored when `items` is set. */
-  @Input({ alias: 'initialItems' })
-  initialItems?: GridItemData[];
-
-  /** Custom renderers for different item types */
-  @Input({ alias: 'renderers' })
-  renderers?: Record<string, GridItemRenderer>;
-
-  /** Controlled item states. When set, the component becomes controlled: it only reflects what the parent provides and does not update internal state on user interaction. */
-  @Input({ alias: 'itemStates' })
-  itemStates?: ItemStates;
-
-  /** Seed value for uncontrolled mode. The component manages state internally from this starting point. Ignored if `itemStates` is set.  Only one item with one active action is supported. If multiple items or actions are provided, a warning is emitted and only the first item with its first action is applied. Use controlled mode (`itemStates`) for multiple simultaneous active items. */
-  @Input({ alias: 'initialItemStates' })
-  initialItemStates?: ItemStates;
-
-  /** Fired when an item action is performed */
-  readonly luzmoItemGridItemAction = output<CustomEvent<GridItemActionEventDetail>>({ alias: 'luzmoItemGridItemAction' });
-
-  /** Fired when the grid layout is changed */
-  readonly luzmoItemGridLayoutChanged = output<CustomEvent<GridLifecycleEventDetail>>({ alias: 'luzmoItemGridLayoutChanged' });
-
-  /** Fired when the grid is ready */
-  readonly luzmoItemGridReady = output<CustomEvent<GridLifecycleEventDetail>>({ alias: 'luzmoItemGridReady' });
-
-  /** Fired when item states change (controlled and uncontrolled mode) */
-  readonly luzmoItemGridItemStatesChanged = output<CustomEvent<GridItemStatesChangedEventDetail>>({ alias: 'luzmoItemGridItemStatesChanged' });
-
-  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 'appServer':
-          this.setHostProperty('appServer', changes['appServer'].currentValue);
-          break;
-        case 'apiHost':
-          this.setHostProperty('apiHost', changes['apiHost'].currentValue);
-          break;
-        case 'authKey':
-          this.setHostProperty('authKey', changes['authKey'].currentValue);
-          break;
-        case 'authToken':
-          this.setHostProperty('authToken', changes['authToken'].currentValue);
-          break;
-        case 'cacheTime':
-          this.setHostProperty('cacheTime', changes['cacheTime'].currentValue);
-          break;
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
-          break;
-        case 'contentLanguage':
-          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
-          break;
-        case 'columns':
-          this.setHostProperty('columns', changes['columns'].currentValue);
-          break;
-        case 'rowHeight':
-          this.setHostProperty('rowHeight', changes['rowHeight'].currentValue);
-          break;
-        case 'viewMode':
-          this.setHostProperty('viewMode', changes['viewMode'].currentValue);
-          break;
-        case 'itemActionsDocumentPopover':
-          this.setHostProperty('itemActionsDocumentPopover', changes['itemActionsDocumentPopover'].currentValue);
-          break;
-        case 'placementItemActionsMenu':
-          this.setHostProperty('placementItemActionsMenu', changes['placementItemActionsMenu'].currentValue);
-          break;
-        case 'defaultItemActionsMenu':
-          this.setHostProperty('defaultItemActionsMenu', changes['defaultItemActionsMenu'].currentValue);
-          break;
-        case 'clonedItemPositioning':
-          this.setHostProperty('clonedItemPositioning', changes['clonedItemPositioning'].currentValue);
-          break;
-        case 'theme':
-          this.setHostProperty('theme', changes['theme'].currentValue);
-          break;
-        case 'items':
-          this.setHostProperty('items', changes['items'].currentValue);
-          break;
-        case 'initialItems':
-          this.setHostProperty('initialItems', changes['initialItems'].currentValue);
-          break;
-        case 'renderers':
-          this.setHostProperty('renderers', changes['renderers'].currentValue);
-          break;
-        case 'itemStates':
-          this.setHostProperty('itemStates', changes['itemStates'].currentValue);
-          break;
-        case 'initialItemStates':
-          this.setHostProperty('initialItemStates', changes['initialItemStates'].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-item-grid-item-action', (event: Event) => {
-        const typed = event as CustomEvent<GridItemActionEventDetail>;
-        this.luzmoItemGridItemAction.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-item-grid-layout-changed', (event: Event) => {
-        const typed = event as CustomEvent<GridLifecycleEventDetail>;
-        this.luzmoItemGridLayoutChanged.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-item-grid-ready', (event: Event) => {
-        const typed = event as CustomEvent<GridLifecycleEventDetail>;
-        this.luzmoItemGridReady.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-item-grid-item-states-changed', (event: Event) => {
-        const typed = event as CustomEvent<GridItemStatesChangedEventDetail>;
-        this.luzmoItemGridItemStatesChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemGrid */
-export type LuzmoItemGridElement = LuzmoItemGridHostElement;

package/angular/components/item-option-action-button-group.ts

@@ -1,105 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-action-button-group';
-import type { LuzmoItemOptionActionButtonGroup as LuzmoItemOptionActionButtonGroupHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-action-button-group';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-action-button-group';
-
-@Component({
-  selector: 'luzmo-item-option-action-button-group',
-  exportAs: 'luzmoItemOptionActionButtonGroup',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-action-button-group>
- */
-export class LuzmoItemOptionActionButtonGroup implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionActionButtonGroupHostElement>>(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(): LuzmoItemOptionActionButtonGroupHostElement {
-    return this.host;
-  }
-
-  /** The available buttons to choose from (key → button content). */
-  @Input({ alias: 'values' })
-  values?: unknown;
-
-  /** Whether the control is disabled (non-interactive). */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Selection mode: `single` or `multiple`. */
-  @Input({ alias: 'selects' })
-  selects?: 'single' | 'multiple';
-
-  /** The currently selected button key(s). */
-  @Input({ alias: 'value' })
-  value?: [string];
-
-  /** The default selection used when no value is set. */
-  @Input({ alias: 'default' })
-  default?: [string];
-
-  /** Emitted when the option value changes. */
-  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
-
-  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 'values':
-          this.setHostProperty('values', changes['values'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'selects':
-          this.setHostProperty('selects', changes['selects'].currentValue);
-          break;
-        case 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'default':
-          this.setHostProperty('default', changes['default'].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-option-changed', (event: Event) => {
-        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
-        this.luzmoOptionChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemOptionActionButtonGroup */
-export type LuzmoItemOptionActionButtonGroupElement = LuzmoItemOptionActionButtonGroupHostElement;

package/angular/components/item-option-color-palette-picker.ts

@@ -1,126 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-import type { LuzmoItemOptionColorPalettePicker as LuzmoItemOptionColorPalettePickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-
-@Component({
-  selector: 'luzmo-item-option-color-palette-picker',
-  exportAs: 'luzmoItemOptionColorPalettePicker',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-color-palette-picker>
- */
-export class LuzmoItemOptionColorPalettePicker implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorPalettePickerHostElement>>(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(): LuzmoItemOptionColorPalettePickerHostElement {
-    return this.host;
-  }
-
-  /** The selected color palette key of the picker */
-  @Input({ alias: 'value' })
-  value?: string;
-
-  /** The default color palette key of the picker */
-  @Input({ alias: 'default' })
-  default?: string;
-
-  /** The color palette keys of the picker */
-  @Input({ alias: 'values' })
-  values?: string[];
-
-  /** Whether the picker is disabled */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Whether the picker is horizontal */
-  @Input({ alias: 'horizontal', transform: booleanAttribute })
-  horizontal?: boolean;
-
-  /** The function to parse the value */
-  @Input({ alias: 'parseValue' })
-  parseValue?: unknown;
-
-  /** The function to convert the value to a string */
-  @Input({ alias: 'toValue' })
-  toValue?: unknown;
-
-  /** The number of colors to display */
-  @Input({ alias: 'numberOfColors' })
-  numberOfColors?: number;
-
-  /** Emitted when the option value changes. */
-  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
-
-  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 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'default':
-          this.setHostProperty('default', changes['default'].currentValue);
-          break;
-        case 'values':
-          this.setHostProperty('values', changes['values'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'horizontal':
-          this.setHostProperty('horizontal', changes['horizontal'].currentValue);
-          break;
-        case 'parseValue':
-          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
-          break;
-        case 'toValue':
-          this.setHostProperty('toValue', changes['toValue'].currentValue);
-          break;
-        case 'numberOfColors':
-          this.setHostProperty('numberOfColors', changes['numberOfColors'].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-option-changed', (event: Event) => {
-        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
-        this.luzmoOptionChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemOptionColorPalettePicker */
-export type LuzmoItemOptionColorPalettePickerElement = LuzmoItemOptionColorPalettePickerHostElement;

package/angular/components/item-option-color-picker.ts

@@ -1,134 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-color-picker';
-import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
-import type { Placement } from '@luzmo/lucero';
-
-@Component({
-  selector: 'luzmo-item-option-color-picker',
-  exportAs: 'luzmoItemOptionColorPicker',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-color-picker>
- */
-export class LuzmoItemOptionColorPicker implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorPickerHostElement>>(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(): LuzmoItemOptionColorPickerHostElement {
-    return this.host;
-  }
-
-  /** Preset colors offered as quick-pick swatches. */
-  @Input({ alias: 'swatches' })
-  swatches?: string[];
-
-  /** Corner rounding of the color swatch: `full`, `light`, or `none`. */
-  @Input({ alias: 'rounding' })
-  rounding?: 'full' | 'light' | 'none';
-
-  /** Shape of the color swatch: `circle` or `rectangle`. */
-  @Input({ alias: 'shape' })
-  shape?: 'circle' | 'rectangle';
-
-  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
-  @Input({ alias: 'debounce' })
-  debounce?: number;
-
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
-  /** The current color value. */
-  @Input({ alias: 'value' })
-  value?: string;
-
-  /** Whether the control is disabled (non-interactive). */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Disables the alpha (opacity) channel in the color picker. */
-  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
-  noAlphaChannel?: boolean;
-
-  /** Placement of the color picker dropdown relative to its trigger. */
-  @Input({ alias: 'placement' })
-  placement?: Placement;
-
-  /** Emitted when the option value changes. */
-  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
-
-  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 'swatches':
-          this.setHostProperty('swatches', changes['swatches'].currentValue);
-          break;
-        case 'rounding':
-          this.setHostProperty('rounding', changes['rounding'].currentValue);
-          break;
-        case 'shape':
-          this.setHostProperty('shape', changes['shape'].currentValue);
-          break;
-        case 'debounce':
-          this.setHostProperty('debounce', changes['debounce'].currentValue);
-          break;
-        case 'debounceTimeout':
-          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-          break;
-        case 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'noAlphaChannel':
-          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
-          break;
-        case 'placement':
-          this.setHostProperty('placement', changes['placement'].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-option-changed', (event: Event) => {
-        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
-        this.luzmoOptionChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemOptionColorPicker */
-export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerHostElement;