@luzmo/analytics-components-kit 1.0.1-alpha.147 → 1.0.1-alpha.149

package/angular/README.md

@@ -23,6 +23,8 @@ bootstrapApplication(AiInteractionTextareaComponent);
 
 ## Available components
 - `AiInteractionTextareaComponent` → <luzmo-ai-interaction-textarea>
+- `DataFieldLevelComponent` → <luzmo-data-field-level>
+- `DataFieldPanelComponent` → <luzmo-data-field-panel>
 - `DatasetIconComponent` → <luzmo-dataset-icon>
 - `DatasetSelectorListComponent` → <luzmo-dataset-selector-list>
 - `DatasetSelectorRowComponent` → <luzmo-dataset-selector-row>
@@ -32,24 +34,6 @@ bootstrapApplication(AiInteractionTextareaComponent);
 - `DisplaySettingsGrandTotalsComponent` → <luzmo-display-settings-grand-totals>
 - `DisplaySettingsNumericComponent` → <luzmo-display-settings-numeric>
 - `DisplaySettingsPeriodOverPeriodComponent` → <luzmo-display-settings-period-over-period>
-- `DraggableDataFieldsPanelComponent` → <luzmo-draggable-data-fields-panel>
-- `DroppableSlotComponent` → <luzmo-droppable-slot>
-- `EditFiltersComponent` → <luzmo-edit-filters>
-- `EditItemComponent` → <luzmo-edit-item>
-- `EditOptionComponent` → <luzmo-edit-option>
-- `EditOptionActionButtonGroupComponent` → <luzmo-edit-option-action-button-group>
-- `EditOptionColorPalettePickerComponent` → <luzmo-edit-option-color-palette-picker>
-- `EditOptionColorPickerComponent` → <luzmo-edit-option-color-picker>
-- `EditOptionColorRangeComponent` → <luzmo-edit-option-color-range>
-- `EditOptionMultiLanguageFieldComponent` → <luzmo-edit-option-multi-language-field>
-- `EditOptionNumberFieldComponent` → <luzmo-edit-option-number-field>
-- `EditOptionPickerComponent` → <luzmo-edit-option-picker>
-- `EditOptionPositionPickerComponent` → <luzmo-edit-option-position-picker>
-- `EditOptionPositionsNumberFieldComponent` → <luzmo-edit-option-positions-number-field>
-- `EditOptionRadioButtonGroupComponent` → <luzmo-edit-option-radio-button-group>
-- `EditOptionSliderComponent` → <luzmo-edit-option-slider>
-- `EditOptionSwitchComponent` → <luzmo-edit-option-switch>
-- `EditOptionTextFieldComponent` → <luzmo-edit-option-text-field>
 - `FilterExpressionPickerComponent` → <luzmo-filter-expression-picker>
 - `FilterItemComponent` → <luzmo-filter-item>
 - `FilterParameterPickerComponent` → <luzmo-filter-parameter-picker>
@@ -57,11 +41,28 @@ bootstrapApplication(AiInteractionTextareaComponent);
 - `FilterValuePickerDatetimeComponent` → <luzmo-filter-value-picker-datetime>
 - `FilterValuePickerHierarchyComponent` → <luzmo-filter-value-picker-hierarchy>
 - `FilterValuePickerNumericComponent` → <luzmo-filter-value-picker-numeric>
-- `GridComponent` → <luzmo-grid>
-- `GridItemActionsMenuComponent` → <luzmo-grid-item-actions-menu>
-- `ItemDataDropPanelComponent` → <luzmo-item-data-drop-panel>
-- `ItemDataPickerPanelComponent` → <luzmo-item-data-picker-panel>
-- `SlotContentsPickerComponent` → <luzmo-slot-contents-picker>
+- `FiltersComponent` → <luzmo-filters>
+- `ItemGridComponent` → <luzmo-item-grid>
+- `ItemGridItemActionsMenuComponent` → <luzmo-item-grid-item-actions-menu>
+- `ItemOptionComponent` → <luzmo-item-option>
+- `ItemOptionActionButtonGroupComponent` → <luzmo-item-option-action-button-group>
+- `ItemOptionColorPalettePickerComponent` → <luzmo-item-option-color-palette-picker>
+- `ItemOptionColorPickerComponent` → <luzmo-item-option-color-picker>
+- `ItemOptionColorRangeComponent` → <luzmo-item-option-color-range>
+- `ItemOptionMultiLanguageFieldComponent` → <luzmo-item-option-multi-language-field>
+- `ItemOptionNumberFieldComponent` → <luzmo-item-option-number-field>
+- `ItemOptionPanelComponent` → <luzmo-item-option-panel>
+- `ItemOptionPickerComponent` → <luzmo-item-option-picker>
+- `ItemOptionPositionPickerComponent` → <luzmo-item-option-position-picker>
+- `ItemOptionPositionsNumberFieldComponent` → <luzmo-item-option-positions-number-field>
+- `ItemOptionRadioButtonGroupComponent` → <luzmo-item-option-radio-button-group>
+- `ItemOptionSliderComponent` → <luzmo-item-option-slider>
+- `ItemOptionSwitchComponent` → <luzmo-item-option-switch>
+- `ItemOptionTextFieldComponent` → <luzmo-item-option-text-field>
+- `ItemSlotDropComponent` → <luzmo-item-slot-drop>
+- `ItemSlotDropPanelComponent` → <luzmo-item-slot-drop-panel>
+- `ItemSlotPickerComponent` → <luzmo-item-slot-picker>
+- `ItemSlotPickerPanelComponent` → <luzmo-item-slot-picker-panel>
 - `SlotMenuComponent` → <luzmo-slot-menu>
 - `SlotMenuListComponent` → <luzmo-slot-menu-list>
 - `VizItemMenuComponent` → <luzmo-viz-item-menu>

package/angular/components/data-field-level.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DatasetDataField } from '../types';
+
+@Component({
+  selector: 'luzmo-data-field-level',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-data-field-level
+        [attr.variant]="variant"
+        [attr.hide-type-icon]="hideTypeIcon"
+        [attr.sublevel]="sublevel"
+        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.data]="data"
+        [attr.size]="size"
+        (luzmo-data-field-dropped)="luzmoDataFieldDropped.emit($event)"
+        (luzmo-data-field-drag-started)="luzmoDataFieldDragStarted.emit($event)">
+  <ng-content></ng-content>
+</luzmo-data-field-level>`
+})
+export class DataFieldLevelComponent {
+  @Input() variant?: 'highlight' | 'normal';
+  @Input() hideTypeIcon?: boolean;
+  @Input() sublevel?: boolean;
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() data?: DatasetDataField;
+  @Input() size?: any;
+  @Output() luzmoDataFieldDropped = new EventEmitter<CustomEvent<{data: DatasetDataField}>>();
+  @Output() luzmoDataFieldDragStarted = new EventEmitter<CustomEvent<{data: DatasetDataField}>>();
+}

package/angular/components/{draggable-data-fields-panel.component.ts → data-field-panel.component.ts}

@@ -2,16 +2,16 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-draggable-data-fields-panel',
+  selector: 'luzmo-data-field-panel',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-draggable-data-fields-panel
+  template: `<luzmo-data-field-panel
         [attr.dataset-ids]="datasetIds"
         [attr.selected-dataset-id]="selectedDatasetId"
         [attr.dataset-picker]="datasetPicker"
         [attr.disabled]="disabled"
         [attr.pending]="pending"
-        [attr.draggable-data-field-variant]="draggableDataFieldVariant"
+        [attr.data-field-variant]="dataFieldVariant"
         [attr.search-quiet]="searchQuiet"
         [attr.hide-type-icon]="hideTypeIcon"
         [attr.hide-sublevels]="hideSublevels"
@@ -27,15 +27,15 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         (luzmo-data-field-dropped)="luzmoDataFieldDropped.emit($event)"
         (luzmo-data-field-drag-started)="luzmoDataFieldDragStarted.emit($event)">
   <ng-content></ng-content>
-</luzmo-draggable-data-fields-panel>`
+</luzmo-data-field-panel>`
 })
-export class DraggableDataFieldsPanelComponent {
+export class DataFieldPanelComponent {
   @Input() datasetIds?: string[];
   @Input() selectedDatasetId?: string;
   @Input() datasetPicker?: boolean;
   @Input() disabled?: boolean;
   @Input() pending?: boolean;
-  @Input() draggableDataFieldVariant?: 'highlight' | 'normal';
+  @Input() dataFieldVariant?: 'highlight' | 'normal';
   @Input() searchQuiet?: boolean;
   @Input() hideTypeIcon?: boolean;
   @Input() hideSublevels?: boolean;

package/angular/components/{edit-filters.component.ts → filters.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import type { ItemFilterGroup } from '../types';
 
 @Component({
-  selector: 'luzmo-edit-filters',
+  selector: 'luzmo-filters',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-filters
+  template: `<luzmo-filters
         [attr.api-url]="apiUrl"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
@@ -21,9 +21,9 @@ import type { ItemFilterGroup } from '../types';
         [attr.tabIndex]="tabIndex"
         (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-filters>`
+</luzmo-filters>`
 })
-export class EditFiltersComponent {
+export class FiltersComponent {
   @Input() apiUrl?: string;
   @Input() authKey?: string;
   @Input() authToken?: string;

package/angular/components/{grid → item-grid}/types.ts

@@ -3,7 +3,7 @@ import type { IconDefinition } from '@luzmo/icons';
 import type { Placement } from '@luzmo/lucero';
 import type { TemplateResult } from 'lit';
 
-export type DefaultActionType = 'lock' | 'filters' | 'edit' | 'edit-data' | 'edit-options' | 'edit-filters' | 'delete' | 'clone';
+export type DefaultActionType = 'lock' | 'filters' | 'edit' | 'edit-data' | 'item-options' | 'delete' | 'clone';
 
 export interface Action {
   icon?: IconDefinition;

package/angular/components/{grid-item-actions-menu.component.ts → item-grid-item-actions-menu.component.ts}

@@ -2,24 +2,24 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import type { Placement, ActionGroup } from '../types';
 
 @Component({
-  selector: 'luzmo-grid-item-actions-menu',
+  selector: 'luzmo-item-grid-item-actions-menu',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-grid-item-actions-menu
+  template: `<luzmo-item-grid-item-actions-menu
         [attr.placement]="placement"
         [attr.actions]="actions"
         [attr.disabled]="disabled"
         [attr.autofocus]="autofocus"
         [attr.tabIndex]="tabIndex"
-        (luzmo-grid-item-action)="luzmoGridItemAction.emit($event)">
+        (luzmo-item-grid-item-action)="luzmoItemGridItemAction.emit($event)">
   <ng-content></ng-content>
-</luzmo-grid-item-actions-menu>`
+</luzmo-item-grid-item-actions-menu>`
 })
-export class GridItemActionsMenuComponent {
+export class ItemGridItemActionsMenuComponent {
   @Input() placement?: Placement;
   @Input() actions?: ActionGroup[];
   @Input() disabled?: any;
   @Input() autofocus?: any;
   @Input() tabIndex?: any;
-  @Output() luzmoGridItemAction = new EventEmitter<CustomEvent>();
+  @Output() luzmoItemGridItemAction = new EventEmitter<CustomEvent>();
 }

package/angular/components/{grid.component.ts → item-grid.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import type { Placement, InputActionGroup, ThemeConfig, GridItemData, GridItemRenderer } from '../types';
 
 @Component({
-  selector: 'luzmo-grid',
+  selector: 'luzmo-item-grid',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-grid
+  template: `<luzmo-item-grid
         [attr.app-server]="appServer"
         [attr.api-host]="apiHost"
         [attr.auth-key]="authKey"
@@ -21,13 +21,13 @@ import type { Placement, InputActionGroup, ThemeConfig, GridItemData, GridItemRe
         [attr.theme]="theme"
         [attr.items]="items"
         [attr.renderers]="renderers"
-        (luzmo-grid-item-action)="luzmoGridItemAction.emit($event)"
-        (luzmo-grid-changed)="luzmoGridChanged.emit($event)"
-        (luzmo-grid-ready)="luzmoGridReady.emit($event)">
+        (luzmo-item-grid-item-action)="luzmoItemGridItemAction.emit($event)"
+        (luzmo-item-grid-changed)="luzmoItemGridChanged.emit($event)"
+        (luzmo-item-grid-ready)="luzmoItemGridReady.emit($event)">
   <ng-content></ng-content>
-</luzmo-grid>`
+</luzmo-item-grid>`
 })
-export class GridComponent {
+export class ItemGridComponent {
   @Input() appServer?: string;
   @Input() apiHost?: string;
   @Input() authKey?: string;
@@ -43,7 +43,7 @@ export class GridComponent {
   @Input() theme?: ThemeConfig;
   @Input() items?: GridItemData[];
   @Input() renderers?: Record<string, GridItemRenderer>;
-  @Output() luzmoGridItemAction = new EventEmitter<CustomEvent>();
-  @Output() luzmoGridChanged = new EventEmitter<CustomEvent>();
-  @Output() luzmoGridReady = new EventEmitter<CustomEvent>();
+  @Output() luzmoItemGridItemAction = new EventEmitter<CustomEvent>();
+  @Output() luzmoItemGridChanged = new EventEmitter<CustomEvent>();
+  @Output() luzmoItemGridReady = new EventEmitter<CustomEvent>();
 }

package/angular/components/{edit-option-action-button-group.component.ts → item-option-action-button-group.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-action-button-group',
+  selector: 'luzmo-item-option-action-button-group',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-action-button-group
+  template: `<luzmo-item-option-action-button-group
         [attr.values]="values"
         [attr.disabled]="disabled"
         [attr.selects]="selects"
@@ -13,9 +13,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.default]="default"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-action-button-group>`
+</luzmo-item-option-action-button-group>`
 })
-export class EditOptionActionButtonGroupComponent {
+export class ItemOptionActionButtonGroupComponent {
   @Input() values?: any;
   @Input() disabled?: any;
   @Input() selects?: any;

package/angular/components/{edit-option-color-palette-picker.component.ts → item-option-color-palette-picker.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-color-palette-picker',
+  selector: 'luzmo-item-option-color-palette-picker',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-color-palette-picker
+  template: `<luzmo-item-option-color-palette-picker
         [attr.value]="value"
         [attr.default]="default"
         [attr.values]="values"
@@ -16,9 +16,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.number-of-colors]="numberOfColors"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-color-palette-picker>`
+</luzmo-item-option-color-palette-picker>`
 })
-export class EditOptionColorPalettePickerComponent {
+export class ItemOptionColorPalettePickerComponent {
   @Input() value?: any;
   @Input() default?: any;
   @Input() values?: any;

package/angular/components/{edit-option-color-picker.component.ts → item-option-color-picker.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-color-picker',
+  selector: 'luzmo-item-option-color-picker',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-color-picker
+  template: `<luzmo-item-option-color-picker
         [attr.swatches]="swatches"
         [attr.rounding]="rounding"
         [attr.shape]="shape"
@@ -16,9 +16,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.placement]="placement"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-color-picker>`
+</luzmo-item-option-color-picker>`
 })
-export class EditOptionColorPickerComponent {
+export class ItemOptionColorPickerComponent {
   @Input() swatches?: string[];
   @Input() rounding?: 'full' | 'light' | 'none';
   @Input() shape?: 'circle' | 'rectangle';

package/angular/components/{edit-option-color-range.component.ts → item-option-color-range.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-color-range',
+  selector: 'luzmo-item-option-color-range',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-color-range
+  template: `<luzmo-item-option-color-range
         [attr.value]="value"
         [attr.default]="default"
         [attr.disabled]="disabled"
@@ -22,9 +22,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.toValue]="toValue"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-color-range>`
+</luzmo-item-option-color-range>`
 })
-export class EditOptionColorRangeComponent {
+export class ItemOptionColorRangeComponent {
   @Input() value?: any;
   @Input() default?: any;
   @Input() disabled?: any;

package/angular/components/{edit-option-multi-language-field.component.ts → item-option-multi-language-field.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-multi-language-field',
+  selector: 'luzmo-item-option-multi-language-field',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-multi-language-field
+  template: `<luzmo-item-option-multi-language-field
         [attr.value]="value"
         [attr.invalid]="invalid"
         [attr.readonly]="readonly"
@@ -16,9 +16,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.debounce]="debounce"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-multi-language-field>`
+</luzmo-item-option-multi-language-field>`
 })
-export class EditOptionMultiLanguageFieldComponent {
+export class ItemOptionMultiLanguageFieldComponent {
   @Input() value?: any;
   @Input() invalid?: any;
   @Input() readonly?: any;

package/angular/components/{edit-option-number-field.component.ts → item-option-number-field.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-number-field',
+  selector: 'luzmo-item-option-number-field',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-number-field
+  template: `<luzmo-item-option-number-field
         [attr.debounce]="debounce"
         [attr.disabled]="disabled"
         [attr.min]="min"
@@ -20,9 +20,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.toValue]="toValue"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-number-field>`
+</luzmo-item-option-number-field>`
 })
-export class EditOptionNumberFieldComponent {
+export class ItemOptionNumberFieldComponent {
   @Input() debounce?: number;
   @Input() disabled?: any;
   @Input() min?: any;

package/angular/components/{edit-item.component.ts → item-option-panel.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import type { VizItemType, Slot, OptionsConfig, TranslationOverrides, TranslationsFile, ThemeConfig, ElementSize } from '../types';
 
 @Component({
-  selector: 'luzmo-edit-item',
+  selector: 'luzmo-item-option-panel',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-item
+  template: `<luzmo-item-option-panel
         [attr.language]="language"
         [attr.item-type]="itemType"
         [attr.options]="options"
@@ -19,9 +19,9 @@ import type { VizItemType, Slot, OptionsConfig, TranslationOverrides, Translatio
         [attr.auth-token]="authToken"
         (luzmo-options-changed)="luzmoOptionsChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-item>`
+</luzmo-item-option-panel>`
 })
-export class EditItemComponent {
+export class ItemOptionPanelComponent {
   @Input() language?: string;
   @Input() itemType?: VizItemType;
   @Input() options?: Record<string, unknown>;

package/angular/components/{edit-option-picker.component.ts → item-option-picker.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-picker',
+  selector: 'luzmo-item-option-picker',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-picker
+  template: `<luzmo-item-option-picker
         [attr.values]="values"
         [attr.disabled]="disabled"
         [attr.placement]="placement"
@@ -15,9 +15,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.default]="default"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-picker>`
+</luzmo-item-option-picker>`
 })
-export class EditOptionPickerComponent {
+export class ItemOptionPickerComponent {
   @Input() values?: any;
   @Input() disabled?: any;
   @Input() placement?: any;

package/angular/components/{edit-option-position-picker.component.ts → item-option-position-picker.component.ts}

@@ -2,19 +2,19 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-position-picker',
+  selector: 'luzmo-item-option-position-picker',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-position-picker
+  template: `<luzmo-item-option-position-picker
         [attr.value]="value"
         [attr.default-position]="defaultPosition"
         [attr.positions]="positions"
         [attr.readonly]="readonly"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-position-picker>`
+</luzmo-item-option-position-picker>`
 })
-export class EditOptionPositionPickerComponent {
+export class ItemOptionPositionPickerComponent {
   @Input() value?: any;
   @Input() defaultPosition?: any;
   @Input() positions?: any;

package/angular/components/{edit-option-positions-number-field.component.ts → item-option-positions-number-field.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-positions-number-field',
+  selector: 'luzmo-item-option-positions-number-field',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-positions-number-field
+  template: `<luzmo-item-option-positions-number-field
         [attr.positions]="positions"
         [attr.values]="values"
         [attr.can-sync]="canSync"
@@ -16,9 +16,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.sync]="sync"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-positions-number-field>`
+</luzmo-item-option-positions-number-field>`
 })
-export class EditOptionPositionsNumberFieldComponent {
+export class ItemOptionPositionsNumberFieldComponent {
   @Input() positions?: any;
   @Input() values?: any;
   @Input() canSync?: any;

package/angular/components/{edit-option-radio-button-group.component.ts → item-option-radio-button-group.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-radio-button-group',
+  selector: 'luzmo-item-option-radio-button-group',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-radio-button-group
+  template: `<luzmo-item-option-radio-button-group
         [attr.values]="values"
         [attr.disabled]="disabled"
         [attr.value]="value"
@@ -14,9 +14,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.toValue]="toValue"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-radio-button-group>`
+</luzmo-item-option-radio-button-group>`
 })
-export class EditOptionRadioButtonGroupComponent {
+export class ItemOptionRadioButtonGroupComponent {
   @Input() values?: any;
   @Input() disabled?: any;
   @Input() value?: any;

package/angular/components/{edit-option-slider.component.ts → item-option-slider.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-slider',
+  selector: 'luzmo-item-option-slider',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-slider
+  template: `<luzmo-item-option-slider
         [attr.value]="value"
         [attr.default]="default"
         [attr.min]="min"
@@ -16,9 +16,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.toValue]="toValue"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-slider>`
+</luzmo-item-option-slider>`
 })
-export class EditOptionSliderComponent {
+export class ItemOptionSliderComponent {
   @Input() value?: number;
   @Input() default?: number;
   @Input() min?: number;

package/angular/components/{edit-option-switch.component.ts → item-option-switch.component.ts}

@@ -2,19 +2,19 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-switch',
+  selector: 'luzmo-item-option-switch',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-switch
+  template: `<luzmo-item-option-switch
         [attr.value]="value"
         [attr.default]="default"
         [attr.parseValue]="parseValue"
         [attr.toValue]="toValue"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-switch>`
+</luzmo-item-option-switch>`
 })
-export class EditOptionSwitchComponent {
+export class ItemOptionSwitchComponent {
   @Input() value?: boolean;
   @Input() default?: boolean;
   @Input() parseValue?: any;

package/angular/components/{edit-option-text-field.component.ts → item-option-text-field.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 
 
 @Component({
-  selector: 'luzmo-edit-option-text-field',
+  selector: 'luzmo-item-option-text-field',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option-text-field
+  template: `<luzmo-item-option-text-field
         [attr.value]="value"
         [attr.invalid]="invalid"
         [attr.readonly]="readonly"
@@ -13,9 +13,9 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.debounce]="debounce"
         (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-text-field>`
+</luzmo-item-option-text-field>`
 })
-export class EditOptionTextFieldComponent {
+export class ItemOptionTextFieldComponent {
   @Input() value?: any;
   @Input() invalid?: any;
   @Input() readonly?: any;

package/angular/components/{edit-option.component.ts → item-option.component.ts}

@@ -2,10 +2,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import type { VizItemType, OptionConfig, OptionTranslation, TranslationOverrides, ThemeConfig, ElementSize } from '../types';
 
 @Component({
-  selector: 'luzmo-edit-option',
+  selector: 'luzmo-item-option',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<luzmo-edit-option
+  template: `<luzmo-item-option
         [attr.language]="language"
         [attr.item-type]="itemType"
         [attr.option-key]="optionKey"
@@ -20,9 +20,9 @@ import type { VizItemType, OptionConfig, OptionTranslation, TranslationOverrides
         [attr.size]="size"
 >
   <ng-content></ng-content>
-</luzmo-edit-option>`
+</luzmo-item-option>`
 })
-export class EditOptionComponent {
+export class ItemOptionComponent {
   @Input() language?: string;
   @Input() itemType?: VizItemType | string;
   @Input() optionKey?: string;