@luzmo/analytics-components-kit 1.0.9-beta.9 → 1.2.1

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,161 @@
+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, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } 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;
+
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
+  /** 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. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  /** With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: the gesture ended (including when the popover closes), after its last value update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  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 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].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);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionColorPicker */
+export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerHostElement;

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

@@ -0,0 +1,195 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-range';
+import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+
+@Component({
+  selector: 'luzmo-item-option-color-range',
+  exportAs: 'luzmoItemOptionColorRange',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-color-range>
+ */
+export class LuzmoItemOptionColorRange implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorRangeHostElement>>(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(): LuzmoItemOptionColorRangeHostElement {
+    return this.host;
+  }
+
+  /** The color range */
+  @Input({ alias: 'value' })
+  value?: unknown;
+
+  /** The default color range */
+  @Input({ alias: 'default' })
+  default?: unknown;
+
+  /** Whether the color-range is disabled */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** Range with percentage values */
+  @Input({ alias: 'percentage', transform: booleanAttribute })
+  percentage?: boolean;
+
+  /** Range colors can have alpha values */
+  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
+  noAlphaChannel?: boolean;
+
+  /** The number of values in the range can be changed */
+  @Input({ alias: 'editRangeSize', transform: booleanAttribute })
+  editRangeSize?: boolean;
+
+  /** The values in the range can be changed by the user in the input field */
+  @Input({ alias: 'noValues', transform: booleanAttribute })
+  noValues?: boolean;
+
+  /** The minimum range size */
+  @Input({ alias: 'minimumRangeSize' })
+  minimumRangeSize?: number;
+
+  /** Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded */
+  @Input({ alias: 'negativeInfinityValue', transform: booleanAttribute })
+  negativeInfinityValue?: boolean;
+
+  /** The color pickers can be read-only */
+  @Input({ alias: 'readOnlyColorPicker', transform: booleanAttribute })
+  readOnlyColorPicker?: boolean;
+
+  /** Whether the colors are reversed */
+  @Input({ alias: 'reverse', transform: booleanAttribute })
+  reverse?: boolean;
+
+  /** The debounce time in milliseconds */
+  @Input({ alias: 'debounce' })
+  debounce?: number;
+
+  /** Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys */
+  @Input({ alias: 'liveInteractions', transform: booleanAttribute })
+  liveInteractions?: boolean;
+
+  /** The function to parse the value */
+  @Input({ alias: 'parseValue' })
+  parseValue?: unknown;
+
+  /** The function to convert the value */
+  @Input({ alias: 'toValue' })
+  toValue?: unknown;
+
+  /** Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  /** With `live-interactions`: a color drag or held key on one stop first changed its color, right before that value update. Each stop has its own gestures; one that never changes its color emits no lifecycle. */
+  readonly luzmoOptionInteractionStart = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionStart' });
+
+  /** With `live-interactions`: that stop's gesture ended, after its last value update. */
+  readonly luzmoOptionInteractionEnd = output<CustomEvent<ItemOptionInteractionEventDetail>>({ alias: 'luzmoOptionInteractionEnd' });
+
+  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 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'percentage':
+          this.setHostProperty('percentage', changes['percentage'].currentValue);
+          break;
+        case 'noAlphaChannel':
+          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
+          break;
+        case 'editRangeSize':
+          this.setHostProperty('editRangeSize', changes['editRangeSize'].currentValue);
+          break;
+        case 'noValues':
+          this.setHostProperty('noValues', changes['noValues'].currentValue);
+          break;
+        case 'minimumRangeSize':
+          this.setHostProperty('minimumRangeSize', changes['minimumRangeSize'].currentValue);
+          break;
+        case 'negativeInfinityValue':
+          this.setHostProperty('negativeInfinityValue', changes['negativeInfinityValue'].currentValue);
+          break;
+        case 'readOnlyColorPicker':
+          this.setHostProperty('readOnlyColorPicker', changes['readOnlyColorPicker'].currentValue);
+          break;
+        case 'reverse':
+          this.setHostProperty('reverse', changes['reverse'].currentValue);
+          break;
+        case 'debounce':
+          this.setHostProperty('debounce', changes['debounce'].currentValue);
+          break;
+        case 'liveInteractions':
+          this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
+          break;
+        case 'parseValue':
+          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
+          break;
+        case 'toValue':
+          this.setHostProperty('toValue', changes['toValue'].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);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-start', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionStart.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-option-interaction-end', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionInteractionEventDetail>;
+        this.luzmoOptionInteractionEnd.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionColorRange */
+export type LuzmoItemOptionColorRangeElement = LuzmoItemOptionColorRangeHostElement;