@luzmo/analytics-components-kit 1.0.3-beta.9 → 1.0.4-beta.1

package/react/components/item-slot-drop-panel.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotDropPanel as LuzmoItemSlotDropPanelClass } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
+import { LuzmoItemSlotDropPanel as LuzmoItemSlotDropPanelClass, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
 
 const LuzmoItemSlotDropPanelComponent = createComponent({
   tagName: 'luzmo-item-slot-drop-panel',
   elementClass: LuzmoItemSlotDropPanelClass,
   react: React,
   events: {
-    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent>,
-    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent>
+    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>,
+    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent<SlotsContentsChangedEventDetail>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoItemSlotDropPanelComponent = createComponent({
 export const LuzmoItemSlotDropPanel = LuzmoItemSlotDropPanelComponent as ReactWebComponent<
   LuzmoItemSlotDropPanelClass,
   {
-    onLuzmoSlotConstraintTriggered: EventName<CustomEvent>;
-    onLuzmoSlotsContentsChanged: EventName<CustomEvent>;
+    onLuzmoSlotConstraintTriggered: EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>;
+    onLuzmoSlotsContentsChanged: EventName<CustomEvent<SlotsContentsChangedEventDetail>>;
   }
 >;
 

package/react/components/item-slot-drop.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotDrop as LuzmoItemSlotDropClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
+import { LuzmoItemSlotDrop as LuzmoItemSlotDropClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
 
 const LuzmoItemSlotDropComponent = createComponent({
   tagName: 'luzmo-item-slot-drop',
@@ -8,8 +8,8 @@ const LuzmoItemSlotDropComponent = createComponent({
   react: React,
   events: {
     onLuzmoSlotMenuInactive: 'luzmo-slot-menu-inactive' as EventName<CustomEvent>,
-    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent>,
-    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent>,
+    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent<SlotMenuActiveEventDetail>>,
+    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent<SlotMenuHighlightEventDetail>>,
     onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent<InfoVisibilityChangedEventDetail>>,
     onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>
   }
@@ -18,6 +18,9 @@ const LuzmoItemSlotDropComponent = createComponent({
 /**
  * React wrapper for <luzmo-item-slot-drop>
  *
+ * @event onLuzmoSlotMenuInactive - Emitted when the slot menu overlay closes / becomes inactive.
+ * @event onLuzmoSlotMenuActive - Emitted when the slot menu overlay opens for a slot
+ * @event onLuzmoSlotMenuHighlight - Emitted to highlight the active column or formula in the slot menu
  * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values
  * @event onLuzmoSlotContentsChanged - Announces that the slot contents has changed
  */
@@ -25,8 +28,8 @@ export const LuzmoItemSlotDrop = LuzmoItemSlotDropComponent as ReactWebComponent
   LuzmoItemSlotDropClass,
   {
     onLuzmoSlotMenuInactive: EventName<CustomEvent>;
-    onLuzmoSlotMenuActive: EventName<CustomEvent>;
-    onLuzmoSlotMenuHighlight: EventName<CustomEvent>;
+    onLuzmoSlotMenuActive: EventName<CustomEvent<SlotMenuActiveEventDetail>>;
+    onLuzmoSlotMenuHighlight: EventName<CustomEvent<SlotMenuHighlightEventDetail>>;
     onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
     onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
   }

package/react/components/item-slot-picker-panel.component.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotPickerPanel as LuzmoItemSlotPickerPanelClass } from '@luzmo/analytics-components-kit/item-slot-picker-panel';
+import { LuzmoItemSlotPickerPanel as LuzmoItemSlotPickerPanelClass, DatasetChangedEventDetail, DatasetConstraintTriggeredEventDetail, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-picker-panel';
 
 const LuzmoItemSlotPickerPanelComponent = createComponent({
   tagName: 'luzmo-item-slot-picker-panel',
   elementClass: LuzmoItemSlotPickerPanelClass,
   react: React,
   events: {
-    onLuzmoDatasetConstraintTriggered: 'luzmo-dataset-constraint-triggered' as EventName<CustomEvent>,
-    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent>,
-    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent>,
-    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent>
+    onLuzmoDatasetConstraintTriggered: 'luzmo-dataset-constraint-triggered' as EventName<CustomEvent<DatasetConstraintTriggeredEventDetail>>,
+    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent<SlotsContentsChangedEventDetail>>,
+    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent<DatasetChangedEventDetail>>,
+    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>
   }
 });
 
@@ -25,10 +25,10 @@ const LuzmoItemSlotPickerPanelComponent = createComponent({
 export const LuzmoItemSlotPickerPanel = LuzmoItemSlotPickerPanelComponent as ReactWebComponent<
   LuzmoItemSlotPickerPanelClass,
   {
-    onLuzmoDatasetConstraintTriggered: EventName<CustomEvent>;
-    onLuzmoSlotsContentsChanged: EventName<CustomEvent>;
-    onLuzmoDatasetChanged: EventName<CustomEvent>;
-    onLuzmoSlotConstraintTriggered: EventName<CustomEvent>;
+    onLuzmoDatasetConstraintTriggered: EventName<CustomEvent<DatasetConstraintTriggeredEventDetail>>;
+    onLuzmoSlotsContentsChanged: EventName<CustomEvent<SlotsContentsChangedEventDetail>>;
+    onLuzmoDatasetChanged: EventName<CustomEvent<DatasetChangedEventDetail>>;
+    onLuzmoSlotConstraintTriggered: EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>;
   }
 >;
 

package/react/components/item-slot-picker.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotPicker as LuzmoItemSlotPickerClass } from '@luzmo/analytics-components-kit/item-slot-picker';
+import { LuzmoItemSlotPicker as LuzmoItemSlotPickerClass, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-picker';
 
 const LuzmoItemSlotPickerComponent = createComponent({
   tagName: 'luzmo-item-slot-picker',
   elementClass: LuzmoItemSlotPickerClass,
   react: React,
   events: {
-    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoItemSlotPickerComponent = createComponent({
 export const LuzmoItemSlotPicker = LuzmoItemSlotPickerComponent as ReactWebComponent<
   LuzmoItemSlotPickerClass,
   {
-    onLuzmoSlotContentsChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
   }
 >;
 

package/react/components/slot-menu-list.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoSlotMenuList as LuzmoSlotMenuListClass } from '@luzmo/analytics-components-kit/slot-menu-list';
+import { LuzmoSlotMenuList as LuzmoSlotMenuListClass, SlotListChangedEventDetail } from '@luzmo/analytics-components-kit/slot-menu-list';
 
 const LuzmoSlotMenuListComponent = createComponent({
   tagName: 'luzmo-slot-menu-list',
   elementClass: LuzmoSlotMenuListClass,
   react: React,
   events: {
-    onLuzmoSlotListChanged: 'luzmo-slot-list-changed' as EventName<CustomEvent>
+    onLuzmoSlotListChanged: 'luzmo-slot-list-changed' as EventName<CustomEvent<SlotListChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoSlotMenuListComponent = createComponent({
 export const LuzmoSlotMenuList = LuzmoSlotMenuListComponent as ReactWebComponent<
   LuzmoSlotMenuListClass,
   {
-    onLuzmoSlotListChanged: EventName<CustomEvent>;
+    onLuzmoSlotListChanged: EventName<CustomEvent<SlotListChangedEventDetail>>;
   }
 >;
 

package/react/components/slot-menu.component.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoSlotMenu as LuzmoSlotMenuClass } from '@luzmo/analytics-components-kit/slot-menu';
+import { LuzmoSlotMenu as LuzmoSlotMenuClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/slot-menu';
 
 const LuzmoSlotMenuComponent = createComponent({
   tagName: 'luzmo-slot-menu',
   elementClass: LuzmoSlotMenuClass,
   react: React,
   events: {
-    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent>,
-    onLuzmoClose: 'luzmo-close' as EventName<CustomEvent>,
-    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent>,
-    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent>,
+    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>,
+    onLuzmoClose: 'luzmo-close' as EventName<CustomEvent<void>>,
+    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent<SlotMenuActiveEventDetail>>,
+    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent<SlotMenuHighlightEventDetail>>,
     onLuzmoSlotMenuInactive: 'luzmo-slot-menu-inactive' as EventName<CustomEvent>,
-    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent>
+    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent<InfoVisibilityChangedEventDetail>>
   }
 });
 
@@ -21,17 +21,20 @@ const LuzmoSlotMenuComponent = createComponent({
  *
  * @event onLuzmoSlotContentsChanged - Emitted when the slot contents change
  * @event onLuzmoClose - Emitted when the slot menu is closed
+ * @event onLuzmoSlotMenuActive - Emitted when the slot menu becomes active for a dataset
+ * @event onLuzmoSlotMenuHighlight - Emitted to highlight a column or formula in the slot menu
+ * @event onLuzmoSlotMenuInactive - Emitted when the menu becomes inactive.
  * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values
  */
 export const LuzmoSlotMenu = LuzmoSlotMenuComponent as ReactWebComponent<
   LuzmoSlotMenuClass,
   {
-    onLuzmoSlotContentsChanged: EventName<CustomEvent>;
-    onLuzmoClose: EventName<CustomEvent>;
-    onLuzmoSlotMenuActive: EventName<CustomEvent>;
-    onLuzmoSlotMenuHighlight: EventName<CustomEvent>;
+    onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
+    onLuzmoClose: EventName<CustomEvent<void>>;
+    onLuzmoSlotMenuActive: EventName<CustomEvent<SlotMenuActiveEventDetail>>;
+    onLuzmoSlotMenuHighlight: EventName<CustomEvent<SlotMenuHighlightEventDetail>>;
     onLuzmoSlotMenuInactive: EventName<CustomEvent>;
-    onLuzmoInfoVisibilityChanged: EventName<CustomEvent>;
+    onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
   }
 >;
 

package/react/components/viz-item-menu/types.ts

@@ -1 +1,11 @@
 export type VizItemMenuButton = 'clone' | 'edit' | 'delete';
+
+export interface VizItemMenuButtonClickedEventDetail {
+  action: string;
+  type: VizItemMenuButton;
+  id: string;
+}
+
+export interface VizItemMenuSelectedChangedEventDetail {
+  selectedButton: VizItemMenuButton | null;
+}

package/react/components/viz-item-menu.component.ts

@@ -1,31 +1,31 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoVizItemMenu as LuzmoVizItemMenuClass } from '@luzmo/analytics-components-kit/viz-item-menu';
+import { LuzmoVizItemMenu as LuzmoVizItemMenuClass, VizItemMenuButtonClickedEventDetail, VizItemMenuSelectedChangedEventDetail } from '@luzmo/analytics-components-kit/viz-item-menu';
 
 const LuzmoVizItemMenuComponent = createComponent({
   tagName: 'luzmo-viz-item-menu',
   elementClass: LuzmoVizItemMenuClass,
   react: React,
   events: {
-    onSelectedChanged: 'selected-changed' as EventName<CustomEvent>,
-    onButtonClicked: 'button-clicked' as EventName<CustomEvent>,
-    onEditButtonHovered: 'edit-button-hovered' as EventName<CustomEvent>
+    onSelectedChanged: 'selected-changed' as EventName<CustomEvent<VizItemMenuSelectedChangedEventDetail>>,
+    onButtonClicked: 'button-clicked' as EventName<CustomEvent<VizItemMenuButtonClickedEventDetail>>,
+    onEditButtonHovered: 'edit-button-hovered' as EventName<CustomEvent<void>>
   }
 });
 
 /**
  * React wrapper for <luzmo-viz-item-menu>
  *
- * @event onSelectedChanged - Emitted when the selected button changes, includes { selectedButton: VizItemMenuButton | null } in detail
- * @event onButtonClicked - Emitted when any menu item is clicked, includes { action: string, type: VizItemMenuButton, id: string } in detail
+ * @event onSelectedChanged - Emitted when the selected button changes
+ * @event onButtonClicked - Emitted when any menu item is clicked
  * @event onEditButtonHovered - Emitted when hovering over the edit button
  */
 export const LuzmoVizItemMenu = LuzmoVizItemMenuComponent as ReactWebComponent<
   LuzmoVizItemMenuClass,
   {
-    onSelectedChanged: EventName<CustomEvent>;
-    onButtonClicked: EventName<CustomEvent>;
-    onEditButtonHovered: EventName<CustomEvent>;
+    onSelectedChanged: EventName<CustomEvent<VizItemMenuSelectedChangedEventDetail>>;
+    onButtonClicked: EventName<CustomEvent<VizItemMenuButtonClickedEventDetail>>;
+    onEditButtonHovered: EventName<CustomEvent<void>>;
   }
 >;
 

package/react/esm/components/ai-chat.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatStepEvent } from '@luzmo/analytics-components-kit/ai-chat';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent } from '@luzmo/analytics-components-kit/ai-chat';
 /**
  * React wrapper for <luzmo-ai-chat>
  *
@@ -11,12 +11,12 @@ import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatStepEvent }
  * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
  */
 export declare const LuzmoAiChat: ReactWebComponent<LuzmoAiChatClass, {
-    onLuzmoMessageSent: EventName<CustomEvent>;
-    onLuzmoDatasetsChanged: EventName<CustomEvent>;
+    onLuzmoMessageSent: EventName<CustomEvent<AiChatMessageSentEventDetail>>;
+    onLuzmoDatasetsChanged: EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>;
     onLuzmoStep: EventName<CustomEvent<AiChatStepEvent>>;
     onLuzmoComplete: EventName<CustomEvent<AiChatCompleteEvent>>;
-    onLuzmoStop: EventName<CustomEvent>;
-    onLuzmoConversationIdChanged: EventName<CustomEvent>;
+    onLuzmoStop: EventName<CustomEvent<void>>;
+    onLuzmoConversationIdChanged: EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoAiChat */
 export type LuzmoAiChatElement = LuzmoAiChatClass;

package/react/esm/components/ai-interaction-textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/esm/components/ai-interaction-textarea/index.js

@@ -0,0 +1 @@
+export * from './types';

package/react/esm/components/ai-interaction-textarea/types.d.ts

@@ -0,0 +1,5 @@
+import type { Dataset } from '../../types/dataset.types';
+export interface PromptSubmittedEventDetail {
+    prompt: string;
+    selectedDatasets: Dataset[];
+}

package/react/esm/components/ai-interaction-textarea/types.js

@@ -0,0 +1 @@
+export {};

package/react/esm/components/ai-interaction-textarea.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
 /**
  * React wrapper for <luzmo-ai-interaction-textarea>
  *
@@ -7,8 +7,8 @@ import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass } from '@
  * @event onPromptStopped - Fired when a running prompt is stopped
  */
 export declare const LuzmoAiInteractionTextarea: ReactWebComponent<LuzmoAiInteractionTextareaClass, {
-    onPromptSubmitted: EventName<CustomEvent>;
-    onPromptStopped: EventName<CustomEvent>;
+    onPromptSubmitted: EventName<CustomEvent<PromptSubmittedEventDetail>>;
+    onPromptStopped: EventName<CustomEvent<void>>;
 }>;
 /** The underlying custom element type for LuzmoAiInteractionTextarea */
 export type LuzmoAiInteractionTextareaElement = LuzmoAiInteractionTextareaClass;

package/react/esm/components/data-field-level.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DatasetDataField } from '@luzmo/analytics-components-kit/data-field-level';
+import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
 /**
  * React wrapper for <luzmo-data-field-level>
  *
@@ -7,12 +7,8 @@ import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DatasetDataField } fro
  * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
  */
 export declare const LuzmoDataFieldLevel: ReactWebComponent<LuzmoDataFieldLevelClass, {
-    onLuzmoDataFieldDropped: EventName<CustomEvent<{
-        data: DatasetDataField;
-    }>>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent<{
-        data: DatasetDataField;
-    }>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDataFieldLevel */
 export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelClass;

package/react/esm/components/data-field-panel.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass } from '@luzmo/analytics-components-kit/data-field-panel';
+import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail } from '@luzmo/analytics-components-kit/data-field-panel';
 /**
  * A panel component that displays a list of data fields from a dataset.
  * Optionally includes a dataset picker dropdown to switch between datasets.
@@ -13,9 +13,9 @@ import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass } from '@luzmo/analytic
  * @event onLuzmoDataFieldDragStarted - Announces that a drag has started on a data field
  */
 export declare const LuzmoDataFieldPanel: ReactWebComponent<LuzmoDataFieldPanelClass, {
-    onLuzmoDatasetChanged: EventName<CustomEvent>;
-    onLuzmoDataFieldDropped: EventName<CustomEvent>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent>;
+    onLuzmoDatasetChanged: EventName<CustomEvent<DatasetChangedEventDetail>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDataFieldPanel */
 export type LuzmoDataFieldPanelElement = LuzmoDataFieldPanelClass;

package/react/esm/components/data-field.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataField as LuzmoDataFieldClass, DatasetDataField } from '@luzmo/analytics-components-kit/data-field';
+import { LuzmoDataField as LuzmoDataFieldClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field';
 /**
  * React wrapper for <luzmo-data-field>
  *
@@ -7,12 +7,8 @@ import { LuzmoDataField as LuzmoDataFieldClass, DatasetDataField } from '@luzmo/
  * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
  */
 export declare const LuzmoDataField: ReactWebComponent<LuzmoDataFieldClass, {
-    onLuzmoDataFieldDropped: EventName<CustomEvent<{
-        data: DatasetDataField;
-    }>>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent<{
-        data: DatasetDataField;
-    }>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDataField */
 export type LuzmoDataFieldElement = LuzmoDataFieldClass;

package/react/esm/components/data-fields-select/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/esm/components/data-fields-select/index.js

@@ -0,0 +1 @@
+export * from './types';

package/react/esm/components/data-fields-select/types.d.ts

@@ -0,0 +1,4 @@
+import type { DatasetDataField } from '../../types/dataset-data-field.types';
+export interface DataFieldsSelectedEventDetail {
+    dataFields: DatasetDataField[];
+}

package/react/esm/components/data-fields-select/types.js

@@ -0,0 +1 @@
+export {};

package/react/esm/components/data-fields-select.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass } from '@luzmo/analytics-components-kit/data-fields-select';
+import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
 /**
  * React wrapper for <luzmo-data-fields-select>
  *
- * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected. Event detail contains `{ dataFields: DatasetDataField[] }`
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
  */
 export declare const LuzmoDataFieldsSelect: ReactWebComponent<LuzmoDataFieldsSelectClass, {
-    onLuzmoDataFieldsSelected: EventName<CustomEvent>;
+    onLuzmoDataFieldsSelected: EventName<CustomEvent<DataFieldsSelectedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDataFieldsSelect */
 export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectClass;

package/react/esm/components/data-fields-select.component.js

@@ -12,6 +12,6 @@ const LuzmoDataFieldsSelectComponent = createComponent({
 /**
  * React wrapper for <luzmo-data-fields-select>
  *
- * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected. Event detail contains `{ dataFields: DatasetDataField[] }`
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
  */
 export const LuzmoDataFieldsSelect = LuzmoDataFieldsSelectComponent;

package/react/esm/components/dataset-selector-list.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass } from '@luzmo/analytics-components-kit/dataset-selector-list';
+import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
 /**
  * React wrapper for <luzmo-dataset-selector-list>
  *
  * @event onDatasetSelected - Fired when a dataset is selected
  */
 export declare const LuzmoDatasetSelectorList: ReactWebComponent<LuzmoDatasetSelectorListClass, {
-    onDatasetSelected: EventName<CustomEvent>;
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
 }>;
 /** The underlying custom element type for LuzmoDatasetSelectorList */
 export type LuzmoDatasetSelectorListElement = LuzmoDatasetSelectorListClass;

package/react/esm/components/dataset-selector-row.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass } from '@luzmo/analytics-components-kit/dataset-selector-row';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
 /**
  * React wrapper for <luzmo-dataset-selector-row>
  *
@@ -7,8 +7,8 @@ import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass } from '@luzmo/
  * @event onDatasetRemoved - Fired when a dataset is removed
  */
 export declare const LuzmoDatasetSelectorRow: ReactWebComponent<LuzmoDatasetSelectorRowClass, {
-    onDatasetSelected: EventName<CustomEvent>;
-    onDatasetRemoved: EventName<CustomEvent>;
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+    onDatasetRemoved: EventName<CustomEvent<Dataset>>;
 }>;
 /** The underlying custom element type for LuzmoDatasetSelectorRow */
 export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowClass;

package/react/esm/components/display-settings/types.d.ts

@@ -1,4 +1,8 @@
-import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+export interface DisplaySettingsSlotContentChangedEventDetail {
+    slotContent: GenericSlotContent;
+}
+export type DisplaySettingsRemoveSlotContentEventDetail = DisplaySettingsSlotContentChangedEventDetail;
 export interface InfoVisibilityChangedEventDetail {
     isVisible: boolean;
     slotContent: GenericSlotContent;

package/react/esm/components/display-settings-binning.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass } from '@luzmo/analytics-components-kit/display-settings-binning';
+import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
 /**
  * React wrapper for <luzmo-display-settings-binning>
  *
  * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
  */
 export declare const LuzmoDisplaySettingsBinning: ReactWebComponent<LuzmoDisplaySettingsBinningClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettingsBinning */
 export type LuzmoDisplaySettingsBinningElement = LuzmoDisplaySettingsBinningClass;

package/react/esm/components/display-settings-datetime.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass } from '@luzmo/analytics-components-kit/display-settings-datetime';
+import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-datetime';
 /**
  * React wrapper for <luzmo-display-settings-datetime>
  *
  * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
  */
 export declare const LuzmoDisplaySettingsDatetime: ReactWebComponent<LuzmoDisplaySettingsDatetimeClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettingsDatetime */
 export type LuzmoDisplaySettingsDatetimeElement = LuzmoDisplaySettingsDatetimeClass;

package/react/esm/components/display-settings-grand-totals.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
+import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
 /**
  * React wrapper for <luzmo-display-settings-grand-totals>
  *
  * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
  */
 export declare const LuzmoDisplaySettingsGrandTotals: ReactWebComponent<LuzmoDisplaySettingsGrandTotalsClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettingsGrandTotals */
 export type LuzmoDisplaySettingsGrandTotalsElement = LuzmoDisplaySettingsGrandTotalsClass;

package/react/esm/components/display-settings-numeric.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass } from '@luzmo/analytics-components-kit/display-settings-numeric';
+import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-numeric';
 /**
  * React wrapper for <luzmo-display-settings-numeric>
  *
  * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
  */
 export declare const LuzmoDisplaySettingsNumeric: ReactWebComponent<LuzmoDisplaySettingsNumericClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettingsNumeric */
 export type LuzmoDisplaySettingsNumericElement = LuzmoDisplaySettingsNumericClass;

package/react/esm/components/display-settings-period-over-period.component.d.ts

@@ -1,12 +1,12 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
+import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
 /**
  * React wrapper for <luzmo-display-settings-period-over-period>
  *
  * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
  */
 export declare const LuzmoDisplaySettingsPeriodOverPeriod: ReactWebComponent<LuzmoDisplaySettingsPeriodOverPeriodClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettingsPeriodOverPeriod */
 export type LuzmoDisplaySettingsPeriodOverPeriodElement = LuzmoDisplaySettingsPeriodOverPeriodClass;

package/react/esm/components/display-settings.component.d.ts

@@ -1,5 +1,5 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass } from '@luzmo/analytics-components-kit/display-settings';
+import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass, DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
 /**
  * React wrapper for <luzmo-display-settings>
  *
@@ -8,9 +8,9 @@ import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass } from '@luzmo/analyt
  * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked, includes the visibility state and ID values
  */
 export declare const LuzmoDisplaySettings: ReactWebComponent<LuzmoDisplaySettingsClass, {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
-    onLuzmoRemoveSlotContent: EventName<CustomEvent>;
-    onLuzmoInfoVisibilityChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+    onLuzmoRemoveSlotContent: EventName<CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>>;
+    onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoDisplaySettings */
 export type LuzmoDisplaySettingsElement = LuzmoDisplaySettingsClass;

package/react/esm/components/filter-expression-picker.component.d.ts

@@ -2,6 +2,8 @@ import { EventName, ReactWebComponent } from '@lit/react';
 import { LuzmoFilterExpressionPicker as LuzmoFilterExpressionPickerClass } from '@luzmo/analytics-components-kit/filter-expression-picker';
 /**
  * React wrapper for <luzmo-filter-expression-picker>
+ *
+ * @event onLuzmoExpressionSelected - Fired when the user selects a filter expression (operator); `detail.expression` holds the chosen expression.
  */
 export declare const LuzmoFilterExpressionPicker: ReactWebComponent<LuzmoFilterExpressionPickerClass, {
     onLuzmoExpressionSelected: EventName<CustomEvent>;

package/react/esm/components/filter-expression-picker.component.js

@@ -11,5 +11,7 @@ const LuzmoFilterExpressionPickerComponent = createComponent({
 });
 /**
  * React wrapper for <luzmo-filter-expression-picker>
+ *
+ * @event onLuzmoExpressionSelected - Fired when the user selects a filter expression (operator); `detail.expression` holds the chosen expression.
  */
 export const LuzmoFilterExpressionPicker = LuzmoFilterExpressionPickerComponent;

package/react/esm/components/filter-item.component.d.ts

@@ -2,6 +2,8 @@ import { EventName, ReactWebComponent } from '@lit/react';
 import { LuzmoFilterItem as LuzmoFilterItemClass } from '@luzmo/analytics-components-kit/filter-item';
 /**
  * React wrapper for <luzmo-filter-item>
+ *
+ * @event onLuzmoFilterChanged - Fired when any part of the filter changes; `detail.filter` holds the updated filter.
  */
 export declare const LuzmoFilterItem: ReactWebComponent<LuzmoFilterItemClass, {
     onLuzmoFilterChanged: EventName<CustomEvent>;