@luzmo/analytics-components-kit 1.0.9-beta.7 → 1.0.9-beta.8

package/components/formula-draggable-field/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Payload carried by a draggable field while it is being dragged. `kind` is a
+ * free-form, consumer-defined category and `value` identifies the dragged item.
+ */
+export interface FormulaDraggableFieldPayload {
+    kind: string;
+    value: string;
+}
+/**
+ * Detail of the `luzmo-formula-draggable-field-activate` event, fired when the
+ * field is activated (double-click or keyboard Enter / Space).
+ */
+export interface FormulaDraggableFieldActivateEventDetail {
+    kind: string;
+    value: string;
+}
+/**
+ * Detail of the `luzmo-formula-draggable-field-describe` event, fired when the
+ * field is highlighted for description (mouse enter or focus).
+ */
+export interface FormulaDraggableFieldDescribeEventDetail {
+    kind: string;
+    value: string;
+}

package/components/formula-editor/formula-aggregations-list.d.ts

@@ -0,0 +1,21 @@
+import '../formula-draggable-field';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/progress-circle';
+import { type TemplateResult } from 'lit';
+import type { ElementSize } from '../../utils/base';
+export interface AggregationsListParams {
+    /** Size of the surrounding editor; forwarded to the interactive rows. */
+    size?: ElementSize;
+    /** When true, shows a loading spinner instead of the list. */
+    loading?: boolean;
+    /** When true, each aggregation shows its explanation as a hover tooltip (used when there is no description). */
+    explanationTooltips?: boolean;
+    /** Renders the rows non-interactive. */
+    disabled?: boolean;
+}
+/**
+ * Renders the aggregation-functions list (draggable / insertable pills) inside
+ * the formula editor. Replaces the former `luzmo-formula-aggregations-list`
+ * element: stateless markup driven entirely by the editor.
+ */
+export declare function renderAggregationsList(params: AggregationsListParams): TemplateResult;

package/components/formula-editor/formula-datasets-list.d.ts

@@ -0,0 +1,37 @@
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/search';
+import { type TemplateResult } from 'lit';
+import '../data-field';
+import type { ElementSize } from '../../utils/base';
+import type { DatasetDataField } from '../../types/dataset-data-field.types';
+import type { FormulaEditorDataset } from '../../types/formula.types';
+export interface DatasetsListParams {
+    /** The datasets whose columns are listed. */
+    datasets: FormulaEditorDataset[];
+    /** Language used to localize column / dataset names. */
+    contentLanguage: string;
+    /** Size of the surrounding editor; forwarded to the interactive rows. */
+    size?: ElementSize;
+    /** When true, the columns are still being fetched; shows a loading spinner. */
+    loading?: boolean;
+    /** Renders the rows non-interactive. */
+    disabled?: boolean;
+    /** Current search query (owned by the editor). */
+    searchQuery: string;
+    /** Ids of the collapsed dataset groups (owned by the editor). */
+    collapsed: Set<string>;
+    /** Fired on every keystroke in the search box. */
+    onSearchInput: (event: Event) => void;
+    /** Toggles the collapsed state of a dataset group. */
+    onToggleCollapse: (datasetId: string) => void;
+    /** Inserts a column into the expression (double-click). */
+    onInsertColumn: (field: DatasetDataField) => void;
+}
+/**
+ * Renders the datasets list (searchable, grouped, draggable columns) inside the
+ * formula editor. Replaces the former `luzmo-formula-datasets-list` element; the
+ * search query and collapsed groups live on the editor and are passed back in.
+ */
+export declare function renderDatasetsList(params: DatasetsListParams): TemplateResult;

package/components/formula-editor/formula-description.d.ts

@@ -0,0 +1,17 @@
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import { type TemplateResult } from 'lit';
+import type { ElementSize } from '../../utils/base';
+import { type FormulaDescribeTarget } from '../../types/formula.types';
+export interface DescriptionParams {
+    /** The hovered / selected function, aggregation or grouping to describe. */
+    target: FormulaDescribeTarget | null;
+    /** Size of the surrounding editor. */
+    size?: ElementSize;
+}
+/**
+ * Renders the description region (label, description and example for the hovered
+ * / selected function, aggregation or grouping) inside the formula editor.
+ * Replaces the former `luzmo-formula-description` element.
+ */
+export declare function renderDescription({ target, size }: DescriptionParams): TemplateResult;

package/components/formula-editor/formula-editor.d.ts

@@ -0,0 +1,85 @@
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/progress-circle';
+import { type TemplateResult } from 'lit';
+import { LuzmoFormulaInputBase } from '../../utils/formula/base/formula-input-base';
+import type { ValidityChangedEventDetail } from '../../types/formula.types';
+/**
+ * @customElement luzmo-formula-editor
+ * @description A rich formula editor: a CodeMirror-backed expression input with
+ * inline column / empty-argument / aggregation pills, supporting lists for functions,
+ * aggregations and dataset columns. Designed as a drop-in replacement for the
+ * legacy Angular formula editor.
+ *
+ * Datasets can be provided directly via `datasetsDataFields` or fetched from the
+ * Luzmo API via `dataset-ids` + auth attributes.
+ *
+ * @fires {CustomEvent<ExpressionChangedEventDetail>} luzmo-expression-changed - Fired (debounced) when the expression changes.
+ * @fires {CustomEvent<ValidityChangedEventDetail>} luzmo-validity-changed - Fired when expression validity changes, including when backend validation starts (`detail.validating`) or settles.
+ * @fires {CustomEvent<DatasetsErrorEventDetail>} luzmo-datasets-error - Fired when fetching datasets by id fails.
+ * @csspart formula-editor - Root editor layout (input, validation feedback, lists).
+ * @csspart validating - In-flight validation status row (spinner + "Validating…" text).
+ * @csspart error - Validation error message row shown after a settled invalid result.
+ * @csspart lists - Side panel hosting aggregations, datasets, functions (and optional description).
+ */
+export declare class LuzmoFormulaEditor extends LuzmoFormulaInputBase {
+    static styles: import("lit").CSSResult;
+    /** Whether the expression is validated as a column or a formula. */
+    expressionResource: 'column' | 'formula';
+    /**
+     * How function / aggregation explanations are surfaced: as hover `tooltip`s on
+     * the list items (default), or in a dedicated `description` region. With
+     * `tooltip` there is no description, so the remaining lists spread across
+     * the full width.
+     */
+    explanationDisplay: 'tooltip' | 'description';
+    private _loadingDatasets;
+    private _describeTarget;
+    /**
+     * Current validity snapshot (last settled `valid` / `error`, plus `validating`
+     * while a backend call is in flight). Also the payload of
+     * `luzmo-validity-changed`.
+     */
+    private _validity;
+    /** Selected function category for the functions list (hoisted from the list). */
+    private _selectedCategory;
+    /** Current search query for the datasets list (hoisted from the list). */
+    private _searchQuery;
+    /** Ids of the collapsed dataset groups in the datasets list (hoisted from the list). */
+    private _collapsedDatasets;
+    private readonly _validWordIdentifiers;
+    private _validationSequence;
+    /** The editor uses a longer debounce than the bare formula field. */
+    protected get _emitDebounceMs(): number;
+    /** Emits the change and validates the resulting expression. */
+    protected _onExpressionComputed(output: string): void;
+    /** Surfaces the dataset-loading state on the lists (spinners) via the store. */
+    protected _setLoading(value: boolean): void;
+    /**
+     * Validates the expression: local pre-checks first, then the DataBroker-backed
+     * backend validation when auth credentials are available.
+     */
+    private _validate;
+    private _runBackendValidation;
+    protected _localValidity(output: string): ValidityChangedEventDetail;
+    /**
+     * Local-only structural validity used when no backend is configured: flags the
+     * first bare word that is not a column, function, aggregation or literal (free
+     * text that never resolved into a token).
+     */
+    protected _offlineValidity(output: string): ValidityChangedEventDetail;
+    protected _emitValidity(validity: ValidityChangedEventDetail): void;
+    private _insertColumn;
+    private _handleCategoryChange;
+    private _handleSearchInput;
+    private _toggleCollapse;
+    private _handleDraggableActivate;
+    private _handleDraggableDescribe;
+    private _renderLists;
+    /**
+     * Renders the validation feedback slotted flush between the input and the
+     * lists: a "validating" loading indicator while the backend call is in flight,
+     * otherwise the error message (or nothing when the expression is valid).
+     */
+    private _renderValidationFeedback;
+    protected render(): TemplateResult;
+}

package/components/formula-editor/formula-functions-list.d.ts

@@ -0,0 +1,28 @@
+import '../formula-draggable-field';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/select';
+import { type TemplateResult } from 'lit';
+import type { ElementSize } from '../../utils/base';
+import type { FormulaFunctionCategoryKey } from '../../types/formula.types';
+export interface FunctionsListParams {
+    /** Size of the surrounding editor; forwarded to the interactive rows. */
+    size?: ElementSize;
+    /** When true, shows a loading spinner instead of the list. */
+    loading?: boolean;
+    /** When true, each function shows its explanation as a hover tooltip (used when there is no description). */
+    explanationTooltips?: boolean;
+    /** Renders the rows non-interactive. */
+    disabled?: boolean;
+    /** The currently selected function category (owned by the editor). */
+    selectedCategory: FormulaFunctionCategoryKey;
+    /** Fired when the user picks another category. */
+    onCategoryChange: (event: CustomEvent) => void;
+}
+/**
+ * Renders the functions list (category selector + draggable / insertable
+ * functions) inside the formula editor. Replaces the former
+ * `luzmo-formula-functions-list` element; the selected category lives on the
+ * editor and is passed back in.
+ */
+export declare function renderFunctionsList(params: FunctionsListParams): TemplateResult;

package/components/formula-editor/index.d.ts

@@ -0,0 +1,12 @@
+import { LuzmoFormulaEditor } from './formula-editor';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-formula-editor': LuzmoFormulaEditor;
+    }
+}
+export { LuzmoFormulaEditor } from './formula-editor';
+export type { LuzmoFormulaCodeMirror } from '../formula-codemirror';
+export { ensureFormulaCodeMirrorLoaded } from '../../utils/formula/load-formula-codemirror';
+export { FormulaEditorStore, ROOT_EDITOR_ID } from '../../utils/formula/store/formula-editor-store';
+export { formulaEditorContext } from '../../utils/formula/store/formula-editor-context';
+export { FormulaAggregationGrouping } from '../../types/formula.types';

package/components/formula-field/formula-field.d.ts

@@ -0,0 +1,20 @@
+import { type TemplateResult } from 'lit';
+import { LuzmoFormulaInputBase } from '../../utils/formula/base/formula-input-base';
+/**
+ * @customElement luzmo-formula-field
+ * @description A single editable formula field: a CodeMirror-backed expression
+ * with inline column / empty-argument / aggregation pills, autocompletion and
+ * drag-to-insert, but without the helper lists. Set `readonly` for a
+ * non-editable (but still rich) rendering. For a static, non-interactive display
+ * use `luzmo-formula`; for the full builder with datasets / functions /
+ * aggregations lists use `luzmo-formula-editor`.
+ *
+ * @fires {CustomEvent<ExpressionChangedEventDetail>} luzmo-expression-changed - Fired (debounced) when the expression changes (only when not readonly).
+ * @fires {CustomEvent<DatasetsErrorEventDetail>} luzmo-datasets-error - Fired when fetching datasets by id fails.
+ */
+export declare class LuzmoFormulaField extends LuzmoFormulaInputBase {
+    static styles: import("lit").CSSResult;
+    /** A read-only field does not emit expression changes. */
+    protected _canEmitExpression(): boolean;
+    protected render(): TemplateResult;
+}

package/components/formula-field/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoFormulaField } from './formula-field';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-formula-field': LuzmoFormulaField;
+    }
+}
+export { LuzmoFormulaField } from './formula-field';

package/components/interactive-viz-item/helpers/chart-helpers.d.ts

@@ -0,0 +1,7 @@
+import { type ChartActionDescriptor, type ChartMutationRequest, type FlexChartConfig, type NormalizedChartConfig, type SlotConfig } from '../types';
+export declare function convertSlotsToArray(slots: SlotConfig[] | Record<string, unknown>): SlotConfig[];
+export declare function getChartDatasetIds(slots: SlotConfig[]): string[];
+export declare function normalizeChartConfig(chart: FlexChartConfig): NormalizedChartConfig;
+export declare function mergeThemeIntoChart(chart: NormalizedChartConfig, theme: Record<string, unknown>): NormalizedChartConfig;
+export declare function calculateChartActions(chart: NormalizedChartConfig): ChartActionDescriptor[];
+export declare function applyChartMutation(chart: NormalizedChartConfig, mutation: ChartMutationRequest): NormalizedChartConfig;

package/components/interactive-viz-item/index.d.ts

@@ -0,0 +1,10 @@
+import { LuzmoInteractiveVizItem } from './interactive-viz-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-interactive-viz-item': LuzmoInteractiveVizItem;
+    }
+}
+export { LuzmoInteractiveVizItem } from './interactive-viz-item';
+export { DEFAULT_RANKING_NUMBER, RankingDirection, SortBy, SortDirection } from './types';
+export type { InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, FlexChartConfig, NormalizedChartConfig, Ranking, Sort } from './types';
+export { applyChartMutation, calculateChartActions, convertSlotsToArray, getChartDatasetIds, mergeThemeIntoChart, normalizeChartConfig } from './helpers/chart-helpers';

package/components/interactive-viz-item/interactive-viz-item.d.ts

@@ -0,0 +1,97 @@
+import '@luzmo/embed';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/action-group';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/picker';
+import '@luzmo/lucero/popover';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/tabs';
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import { type ChartFeedback, type FlexChartConfig } from './types';
+declare const LuzmoInteractiveVizItem_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-interactive-viz-item
+ * @description Renders an interactive visualization item: an embedded chart with inline top-N
+ * ranking and display-mode actions, a feedback bar, and an expandable configuration panel (slots,
+ * filters, options). Only accepts chart input; nothing renders without a `chart`. Framework-neutral
+ * so it can be reused anywhere (AI chat answers, dashboards, reports).
+ * @fires {CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>} luzmo-chart-options-changed - Fired when the inline actions (ranking, sort, display mode) change the chart options.
+ * @fires {CustomEvent<InteractiveVizItemChartChangedEventDetail>} luzmo-chart-changed - Fired when the config panel changes slots, filters, or options (full chart).
+ * @fires {CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>} luzmo-feedback-changed - Fired when the user changes the thumbs up/down rating.
+ * @slot chart-actions-extra - Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).
+ * @csspart container - The viz item container.
+ * @csspart chart-container - The embedded chart wrapper.
+ * @csspart config-panel - The expandable configuration panel.
+ */
+export declare class LuzmoInteractiveVizItem extends LuzmoInteractiveVizItem_base {
+    static get styles(): CSSResultArray;
+    /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+    chart: FlexChartConfig | null;
+    /** Current feedback (drives the thumbs up/down selection). */
+    feedback: ChartFeedback | null;
+    /** Message id from the backend. Feedback is only shown when set. */
+    messageId: string;
+    /** Auth key for the embedded chart and config panels. */
+    authKey: string;
+    /** Auth token for the embedded chart and config panels. */
+    authToken: string;
+    /**
+     * API URL for the embedded chart and config panels.
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /**
+     * App server URL for the embedded chart (assets, thumbnails).
+     * @default https://app.luzmo.com
+     */
+    appServer: string;
+    /** Content language for chart data and dataset metadata. Defaults to the UI `language`. */
+    contentLanguage: string;
+    /** When present, hides the inline chart actions (ranking, display mode). */
+    hideActions: boolean;
+    /** When present, hides the feedback bar. */
+    hideFeedback: boolean;
+    /** When present, hides the config-panel toggle and the panel itself. */
+    hideConfigPanel: boolean;
+    private _configPanelOpen;
+    private _configPanelPending;
+    private _configPanelLoadFailed;
+    private readonly _rankingTriggerId;
+    private get _effectiveContentLanguage();
+    private _dispatch;
+    private get _chartActions();
+    private get _rating();
+    private get _canShowConfigPanel();
+    private _toggleConfigPanel;
+    private _emitOptions;
+    private _emitChart;
+    private _handleDropdownChange;
+    private _currentRanking;
+    private _currentSort;
+    private _emitRankAndSort;
+    private _renderOptionDropdown;
+    private _renderRankingPicker;
+    private _handleDirectionChange;
+    private _handleNumberChange;
+    private _handleSortByChange;
+    private _handleSortDirectionChange;
+    private _renderActions;
+    private _renderChart;
+    private _renderFeedback;
+    private _toggleRating;
+    private _renderConfigPanel;
+    private _handleSlotsChanged;
+    private _handleFiltersChanged;
+    private _handleOptionsChanged;
+    protected render(): TemplateResult;
+}
+export {};

package/components/interactive-viz-item/load-config-panel.d.ts

@@ -0,0 +1,2 @@
+export declare const ensureConfigPanelLoaded: () => Promise<[typeof import("../filters"), typeof import("../item-option-panel"), typeof import("../item-slot-picker-panel")]>;
+export declare const isConfigPanelLoaded: () => boolean;

package/components/interactive-viz-item/types.d.ts

@@ -0,0 +1,117 @@
+/**
+ * A single field descriptor inside a chart slot. Deliberately loose because the
+ * chart config is produced by the AI stream: it may carry either the short
+ * (`set`/`column`/`formula`) or the long (`datasetId`/`columnId`/`formulaId`)
+ * key form, which `normalizeChartConfig` reconciles.
+ */
+export interface SlotContent {
+    columnId?: string;
+    datasetId?: string;
+    column?: string;
+    set?: string;
+    formulaId?: string;
+    formula?: string;
+    label?: Record<string, string> | string | null;
+    level?: number;
+    format?: string;
+    subtype?: string | null;
+    lowestLevel?: number;
+    [key: string]: unknown;
+}
+export interface SlotConfig {
+    name: string;
+    content: SlotContent[];
+}
+export interface ChartOptions {
+    theme?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+/**
+ * Loose chart shape as streamed by the AI. `slots` may be an array or the legacy
+ * keyed-object form; `normalizeChartConfig` produces the strict array shape.
+ */
+export interface FlexChartConfig {
+    type: string;
+    options: ChartOptions;
+    slots: SlotConfig[] | Record<string, unknown>;
+    filters?: unknown[];
+}
+export interface NormalizedChartConfig {
+    type: string;
+    options: ChartOptions;
+    slots: SlotConfig[];
+    filters?: unknown[];
+}
+export type ChartActionType = 'optionDropdown' | 'rankingPicker';
+export interface ChartOption {
+    key: string;
+    label: string;
+}
+export declare enum RankingDirection {
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum SortDirection {
+    Asc = "asc",
+    Desc = "desc"
+}
+export declare enum SortBy {
+    Measure = "measure",
+    Category = "category"
+}
+export interface Ranking {
+    active: boolean;
+    number: number;
+    direction: RankingDirection;
+}
+export interface Sort {
+    direction: SortDirection;
+    by: SortBy;
+}
+export declare const DEFAULT_RANKING_NUMBER = 5;
+export interface ChartActionDescriptor {
+    type: ChartActionType;
+    mutationType: string;
+    values?: ChartOption[];
+    currentValue?: string;
+    ranking?: Ranking;
+    sort?: Sort;
+    importance: number;
+}
+export type ChartMutationRequest = {
+    type: 'slots';
+    slotsContents: SlotConfig[];
+} | {
+    type: 'options';
+    options: ChartOptions;
+} | {
+    type: 'filters';
+    filters: unknown[];
+} | {
+    type: 'chartAction';
+    actionType: string;
+    key: string;
+} | {
+    type: 'rankAndSort';
+    ranking: Ranking;
+    sort: Sort;
+} | {
+    type: 'fullReplace';
+    chart: NormalizedChartConfig;
+};
+export type ChartFeedbackRating = -1 | 0 | 1;
+export interface ChartFeedback {
+    id?: string;
+    rating: ChartFeedbackRating;
+    comment?: string;
+}
+export interface InteractiveVizItemChartOptionsChangedEventDetail {
+    options: ChartOptions;
+}
+export interface InteractiveVizItemChartChangedEventDetail {
+    chart: FlexChartConfig;
+}
+export interface InteractiveVizItemFeedbackChangedEventDetail {
+    rating: ChartFeedbackRating;
+    comment?: string;
+}

package/components/item-grid/actions.d.ts

@@ -0,0 +1,3 @@
+import type { ActionGroup, InputActionGroup } from './types';
+export declare const generateActionsMenu: (data?: InputActionGroup[]) => ActionGroup[] | undefined;
+export declare const defaultActionsMenu: () => ActionGroup[];

package/components/item-grid/helpers/grid-effects.d.ts

@@ -0,0 +1 @@
+export declare const updateLuzmoVizItemsLanguage: (gridItemElements: NodeListOf<HTMLElement>, contentLanguage: string) => void;

package/components/item-grid/helpers/grid-events.d.ts

@@ -0,0 +1,56 @@
+import type { GridStack } from 'gridstack';
+import type { GridItemData, ItemStates } from '../types';
+export type GridItemActionType = 'toggle' | 'button';
+type GridLifecycleEventName = 'luzmo-item-grid-ready' | 'luzmo-item-grid-layout-changed';
+export type DispatchItemActionEvent = (action: string, actionType: GridItemActionType, active: boolean, element: HTMLElement, itemId: string, item?: GridItemData, deletedId?: string, originalElement?: HTMLElement) => void;
+export interface GridItemActionEventDetail {
+    action: string;
+    actionType: GridItemActionType;
+    active: boolean;
+    items: GridItemData[];
+    element: HTMLElement;
+    item: GridItemData;
+    deletedId?: string;
+    originalElement?: HTMLElement;
+    updatedItems?: GridItemData[];
+}
+export interface CreateGridItemActionDetailArgs {
+    action: string;
+    actionType: GridItemActionType;
+    active: boolean;
+    items: GridItemData[];
+    element: HTMLElement;
+    itemId: string;
+    item?: GridItemData;
+    deletedId?: string;
+    originalElement?: HTMLElement;
+    updatedItems?: GridItemData[];
+}
+interface EventDispatcher {
+    dispatchEvent: (event: Event) => boolean;
+}
+interface DispatchGridItemActionEventArgs extends CreateGridItemActionDetailArgs {
+    target: EventDispatcher;
+}
+export interface GridLifecycleEventDetail {
+    element: HTMLElement;
+    grid?: GridStack;
+    items: GridItemData[];
+    updatedItems?: GridItemData[];
+}
+interface DispatchGridLifecycleEventArgs {
+    target: EventDispatcher;
+    eventName: GridLifecycleEventName;
+    detail: GridLifecycleEventDetail;
+}
+export declare const createGridItemActionDetail: ({ action, actionType, active, items, element, itemId, item, deletedId, originalElement, updatedItems }: CreateGridItemActionDetailArgs) => GridItemActionEventDetail;
+export declare const dispatchGridItemActionEvent: ({ target, action, actionType, active, items, element, itemId, item, deletedId, originalElement, updatedItems }: DispatchGridItemActionEventArgs) => void;
+interface DispatchGridItemStatesChangedEventArgs {
+    target: EventDispatcher;
+    itemStates: ItemStates;
+    updatedItemStates: ItemStates;
+    changedItemStates: ItemStates;
+}
+export declare const dispatchGridItemStatesChangedEvent: ({ target, itemStates, updatedItemStates, changedItemStates }: DispatchGridItemStatesChangedEventArgs) => void;
+export declare const dispatchGridLifecycleEvent: ({ target, eventName, detail }: DispatchGridLifecycleEventArgs) => void;
+export {};

package/components/item-grid/helpers/grid-interactions.d.ts

@@ -0,0 +1,88 @@
+import type { GridItemData } from '../types';
+import type { DispatchItemActionEvent } from './grid-events';
+import type { GridItemLookup } from './grid-item-management';
+export interface GridInteractionState {
+    activeItemElement?: HTMLElement;
+    activeItemActionToggle?: string;
+}
+interface ShouldRemovePopoverOnMouseoutArgs {
+    event: Event;
+    gridItem: HTMLElement;
+}
+interface ApplyGridItemFocusArgs {
+    event: FocusEvent;
+    focusedItemElement?: HTMLElement;
+    removeItemActionsMenuPopover: (item: HTMLElement) => void;
+}
+interface ClearGridItemFocusArgs {
+    event: FocusEvent;
+    focusedItemElement?: HTMLElement;
+    removeItemActionsMenuPopover: (item: HTMLElement) => void;
+}
+interface ClearGridItemFocusResult {
+    focusedItemElement?: HTMLElement;
+    shouldFocusGrid: boolean;
+}
+interface CleanupActiveGridItemArgs {
+    item: HTMLElement;
+    activeItemElement?: HTMLElement;
+    gridElement: HTMLElement;
+    removeItemActionsMenuPopover: (item: HTMLElement) => void;
+}
+interface HandleGridActionArgs {
+    event: CustomEvent;
+    gridElement: HTMLElement;
+    items: GridItemData[];
+    state: GridInteractionState;
+    cleanupActiveItem: (item: HTMLElement) => void;
+    dispatchItemActionEvent: DispatchItemActionEvent;
+    createItemActionsMenuPopover: (element: HTMLElement, activeActions?: string[]) => void;
+}
+interface HandleGridClickArgs {
+    event: MouseEvent;
+    gridElement: HTMLElement;
+    hostElement: HTMLElement;
+    items: GridItemData[];
+    activeItemActionToggle?: string;
+    cleanupActiveItem: (item: HTMLElement) => void;
+    dispatchItemActionEvent: DispatchItemActionEvent;
+}
+interface TriggerGridItemActionArgs {
+    gridElement: HTMLElement;
+    items: GridItemData[];
+    gridItemData?: GridItemLookup;
+    itemId: string;
+    action: string;
+    options?: {
+        active?: boolean;
+    };
+    state: GridInteractionState;
+    cleanupActiveItem: (item: HTMLElement) => void;
+    dispatchItemActionEvent: DispatchItemActionEvent;
+    createItemActionsMenuPopover: (element: HTMLElement, activeActions?: string[]) => void;
+}
+export interface TriggerGridItemActionResult {
+    result: boolean | undefined;
+    state: GridInteractionState;
+}
+interface DeactivateGridItemsArgs {
+    gridElement: HTMLElement;
+    items: GridItemData[];
+    state: GridInteractionState;
+    cleanupActiveItem: (item: HTMLElement) => void;
+    dispatchItemActionEvent: DispatchItemActionEvent;
+}
+export interface DeactivateGridItemsResult {
+    deactivatedCount: number;
+    state: GridInteractionState;
+}
+export declare const getGridItemElementFromTarget: (target: EventTarget | null) => HTMLElement | undefined;
+export declare const shouldRemovePopoverOnMouseout: ({ event, gridItem }: ShouldRemovePopoverOnMouseoutArgs) => boolean;
+export declare const applyGridItemFocus: ({ event, focusedItemElement, removeItemActionsMenuPopover }: ApplyGridItemFocusArgs) => HTMLElement | undefined;
+export declare const clearGridItemFocus: ({ event, focusedItemElement, removeItemActionsMenuPopover }: ClearGridItemFocusArgs) => ClearGridItemFocusResult;
+export declare const cleanupActiveGridItem: ({ item, activeItemElement, gridElement, removeItemActionsMenuPopover }: CleanupActiveGridItemArgs) => HTMLElement | undefined;
+export declare const handleGridAction: ({ event, gridElement, items, state, cleanupActiveItem, dispatchItemActionEvent, createItemActionsMenuPopover }: HandleGridActionArgs) => GridInteractionState;
+export declare const handleGridClick: ({ event, gridElement, hostElement, items, activeItemActionToggle, cleanupActiveItem, dispatchItemActionEvent }: HandleGridClickArgs) => GridInteractionState;
+export declare const triggerGridItemAction: ({ gridElement, items, gridItemData, itemId, action, options, state, cleanupActiveItem, dispatchItemActionEvent, createItemActionsMenuPopover }: TriggerGridItemActionArgs) => TriggerGridItemActionResult;
+export declare const deactivateGridItems: ({ gridElement, items, state, cleanupActiveItem, dispatchItemActionEvent }: DeactivateGridItemsArgs) => DeactivateGridItemsResult;
+export {};