@luzmo/analytics-components-kit 1.0.1-alpha.119 → 1.0.1-alpha.120

package/README.md

@@ -19,7 +19,8 @@ npm install @luzmo/analytics-components-kit
 ## Table of contents
 
 - [Available Components](#available-components)
-  - [Data Components](#data-components)
+  - [Panel Components (Recommended)](#panel-components-recommended)
+  - [Data Components (Individual)](#data-components-individual)
   - [Filter Components](#filter-components)
   - [Display Settings](#display-settings)
   - [Layout Components](#layout-components)
@@ -57,7 +58,19 @@ npm install @luzmo/analytics-components-kit
 
 ## Available Components
 
-### Data Components
+### Panel Components (Recommended)
+
+| Component                   | Import                                                        | Description                                                         |
+| --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------- |
+| Draggable Data Fields Panel | `@luzmo/analytics-components-kit/draggable-data-fields-panel` | Panel displaying draggable data fields from datasets                |
+| Item Data Drop Panel        | `@luzmo/analytics-components-kit/item-data-drop-panel`        | Drop panel for chart slot configuration                             |
+| Item Data Picker Panel      | `@luzmo/analytics-components-kit/item-data-picker-panel`      | Dropdown-based panel for chart slot configuration (mobile-friendly) |
+
+> **Note**: Use `Draggable Data Fields Panel` together with `Item Data Drop Panel` for a complete drag & drop experience. Use `Item Data Picker Panel` as a mobile-friendly alternative; swap between them with media queries.
+>
+> Prefer panel components over individual data components. Panels automatically handle slot constraints (e.g., "no multiple measures if legend is filled"). If using individual components directly, you must implement these constraints yourself.
+
+### Data Components (Individual)
 
 | Component            | Import                                                 | Description                                             |
 | -------------------- | ------------------------------------------------------ | ------------------------------------------------------- |
@@ -94,16 +107,31 @@ npm install @luzmo/analytics-components-kit
 ## Utilities
 
 ```typescript
-import { loadDraggableFieldsForDatasets } from '@luzmo/analytics-components-kit/utils';
+import { loadDraggableFieldsForDatasets, switchItem, transformFilters } from '@luzmo/analytics-components-kit/utils';
+import { itemTypes } from '@luzmo/analytics-components-kit/item-list';
 
-// Load datasets with draggable data fields
-const datasets = await loadDraggableFieldsForDatasets(['dataset-id-1', 'dataset-id-2'], {
+// Load datasets with draggable data fields (for manual rendering)
+const datasets = await loadDraggableFieldsForDatasets(['dataset-id-1'], {
   dataBrokerConfig: {
     apiUrl: 'https://api.luzmo.com',
     authKey: 'your-auth-key',
     authToken: 'your-auth-token'
   }
 });
+
+// Switch chart type while preserving compatible slot data
+const newItem = switchItem({
+  oldItemType: 'bar-chart',
+  newItemType: 'line-chart',
+  slots: currentSlots,
+  options: currentOptions
+});
+
+// Transform filter groups for use with Luzmo charts
+const chartFilters = transformFilters(filterGroup);
+
+// Get list of available chart types (for building a chart picker)
+const chartOptions = itemTypes.map((item) => ({ label: item.label, value: item.type }));
 ```
 
 ## Usage: Drag & Drop Data Flow
@@ -112,92 +140,113 @@ This library provides a complete drag-and-drop system for building Luzmo chart c
 
 ### Concept
 
-1. **Load datasets**: Use `loadDraggableFieldsForDatasets()` to fetch datasets with their columns and formulas from the Luzmo API
-2. **Display draggable data fields**: Render each column/formula as a `<luzmo-draggable-data-field>` component
-3. **Define droppable slots**: Create `<luzmo-droppable-slot>` components representing data slots of a Luzmo chart (e.g., 'Y-axis', 'Measure' and 'Legend' for a bar chart)
-4. **Handle drops on the slot**: On each `<luzmo-droppable-slot>`, listen to the `slot-contents-changed` event to capture data dropped into each slot
-5. **Use slot contents**: The slot contents are in the format expected by Luzmo charts and can be passed directly to the slots array of Luzmo Flex SDK visualization components
+1. **Add panel components**: Use `<luzmo-draggable-data-fields-panel>` for data fields and `<luzmo-item-data-drop-panel>` for slots (or `<luzmo-item-data-picker-panel>` for mobile)
+2. **Configure panels**: Set `item-type` (e.g., 'bar-chart') and `datasetIds` - panels auto-load slot configurations and fetch data
+3. **Handle slot changes**: Listen to `luzmo-slots-contents-changed` event to capture the complete slots state
+4. **Use slot contents**: Pass `slotsContents` directly to Luzmo Flex SDK visualization components
 
-### Example Implementation
+### Example Implementation (Panel Components)
 
 #### TypeScript
 
 ```typescript
-import '@luzmo/analytics-components-kit/draggable-data-field';
-import '@luzmo/analytics-components-kit/droppable-slot';
-import { loadDraggableFieldsForDatasets } from '@luzmo/analytics-components-kit/utils';
-import barChartSlotsConfig from '@luzmo/analytics-components-kit/item-definitions/bar-chart/bar-chart-slots.config';
-
-// Load datasets with their columns and formulas
-const datasets = await loadDraggableFieldsForDatasets(['dataset-id-1', 'dataset-id-2'], {
-  dataBrokerConfig: {
-    apiUrl: 'https://api.luzmo.com',
-    authKey: 'your-auth-key',
-    authToken: 'your-auth-token'
-  }
-});
-
-// Slots configuration for a bar chart
-const slotsConfig = barChartSlotsConfig;
-
-// Store slot contents for the chart
-let chartSlots = {};
+import '@luzmo/analytics-components-kit/draggable-data-fields-panel';
+import '@luzmo/analytics-components-kit/item-data-drop-panel';
+import '@luzmo/analytics-components-kit/item-data-picker-panel';
+import { switchItem } from '@luzmo/analytics-components-kit/utils';
+
+const DATASET_ID = 'your-dataset-id';
+const API_CONFIG = {
+  apiUrl: 'https://api.luzmo.com',
+  authKey: 'your-auth-key',
+  authToken: 'your-auth-token'
+};
+
+// State
+let activeItem = {
+  type: 'bar-chart',
+  options: {},
+  slots: []
+};
+
+// Handle slot content changes (same handler for both panels)
+function handleSlotsChange(event: CustomEvent) {
+  activeItem.slots = event.detail.slotsContents;
+  // Update your Luzmo chart with the new slots
+}
 
-// Handle slot content changes
-function handleSlotChange(event, slotName) {
-  chartSlots[slotName] = event.detail.slotContents;
-  // Update your Luzmo chart with the new slot configuration
+// Switch chart type while preserving compatible data
+function handleItemTypeChange(newType: string) {
+  const newItem = switchItem({
+    oldItemType: activeItem.type,
+    newItemType: newType,
+    slots: activeItem.slots,
+    options: activeItem.options
+  });
+  activeItem = { ...newItem };
 }
 ```
 
 #### HTML
 
 ```html
-<!-- Data items panel: Display draggable columns/formulas -->
-<div class="data-panel">
-  <h3>Available Data</h3>
-  ${datasets.map(dataset => html`
-  <div class="dataset">
-    <h4>${dataset.name}</h4>
-    ${dataset.columns.map(column => html`
-    <luzmo-draggable-data-field
-      size="m"
-      language="en"
-      .data="${column}"
-    ></luzmo-draggable-data-field>
-    `)}
-  </div>
-  `)}
+<!-- Desktop: Drag & drop experience -->
+<div
+  class="drag-and-drop-panel"
+  style="display: flex; gap: 1rem;"
+>
+  <luzmo-draggable-data-fields-panel
+    .datasetIds="${[DATASET_ID]}"
+    .apiUrl="${API_CONFIG.apiUrl}"
+    .authKey="${API_CONFIG.authKey}"
+    .authToken="${API_CONFIG.authToken}"
+    draggable-data-field-variant="highlight"
+    language="en"
+    size="m"
+  >
+  </luzmo-draggable-data-fields-panel>
+
+  <luzmo-item-data-drop-panel
+    .itemType="${activeItem.type}"
+    .slotsContents="${activeItem.slots}"
+    .apiUrl="${API_CONFIG.apiUrl}"
+    .authKey="${API_CONFIG.authKey}"
+    .authToken="${API_CONFIG.authToken}"
+    grows
+    language="en"
+    size="m"
+    @luzmo-slots-contents-changed="${handleSlotsChange}"
+  >
+  </luzmo-item-data-drop-panel>
 </div>
 
-<!-- Chart configuration: Droppable slots -->
-<div class="chart-config">
-  <h3>Bar Chart Configuration</h3>
-  ${slotsConfig.map(slot => html`
-  <luzmo-droppable-slot
-    item-type="bar-chart"
-    slot-name="${slot.name}"
-    label="${slot.label}"
+<!-- Mobile: Picker experience (toggle visibility with CSS/JS) -->
+<div class="picker-panel">
+  <luzmo-item-data-picker-panel
+    .itemType="${activeItem.type}"
+    .slotsContents="${activeItem.slots}"
+    .datasetIds="${[DATASET_ID]}"
+    .apiUrl="${API_CONFIG.apiUrl}"
+    .authKey="${API_CONFIG.authKey}"
+    .authToken="${API_CONFIG.authToken}"
+    grows
+    selects="multiple"
+    language="en"
     size="m"
-    .slotConfiguration="${slot}"
-    @slot-contents-changed="${(e)"
-    =""
-  >
-    handleSlotChange(e, slot.name)} ></luzmo-droppable-slot
+    @luzmo-slots-contents-changed="${handleSlotsChange}"
   >
-  `)}
+  </luzmo-item-data-picker-panel>
 </div>
 ```
 
 ### Key Points
 
-- `loadDraggableFieldsForDatasets()` handles authentication, fetches datasets, and transforms them into the correct format for draggable fields
-- Chart slot config can be imported from `item-definitions/{chart-type}/{chart-type}-slots.config` to dynamically create appropriate drop zones
-- `<luzmo-draggable-data-field>` automatically handles drag behavior and displays columns/formulas with appropriate icons and hierarchy levels
-- `<luzmo-droppable-slot>` validates drops based on configuration (e.g., only numeric types for measures) and emits `slot-contents-changed` event
-- Slot configuration defines validation rules like `canAcceptMultipleDataFields`, `canAcceptFormula`, and `acceptableDataFieldTypes`
-- Slot contents returned from the event are already in the format expected by Luzmo chart components
-- The transformation from `DraggableDataField` to `GenericSlotContent` happens automatically when dropping
+- **Panel components handle complexity**: Panels auto-load slot configurations based on `item-type` and handle slot constraints automatically
+- **Same event for both panels**: Both `item-data-drop-panel` and `item-data-picker-panel` emit `luzmo-slots-contents-changed` with `event.detail.slotsContents`
+- **Auto-fetch data**: Pass `datasetIds` to let panels fetch dataset columns/formulas automatically
+- **Responsive patterns**: Use CSS media queries to show drag & drop on desktop and picker on mobile
+- **Chart type switching**: Use `switchItem()` utility to change chart types while preserving compatible slot data
+- **Slot contents format**: The `slotsContents` array is in the format expected by Luzmo Flex SDK visualization components
 
 ## Item Definitions
 

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

@@ -19,8 +19,7 @@ import type { FilterGroup } from '../types';
         [attr.disabled]="disabled"
         [attr.autofocus]="autofocus"
         [attr.tabIndex]="tabIndex"
-        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)"
-        (filters-changed)="filtersChanged.emit($event)">
+        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-filters>`
 })
@@ -39,5 +38,4 @@ export class EditFiltersComponent {
   @Input() autofocus?: any;
   @Input() tabIndex?: any;
   @Output() luzmoFiltersChanged = new EventEmitter<CustomEvent>();
-  @Output() filtersChanged = new EventEmitter<CustomEvent>();
 }

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

@@ -17,7 +17,7 @@ import type { ThemeConfig, ElementSize } from '../types';
         [attr.api-url]="apiUrl"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
-        (options-changed)="optionsChanged.emit($event)">
+        (luzmo-options-changed)="luzmoOptionsChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-item>`
 })
@@ -33,5 +33,5 @@ export class EditItemComponent {
   @Input() apiUrl?: string;
   @Input() authKey?: string;
   @Input() authToken?: string;
-  @Output() optionsChanged = new EventEmitter<CustomEvent>();
+  @Output() luzmoOptionsChanged = new EventEmitter<CustomEvent>();
 }

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

@@ -14,8 +14,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.disabled]="disabled"
         [attr.noAlphaChannel]="noAlphaChannel"
         [attr.placement]="placement"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-option-color-picker>`
 })
@@ -29,5 +28,4 @@ export class EditOptionColorPickerComponent {
   @Input() noAlphaChannel?: any;
   @Input() placement?: any;
   @Output() luzmoOptionChanged = new EventEmitter<CustomEvent>();
-  @Output() optionChanged = new EventEmitter<CustomEvent>();
 }

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

@@ -20,8 +20,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.debounce]="debounce"
         [attr.parseValue]="parseValue"
         [attr.toValue]="toValue"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-option-color-range>`
 })
@@ -41,5 +40,4 @@ export class EditOptionColorRangeComponent {
   @Input() parseValue?: any;
   @Input() toValue?: any;
   @Output() luzmoOptionChanged = new EventEmitter<CustomEvent>();
-  @Output() optionChanged = new EventEmitter<CustomEvent>();
 }

package/angular/components/grid.component.ts

@@ -23,9 +23,7 @@ import type { Placement, InputActionGroup, GridItemData, GridItemRenderer } from
         [attr.renderers]="renderers"
         (luzmo-grid-changed)="luzmoGridChanged.emit($event)"
         (luzmo-grid-ready)="luzmoGridReady.emit($event)"
-        (grid-item-action)="gridItemAction.emit($event)"
-        (grid-changed)="gridChanged.emit($event)"
-        (grid-ready)="gridReady.emit($event)">
+        (luzmo-grid-item-action)="luzmoGridItemAction.emit($event)">
   <ng-content></ng-content>
 </luzmo-grid>`
 })
@@ -47,7 +45,5 @@ export class GridComponent {
   @Input() renderers?: Record<string, GridItemRenderer>;
   @Output() luzmoGridChanged = new EventEmitter<CustomEvent>();
   @Output() luzmoGridReady = new EventEmitter<CustomEvent>();
-  @Output() gridItemAction = new EventEmitter<CustomEvent>();
-  @Output() gridChanged = new EventEmitter<CustomEvent>();
-  @Output() gridReady = new EventEmitter<CustomEvent>();
+  @Output() luzmoGridItemAction = new EventEmitter<CustomEvent>();
 }

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

@@ -16,7 +16,6 @@ export declare class EditFiltersComponent {
     autofocus?: any;
     tabIndex?: any;
     luzmoFiltersChanged: EventEmitter<CustomEvent<any>>;
-    filtersChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditFiltersComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditFiltersComponent, "luzmo-edit-filters", never, { "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "datasetIds": { "alias": "datasetIds"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoFiltersChanged": "luzmoFiltersChanged"; "filtersChanged": "filtersChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditFiltersComponent, "luzmo-edit-filters", never, { "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "datasetIds": { "alias": "datasetIds"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoFiltersChanged": "luzmoFiltersChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/edit-filters.component.js

@@ -15,9 +15,8 @@ export class EditFiltersComponent {
     autofocus;
     tabIndex;
     luzmoFiltersChanged = new EventEmitter();
-    filtersChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditFiltersComponent, isStandalone: true, selector: "luzmo-edit-filters", inputs: { apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", cacheTime: "cacheTime", language: "language", contentLanguage: "contentLanguage", timeZone: "timeZone", datasetIds: "datasetIds", filters: "filters", size: "size", disabled: "disabled", autofocus: "autofocus", tabIndex: "tabIndex" }, outputs: { luzmoFiltersChanged: "luzmoFiltersChanged", filtersChanged: "filtersChanged" }, ngImport: i0, template: `<luzmo-edit-filters
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditFiltersComponent, isStandalone: true, selector: "luzmo-edit-filters", inputs: { apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", cacheTime: "cacheTime", language: "language", contentLanguage: "contentLanguage", timeZone: "timeZone", datasetIds: "datasetIds", filters: "filters", size: "size", disabled: "disabled", autofocus: "autofocus", tabIndex: "tabIndex" }, outputs: { luzmoFiltersChanged: "luzmoFiltersChanged" }, ngImport: i0, template: `<luzmo-edit-filters
         [attr.api-url]="apiUrl"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
@@ -31,10 +30,9 @@ export class EditFiltersComponent {
         [attr.disabled]="disabled"
         [attr.autofocus]="autofocus"
         [attr.tabIndex]="tabIndex"
-        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)"
-        (filters-changed)="filtersChanged.emit($event)">
+        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-filters>`, isInline: true, dependencies: [{ kind: "component", type: EditFiltersComponent, selector: "luzmo-edit-filters", inputs: ["apiUrl", "authKey", "authToken", "cacheTime", "language", "contentLanguage", "timeZone", "datasetIds", "filters", "size", "disabled", "autofocus", "tabIndex"], outputs: ["luzmoFiltersChanged", "filtersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-edit-filters>`, isInline: true, dependencies: [{ kind: "component", type: EditFiltersComponent, selector: "luzmo-edit-filters", inputs: ["apiUrl", "authKey", "authToken", "cacheTime", "language", "contentLanguage", "timeZone", "datasetIds", "filters", "size", "disabled", "autofocus", "tabIndex"], outputs: ["luzmoFiltersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditFiltersComponent, decorators: [{
             type: Component,
@@ -56,8 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.disabled]="disabled"
         [attr.autofocus]="autofocus"
         [attr.tabIndex]="tabIndex"
-        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)"
-        (filters-changed)="filtersChanged.emit($event)">
+        (luzmo-filters-changed)="luzmoFiltersChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-filters>`
                 }]
@@ -89,6 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], luzmoFiltersChanged: [{
                 type: Output
-            }], filtersChanged: [{
-                type: Output
             }] } });

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

@@ -13,7 +13,7 @@ export declare class EditItemComponent {
     apiUrl?: string;
     authKey?: string;
     authToken?: string;
-    optionsChanged: EventEmitter<CustomEvent<any>>;
+    luzmoOptionsChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditItemComponent, "luzmo-edit-item", never, { "language": { "alias": "language"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "options": { "alias": "options"; "required": false; }; "slots": { "alias": "slots"; "required": false; }; "customOptionsConfiguration": { "alias": "customOptionsConfiguration"; "required": false; }; "customTranslations": { "alias": "customTranslations"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; }, { "optionsChanged": "optionsChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditItemComponent, "luzmo-edit-item", never, { "language": { "alias": "language"; "required": false; }; "itemType": { "alias": "itemType"; "required": false; }; "options": { "alias": "options"; "required": false; }; "slots": { "alias": "slots"; "required": false; }; "customOptionsConfiguration": { "alias": "customOptionsConfiguration"; "required": false; }; "customTranslations": { "alias": "customTranslations"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; }, { "luzmoOptionsChanged": "luzmoOptionsChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/edit-item.component.js

@@ -12,9 +12,9 @@ export class EditItemComponent {
     apiUrl;
     authKey;
     authToken;
-    optionsChanged = new EventEmitter();
+    luzmoOptionsChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditItemComponent, isStandalone: true, selector: "luzmo-edit-item", inputs: { language: "language", itemType: "itemType", options: "options", slots: "slots", customOptionsConfiguration: "customOptionsConfiguration", customTranslations: "customTranslations", theme: "theme", size: "size", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken" }, outputs: { optionsChanged: "optionsChanged" }, ngImport: i0, template: `<luzmo-edit-item
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditItemComponent, isStandalone: true, selector: "luzmo-edit-item", inputs: { language: "language", itemType: "itemType", options: "options", slots: "slots", customOptionsConfiguration: "customOptionsConfiguration", customTranslations: "customTranslations", theme: "theme", size: "size", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken" }, outputs: { luzmoOptionsChanged: "luzmoOptionsChanged" }, ngImport: i0, template: `<luzmo-edit-item
         [attr.language]="language"
         [attr.item-type]="itemType"
         [attr.options]="options"
@@ -26,9 +26,9 @@ export class EditItemComponent {
         [attr.api-url]="apiUrl"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
-        (options-changed)="optionsChanged.emit($event)">
+        (luzmo-options-changed)="luzmoOptionsChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-item>`, isInline: true, dependencies: [{ kind: "component", type: EditItemComponent, selector: "luzmo-edit-item", inputs: ["language", "itemType", "options", "slots", "customOptionsConfiguration", "customTranslations", "theme", "size", "apiUrl", "authKey", "authToken"], outputs: ["optionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-edit-item>`, isInline: true, dependencies: [{ kind: "component", type: EditItemComponent, selector: "luzmo-edit-item", inputs: ["language", "itemType", "options", "slots", "customOptionsConfiguration", "customTranslations", "theme", "size", "apiUrl", "authKey", "authToken"], outputs: ["luzmoOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditItemComponent, decorators: [{
             type: Component,
@@ -48,7 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.api-url]="apiUrl"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
-        (options-changed)="optionsChanged.emit($event)">
+        (luzmo-options-changed)="luzmoOptionsChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-item>`
                 }]
@@ -74,6 +74,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], authToken: [{
                 type: Input
-            }], optionsChanged: [{
+            }], luzmoOptionsChanged: [{
                 type: Output
             }] } });

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

@@ -10,7 +10,6 @@ export declare class EditOptionColorPickerComponent {
     noAlphaChannel?: any;
     placement?: any;
     luzmoOptionChanged: EventEmitter<CustomEvent<any>>;
-    optionChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditOptionColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditOptionColorPickerComponent, "luzmo-edit-option-color-picker", never, { "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "optionChanged": "optionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditOptionColorPickerComponent, "luzmo-edit-option-color-picker", never, { "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/edit-option-color-picker.component.js

@@ -10,9 +10,8 @@ export class EditOptionColorPickerComponent {
     noAlphaChannel;
     placement;
     luzmoOptionChanged = new EventEmitter();
-    optionChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditOptionColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditOptionColorPickerComponent, isStandalone: true, selector: "luzmo-edit-option-color-picker", inputs: { swatches: "swatches", rounding: "rounding", shape: "shape", debounce: "debounce", value: "value", disabled: "disabled", noAlphaChannel: "noAlphaChannel", placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", optionChanged: "optionChanged" }, ngImport: i0, template: `<luzmo-edit-option-color-picker
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditOptionColorPickerComponent, isStandalone: true, selector: "luzmo-edit-option-color-picker", inputs: { swatches: "swatches", rounding: "rounding", shape: "shape", debounce: "debounce", value: "value", disabled: "disabled", noAlphaChannel: "noAlphaChannel", placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, ngImport: i0, template: `<luzmo-edit-option-color-picker
         [attr.swatches]="swatches"
         [attr.rounding]="rounding"
         [attr.shape]="shape"
@@ -21,10 +20,9 @@ export class EditOptionColorPickerComponent {
         [attr.disabled]="disabled"
         [attr.noAlphaChannel]="noAlphaChannel"
         [attr.placement]="placement"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-color-picker>`, isInline: true, dependencies: [{ kind: "component", type: EditOptionColorPickerComponent, selector: "luzmo-edit-option-color-picker", inputs: ["swatches", "rounding", "shape", "debounce", "value", "disabled", "noAlphaChannel", "placement"], outputs: ["luzmoOptionChanged", "optionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-edit-option-color-picker>`, isInline: true, dependencies: [{ kind: "component", type: EditOptionColorPickerComponent, selector: "luzmo-edit-option-color-picker", inputs: ["swatches", "rounding", "shape", "debounce", "value", "disabled", "noAlphaChannel", "placement"], outputs: ["luzmoOptionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditOptionColorPickerComponent, decorators: [{
             type: Component,
@@ -41,8 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.disabled]="disabled"
         [attr.noAlphaChannel]="noAlphaChannel"
         [attr.placement]="placement"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-option-color-picker>`
                 }]
@@ -64,6 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], luzmoOptionChanged: [{
                 type: Output
-            }], optionChanged: [{
-                type: Output
             }] } });

package/angular/esm/components/edit-option-color-range.component.d.ts

@@ -16,7 +16,6 @@ export declare class EditOptionColorRangeComponent {
     parseValue?: any;
     toValue?: any;
     luzmoOptionChanged: EventEmitter<CustomEvent<any>>;
-    optionChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditOptionColorRangeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditOptionColorRangeComponent, "luzmo-edit-option-color-range", never, { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "editRangeSize": { "alias": "editRangeSize"; "required": false; }; "noValues": { "alias": "noValues"; "required": false; }; "minimumRangeSize": { "alias": "minimumRangeSize"; "required": false; }; "negativeInfinityValue": { "alias": "negativeInfinityValue"; "required": false; }; "readOnlyColorPicker": { "alias": "readOnlyColorPicker"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "optionChanged": "optionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditOptionColorRangeComponent, "luzmo-edit-option-color-range", never, { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "editRangeSize": { "alias": "editRangeSize"; "required": false; }; "noValues": { "alias": "noValues"; "required": false; }; "minimumRangeSize": { "alias": "minimumRangeSize"; "required": false; }; "negativeInfinityValue": { "alias": "negativeInfinityValue"; "required": false; }; "readOnlyColorPicker": { "alias": "readOnlyColorPicker"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/edit-option-color-range.component.js

@@ -16,9 +16,8 @@ export class EditOptionColorRangeComponent {
     parseValue;
     toValue;
     luzmoOptionChanged = new EventEmitter();
-    optionChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditOptionColorRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditOptionColorRangeComponent, isStandalone: true, selector: "luzmo-edit-option-color-range", inputs: { value: "value", default: "default", disabled: "disabled", percentage: "percentage", noAlphaChannel: "noAlphaChannel", editRangeSize: "editRangeSize", noValues: "noValues", minimumRangeSize: "minimumRangeSize", negativeInfinityValue: "negativeInfinityValue", readOnlyColorPicker: "readOnlyColorPicker", reverse: "reverse", debounce: "debounce", parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", optionChanged: "optionChanged" }, ngImport: i0, template: `<luzmo-edit-option-color-range
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: EditOptionColorRangeComponent, isStandalone: true, selector: "luzmo-edit-option-color-range", inputs: { value: "value", default: "default", disabled: "disabled", percentage: "percentage", noAlphaChannel: "noAlphaChannel", editRangeSize: "editRangeSize", noValues: "noValues", minimumRangeSize: "minimumRangeSize", negativeInfinityValue: "negativeInfinityValue", readOnlyColorPicker: "readOnlyColorPicker", reverse: "reverse", debounce: "debounce", parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, ngImport: i0, template: `<luzmo-edit-option-color-range
         [attr.value]="value"
         [attr.default]="default"
         [attr.disabled]="disabled"
@@ -33,10 +32,9 @@ export class EditOptionColorRangeComponent {
         [attr.debounce]="debounce"
         [attr.parseValue]="parseValue"
         [attr.toValue]="toValue"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-edit-option-color-range>`, isInline: true, dependencies: [{ kind: "component", type: EditOptionColorRangeComponent, selector: "luzmo-edit-option-color-range", inputs: ["value", "default", "disabled", "percentage", "noAlphaChannel", "editRangeSize", "noValues", "minimumRangeSize", "negativeInfinityValue", "readOnlyColorPicker", "reverse", "debounce", "parseValue", "toValue"], outputs: ["luzmoOptionChanged", "optionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-edit-option-color-range>`, isInline: true, dependencies: [{ kind: "component", type: EditOptionColorRangeComponent, selector: "luzmo-edit-option-color-range", inputs: ["value", "default", "disabled", "percentage", "noAlphaChannel", "editRangeSize", "noValues", "minimumRangeSize", "negativeInfinityValue", "readOnlyColorPicker", "reverse", "debounce", "parseValue", "toValue"], outputs: ["luzmoOptionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: EditOptionColorRangeComponent, decorators: [{
             type: Component,
@@ -59,8 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.debounce]="debounce"
         [attr.parseValue]="parseValue"
         [attr.toValue]="toValue"
-        (luzmo-option-changed)="luzmoOptionChanged.emit($event)"
-        (option-changed)="optionChanged.emit($event)">
+        (luzmo-option-changed)="luzmoOptionChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-edit-option-color-range>`
                 }]
@@ -94,6 +91,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], luzmoOptionChanged: [{
                 type: Output
-            }], optionChanged: [{
-                type: Output
             }] } });

package/angular/esm/components/grid.component.d.ts

@@ -19,9 +19,7 @@ export declare class GridComponent {
     renderers?: Record<string, GridItemRenderer>;
     luzmoGridChanged: EventEmitter<CustomEvent<any>>;
     luzmoGridReady: EventEmitter<CustomEvent<any>>;
-    gridItemAction: EventEmitter<CustomEvent<any>>;
-    gridChanged: EventEmitter<CustomEvent<any>>;
-    gridReady: EventEmitter<CustomEvent<any>>;
+    luzmoGridItemAction: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "luzmo-grid", never, { "appServer": { "alias": "appServer"; "required": false; }; "apiHost": { "alias": "apiHost"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "placementItemActionsMenu": { "alias": "placementItemActionsMenu"; "required": false; }; "defaultItemActionsMenu": { "alias": "defaultItemActionsMenu"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "items": { "alias": "items"; "required": false; }; "renderers": { "alias": "renderers"; "required": false; }; }, { "luzmoGridChanged": "luzmoGridChanged"; "luzmoGridReady": "luzmoGridReady"; "gridItemAction": "gridItemAction"; "gridChanged": "gridChanged"; "gridReady": "gridReady"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "luzmo-grid", never, { "appServer": { "alias": "appServer"; "required": false; }; "apiHost": { "alias": "apiHost"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "placementItemActionsMenu": { "alias": "placementItemActionsMenu"; "required": false; }; "defaultItemActionsMenu": { "alias": "defaultItemActionsMenu"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "items": { "alias": "items"; "required": false; }; "renderers": { "alias": "renderers"; "required": false; }; }, { "luzmoGridChanged": "luzmoGridChanged"; "luzmoGridReady": "luzmoGridReady"; "luzmoGridItemAction": "luzmoGridItemAction"; }, never, ["*"], true, never>;
 }