@luzmo/analytics-components-kit 1.0.1-alpha.116 → 1.0.1-alpha.118

package/angular/README.md

@@ -24,8 +24,50 @@ bootstrapApplication(AiChatMessageAssistantComponent);
 ## Available components
 - `AiChatMessageAssistantComponent` → <luzmo-ai-chat-message-assistant>
 - `AiChatMessageUserComponent` → <luzmo-ai-chat-message-user>
+- `AiChatMessagesContainerComponent` → <luzmo-ai-chat-messages-container>
 - `AiInteractionTextareaComponent` → <luzmo-ai-interaction-textarea>
+- `DataFieldsSelectComponent` → <luzmo-data-fields-select>
 - `DatasetIconComponent` → <luzmo-dataset-icon>
 - `DatasetSelectorListComponent` → <luzmo-dataset-selector-list>
 - `DatasetSelectorRowComponent` → <luzmo-dataset-selector-row>
+- `DisplaySettingsComponent` → <luzmo-display-settings>
+- `DisplaySettingsBinningComponent` → <luzmo-display-settings-binning>
+- `DisplaySettingsDatetimeComponent` → <luzmo-display-settings-datetime>
+- `DisplaySettingsGrandTotalsComponent` → <luzmo-display-settings-grand-totals>
+- `DisplaySettingsNumericComponent` → <luzmo-display-settings-numeric>
+- `DisplaySettingsPeriodOverPeriodComponent` → <luzmo-display-settings-period-over-period>
+- `DraggableDataFieldComponent` → <luzmo-draggable-data-field>
+- `DraggableDataFieldLevelComponent` → <luzmo-draggable-data-field-level>
+- `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>
+- `FilterValuePickerComponent` → <luzmo-filter-value-picker>
+- `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>
+- `SlotMenuComponent` → <luzmo-slot-menu>
+- `SlotMenuListComponent` → <luzmo-slot-menu-list>
 - `VizItemMenuComponent` → <luzmo-viz-item-menu>

package/angular/components/ai-chat-messages-container.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-ai-chat-messages-container',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-ai-chat-messages-container
+
+>
+  <ng-content></ng-content>
+</luzmo-ai-chat-messages-container>`
+})
+export class AiChatMessagesContainerComponent {
+
+
+}

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

@@ -0,0 +1,58 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { Placement, DataFieldExtended } from '../types';
+
+@Component({
+  selector: 'luzmo-data-fields-select',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-data-fields-select
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.label]="label"
+        [attr.icons]="icons"
+        [attr.allow-empty]="allowEmpty"
+        [attr.placeholder]="placeholder"
+        [attr.selects]="selects"
+        [attr.value]="value"
+        [attr.retrieving]="retrieving"
+        [attr.invalid]="invalid"
+        [attr.clearable]="clearable"
+        [attr.pending]="pending"
+        [attr.disabled]="disabled"
+        [attr.search]="search"
+        [attr.placement]="placement"
+        [attr.datasetsDataFields]="datasetsDataFields"
+        [attr.size]="size"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+        (luzmo-data-fields-selected)="luzmoDataFieldsSelected.emit($event)">
+  <ng-content></ng-content>
+</luzmo-data-fields-select>`
+})
+export class DataFieldsSelectComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() label?: string;
+  @Input() icons?: 'none' | 'menu-only' | 'all';
+  @Input() allowEmpty?: boolean;
+  @Input() placeholder?: string;
+  @Input() selects?: 'single' | 'multiple';
+  @Input() value?: string[];
+  @Input() retrieving?: boolean;
+  @Input() invalid?: boolean;
+  @Input() clearable?: boolean;
+  @Input() pending?: boolean;
+  @Input() disabled?: boolean;
+  @Input() search?: 'on' | 'off' | 'auto';
+  @Input() placement?: Placement;
+  @Input() datasetsDataFields?: {
+    id: string;
+    name: { [key: string]: string };
+    columns: DataFieldExtended[];
+    formulas: DataFieldExtended[];
+  }[];
+  @Input() size?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+  @Output() luzmoDataFieldsSelected = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { GenericSlotContent } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-binning',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-binning
+        [attr.language]="language"
+        [attr.slotContent]="slotContent"
+        [attr.size]="size"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-binning>`
+})
+export class DisplaySettingsBinningComponent {
+  @Input() language?: string;
+  @Input() slotContent?: GenericSlotContent;
+  @Input() size?: any;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/display-settings-datetime.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ElementSize, GenericSlotContent } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-datetime',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-datetime
+        [attr.language]="language"
+        [attr.contentLanguage]="contentLanguage"
+        [attr.size]="size"
+        [attr.slotContent]="slotContent"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-datetime>`
+})
+export class DisplaySettingsDatetimeComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() size?: ElementSize;
+  @Input() slotContent?: GenericSlotContent;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/display-settings-grand-totals.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { GenericSlotContent } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-grand-totals',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-grand-totals
+        [attr.language]="language"
+        [attr.slotContent]="slotContent"
+        [attr.size]="size"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-grand-totals>`
+})
+export class DisplaySettingsGrandTotalsComponent {
+  @Input() language?: string;
+  @Input() slotContent?: GenericSlotContent;
+  @Input() size?: any;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/display-settings-numeric.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { MeasureColumnsItem } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-numeric',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-numeric
+        [attr.language]="language"
+        [attr.measureColumns]="measureColumns"
+        [attr.isAggregationDisabled]="isAggregationDisabled"
+        [attr.isCumulativeSumEnabled]="isCumulativeSumEnabled"
+        [attr.size]="size"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-numeric>`
+})
+export class DisplaySettingsNumericComponent {
+  @Input() language?: string;
+  @Input() measureColumns?: MeasureColumnsItem[];
+  @Input() isAggregationDisabled?: boolean;
+  @Input() isCumulativeSumEnabled?: boolean;
+  @Input() size?: any;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/display-settings-period-over-period.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { PeriodOverPeriodCondition, Column } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-period-over-period',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-period-over-period
+        [attr.language]="language"
+        [attr.slot-content]="slotContent"
+        [attr.period-over-period-type]="periodOverPeriodType"
+        [attr.linked-dataset-datetime-columns]="linkedDatasetDatetimeColumns"
+        [attr.size]="size"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-period-over-period>`
+})
+export class DisplaySettingsPeriodOverPeriodComponent {
+  @Input() language?: string;
+  @Input() slotContent?: any;
+  @Input() periodOverPeriodType?: PeriodOverPeriodCondition;
+  @Input() linkedDatasetDatetimeColumns?: (Column & { datasetId: string })[];
+  @Input() size?: any;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { PeriodOverPeriodCondition, MeasureColumnsItem } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.hide-display-settings]="hideDisplaySettings"
+        [attr.isBinningDisabled]="isBinningDisabled"
+        [attr.areDatetimeOptionsEnabled]="areDatetimeOptionsEnabled"
+        [attr.areGrandTotalsEnabled]="areGrandTotalsEnabled"
+        [attr.isAggregationDisabled]="isAggregationDisabled"
+        [attr.isCumulativeSumEnabled]="isCumulativeSumEnabled"
+        [attr.periodOverPeriodUiType]="periodOverPeriodUiType"
+        [attr.show-remove-button]="showRemoveButton"
+        [attr.slot-type]="slotType"
+        [attr.measureColumns]="measureColumns"
+        [attr.size]="size"
+        (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)"
+        (luzmo-remove-slot-content)="luzmoRemoveSlotContent.emit($event)"
+        (luzmo-info-visibility-changed)="luzmoInfoVisibilityChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings>`
+})
+export class DisplaySettingsComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() hideDisplaySettings?: boolean;
+  @Input() isBinningDisabled?: boolean;
+  @Input() areDatetimeOptionsEnabled?: boolean;
+  @Input() areGrandTotalsEnabled?: boolean;
+  @Input() isAggregationDisabled?: boolean;
+  @Input() isCumulativeSumEnabled?: boolean;
+  @Input() periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
+  @Input() showRemoveButton?: boolean;
+  @Input() slotType?: string;
+  @Input() measureColumns?: MeasureColumnsItem[];
+  @Input() size?: any;
+  @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();
+  @Output() luzmoRemoveSlotContent = new EventEmitter<CustomEvent>();
+  @Output() luzmoInfoVisibilityChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DraggableDataFieldData } from '../types';
+
+@Component({
+  selector: 'luzmo-draggable-data-field-level',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-draggable-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-draggable-data-field-level>`
+})
+export class DraggableDataFieldLevelComponent {
+  @Input() variant?: 'highlight' | 'normal';
+  @Input() hideTypeIcon?: boolean;
+  @Input() sublevel?: boolean;
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() data?: DraggableDataFieldData;
+  @Input() size?: any;
+  @Output() luzmoDataFieldDropped = new EventEmitter<CustomEvent<{data: DraggableDataFieldData}>>();
+  @Output() luzmoDataFieldDragStarted = new EventEmitter<CustomEvent<{data: DraggableDataFieldData}>>();
+}

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

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DraggableDataFieldData } from '../types';
+
+@Component({
+  selector: 'luzmo-draggable-data-field',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-draggable-data-field
+        [attr.variant]="variant"
+        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.hide-sublevels]="hideSublevels"
+        [attr.hide-type-icon]="hideTypeIcon"
+        [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-draggable-data-field>`
+})
+export class DraggableDataFieldComponent {
+  @Input() variant?: 'highlight' | 'normal';
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() hideSublevels?: boolean;
+  @Input() hideTypeIcon?: boolean;
+  @Input() data?: DraggableDataFieldData;
+  @Input() size?: any;
+  @Output() luzmoDataFieldDropped = new EventEmitter<CustomEvent<{data: DraggableDataFieldData}>>();
+  @Output() luzmoDataFieldDragStarted = new EventEmitter<CustomEvent<{data: DraggableDataFieldData}>>();
+}

package/angular/components/draggable-data-fields-panel.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-draggable-data-fields-panel',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-draggable-data-fields-panel
+        [attr.dataset-ids]="datasetIds"
+        [attr.selected-dataset-id]="selectedDatasetId"
+        [attr.dataset-picker]="datasetPicker"
+        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.pending]="pending"
+        [attr.draggable-data-field-variant]="draggableDataFieldVariant"
+        [attr.search-quiet]="searchQuiet"
+        [attr.hide-type-icon]="hideTypeIcon"
+        [attr.hide-sublevels]="hideSublevels"
+        [attr.dataset-picker-placeholder]="datasetPickerPlaceholder"
+        [attr.api-url]="apiUrl"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.search]="search"
+        [attr.search-placeholder]="searchPlaceholder"
+        [attr.search-threshold]="searchThreshold"
+        [attr.size]="size"
+        (luzmo-dataset-changed)="luzmoDatasetChanged.emit($event)"
+        (luzmo-data-field-dropped)="luzmoDataFieldDropped.emit($event)"
+        (luzmo-data-field-drag-started)="luzmoDataFieldDragStarted.emit($event)">
+  <ng-content></ng-content>
+</luzmo-draggable-data-fields-panel>`
+})
+export class DraggableDataFieldsPanelComponent {
+  @Input() datasetIds?: string[];
+  @Input() selectedDatasetId?: string;
+  @Input() datasetPicker?: boolean;
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() pending?: boolean;
+  @Input() draggableDataFieldVariant?: 'highlight' | 'normal';
+  @Input() searchQuiet?: boolean;
+  @Input() hideTypeIcon?: boolean;
+  @Input() hideSublevels?: boolean;
+  @Input() datasetPickerPlaceholder?: string;
+  @Input() apiUrl?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() search?: string;
+  @Input() searchPlaceholder?: string;
+  @Input() searchThreshold?: number;
+  @Input() size?: any;
+  @Output() luzmoDatasetChanged = new EventEmitter<CustomEvent>();
+  @Output() luzmoDataFieldDropped = new EventEmitter<CustomEvent>();
+  @Output() luzmoDataFieldDragStarted = new EventEmitter<CustomEvent>();
+}

package/angular/components/droppable-slot/types.ts

@@ -3,6 +3,10 @@ import { ColumnType, FormulaType, GenericSlotContent, SlotConfig } from '@luzmo/
 export type DroppableSlotConfiguration = Omit<SlotConfig, 'acceptableColumnTypes' | 'canAcceptMultipleColumns'> & {
   acceptableDataFieldTypes?: (ColumnType | FormulaType)[];
   canAcceptMultipleDataFields?: boolean;
+  keepOnlyFirstWhenOtherSlotFilled?: SlotConfig['name'][];
+  clearWhenOtherSlotHasMultipleItems?: SlotConfig['name'][];
+  canAcceptDataIndependentOf?: SlotConfig['name'][];
+  activeWhenSubtype?: string[];
 };
 
 export interface SlotContentsChangedEventDetail {

package/angular/components/droppable-slot.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { VizItemType, SlotName, DroppableSlotConfiguration, VizItemSlots, Placement, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail } from '../types';
+
+@Component({
+  selector: 'luzmo-droppable-slot',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-droppable-slot
+        [attr.item-type]="itemType"
+        [attr.slot-name]="slotName"
+        [attr.slotConfiguration]="slotConfiguration"
+        [attr.slotsContents]="slotsContents"
+        [attr.label]="label"
+        [attr.language]="language"
+        [attr.drag-boundary]="dragBoundary"
+        [attr.rotate]="rotate"
+        [attr.api-url]="apiUrl"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.menu]="menu"
+        [attr.placement]="placement"
+        [attr.hide-delete]="hideDelete"
+        [attr.hide-configuration]="hideConfiguration"
+        [attr.size]="size"
+        (luzmo-slot-menu-inactive)="luzmoSlotMenuInactive.emit($event)"
+        (luzmo-slot-menu-active)="luzmoSlotMenuActive.emit($event)"
+        (luzmo-slot-menu-highlight)="luzmoSlotMenuHighlight.emit($event)"
+        (luzmo-info-visibility-changed)="luzmoInfoVisibilityChanged.emit($event)"
+        (luzmo-slot-contents-changed)="luzmoSlotContentsChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-droppable-slot>`
+})
+export class DroppableSlotComponent {
+  @Input() itemType?: VizItemType;
+  @Input() slotName?: SlotName;
+  @Input() slotConfiguration?: DroppableSlotConfiguration;
+  @Input() slotsContents?: VizItemSlots;
+  @Input() label?: string;
+  @Input() language?: string;
+  @Input() dragBoundary?: string;
+  @Input() rotate?: boolean;
+  @Input() apiUrl?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() menu?: 'default' | 'draggable' | 'event-only';
+  @Input() placement?: Placement;
+  @Input() hideDelete?: boolean;
+  @Input() hideConfiguration?: boolean;
+  @Input() size?: any;
+  @Output() luzmoSlotMenuInactive = new EventEmitter<CustomEvent>();
+  @Output() luzmoSlotMenuActive = new EventEmitter<CustomEvent>();
+  @Output() luzmoSlotMenuHighlight = new EventEmitter<CustomEvent>();
+  @Output() luzmoInfoVisibilityChanged = new EventEmitter<CustomEvent<InfoVisibilityChangedEventDetail>>();
+  @Output() luzmoSlotContentsChanged = new EventEmitter<CustomEvent<SlotContentsChangedEventDetail>>();
+}

package/angular/components/edit-filters.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { FilterGroup } from '../types';
+
+@Component({
+  selector: 'luzmo-edit-filters',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-filters
+        [attr.api-url]="apiUrl"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.cache-time]="cacheTime"
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.time-zone]="timeZone"
+        [attr.dataset-ids]="datasetIds"
+        [attr.filters]="filters"
+        [attr.size]="size"
+        [attr.disabled]="disabled"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)"
+        (filters-changed)="filtersChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-filters>`
+})
+export class EditFiltersComponent {
+  @Input() apiUrl?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() cacheTime?: number;
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() timeZone?: string;
+  @Input() datasetIds?: string[];
+  @Input() filters?: FilterGroup | null;
+  @Input() size?: any;
+  @Input() disabled?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+  @Output() luzmoFiltersChanged = new EventEmitter<CustomEvent>();
+  @Output() filtersChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/edit-item.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ThemeConfig, ElementSize } from '../types';
+
+@Component({
+  selector: 'luzmo-edit-item',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-item
+        [attr.language]="language"
+        [attr.item-type]="itemType"
+        [attr.options]="options"
+        [attr.slots]="slots"
+        [attr.customOptionsConfiguration]="customOptionsConfiguration"
+        [attr.customTranslations]="customTranslations"
+        [attr.theme]="theme"
+        [attr.size]="size"
+        [attr.api-url]="apiUrl"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        (options-changed)="optionsChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-item>`
+})
+export class EditItemComponent {
+  @Input() language?: string;
+  @Input() itemType?: string;
+  @Input() options?: any;
+  @Input() slots?: any;
+  @Input() customOptionsConfiguration?: any;
+  @Input() customTranslations?: any;
+  @Input() theme?: ThemeConfig & Record<string, any>;
+  @Input() size?: ElementSize;
+  @Input() apiUrl?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Output() optionsChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/edit-option-action-button-group.component.ts

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

package/angular/components/edit-option-color-palette-picker.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-edit-option-color-palette-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-option-color-palette-picker
+        [attr.value]="value"
+        [attr.default]="default"
+        [attr.values]="values"
+        [attr.disabled]="disabled"
+        [attr.horizontal]="horizontal"
+        [attr.parseValue]="parseValue"
+        [attr.toValue]="toValue"
+        [attr.number-of-colors]="numberOfColors"
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-option-color-palette-picker>`
+})
+export class EditOptionColorPalettePickerComponent {
+  @Input() value?: any;
+  @Input() default?: any;
+  @Input() values?: any;
+  @Input() disabled?: any;
+  @Input() horizontal?: any;
+  @Input() parseValue?: any;
+  @Input() toValue?: any;
+  @Input() numberOfColors?: any;
+  @Output() luzmoOptionChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/edit-option-color-picker.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-edit-option-color-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-option-color-picker
+        [attr.swatches]="swatches"
+        [attr.rounding]="rounding"
+        [attr.shape]="shape"
+        [attr.debounce]="debounce"
+        [attr.value]="value"
+        [attr.disabled]="disabled"
+        [attr.noAlphaChannel]="noAlphaChannel"
+        [attr.placement]="placement"
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
+        (option-changed)="optionChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-option-color-picker>`
+})
+export class EditOptionColorPickerComponent {
+  @Input() swatches?: string[];
+  @Input() rounding?: 'full' | 'light' | 'none';
+  @Input() shape?: 'circle' | 'rectangle';
+  @Input() debounce?: number;
+  @Input() value?: any;
+  @Input() disabled?: any;
+  @Input() noAlphaChannel?: any;
+  @Input() placement?: any;
+  @Output() luzmoOptionChanged = new EventEmitter<CustomEvent>();
+  @Output() optionChanged = new EventEmitter<CustomEvent>();
+}