@luzmo/analytics-components-kit 1.0.5-beta.2 → 1.0.5-beta.3

package/angular/components/item-grid.ts

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

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

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

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