@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/README.md

@@ -15,7 +15,7 @@ ACK produces and edits chart configuration (type, slots, options, filters). It d
 ## Installation
 
 ```bash
-npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.2.1 @luzmo/icons@^1.0.1-alpha.46
+npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.5.1 @luzmo/icons@^1.0.1-alpha.47
 ```
 
 ACK uses Lucero 2 for its design-system primitives. Package managers that do not install peer dependencies automatically must install the compatible peer versions explicitly.
@@ -267,8 +267,14 @@ grid.addEventListener('luzmo-item-grid-layout-changed', (e) => {
 
 Key events: `luzmo-item-grid-ready`, `luzmo-item-grid-layout-changed`, `luzmo-item-grid-item-action` (cancelable), and `luzmo-item-grid-item-states-changed`. Imperative helpers (`addGridItem`, `removeGridItem`, `cloneGridItem`, `updateGridItem*`) return the updated `GridItemData[]`.
 
+The `grid` object on `luzmo-item-grid-ready` (and the `grid` property) is a GridStack 14 instance. Use `mode()` and `getMode()` (`'top'`, `'float'`, `'list'`, or `'compact'`). `float()` and `getFloat()` are not available.
+
 See the [Item Grid reference](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-item-grid) for controlled vs uncontrolled details, all properties, events, methods, and examples.
 
+Setting `grid.items = undefined` switches to uncontrolled mode and retains the last controlled items. Set `grid.items = []` to clear the grid.
+
+For a custom chart renderer, import `ItemGridBase` and the `GridItemData` type from `@luzmo/analytics-components-kit/grid-core`. Subclass the base and override `renderItemContent(item, index)` to supply the content. Item content is cached: also override `getItemRenderDependencies()` to return every reactive value used by your renderer beyond the item itself (for example, `contentLanguage` or credentials). Replace dependency object references when they change. The base handles layout and interactions without registering a grid element or importing `@luzmo/embed`. Existing `/item-grid` imports remain unchanged.
+
 ## Utilities
 
 Import helpers from `@luzmo/analytics-components-kit/utils` when you need ACK-compatible data or chart-state transformations without mounting a component.

package/components/add-to-dashboard/add-to-dashboard.d.ts

@@ -0,0 +1,134 @@
+import type { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/button';
+import '@luzmo/lucero/checkbox';
+import '@luzmo/lucero/divider';
+import '@luzmo/lucero/field-group';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/notice';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/popover';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/search';
+import '@luzmo/lucero/tooltip';
+import { CSSResultArray, nothing, PropertyValues, TemplateResult } from 'lit';
+import type { DashboardActions } from '../../types/add-to-dashboard.types';
+import { LuzmoElement } from '../../utils/base';
+import type { FlexChartConfig } from '../interactive-viz-item/types';
+declare const LuzmoAddToDashboard_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-add-to-dashboard
+ * @description "Add to dashboard" button and picker for one chart: search and page through the dashboards the
+ * credentials can modify, create a new dashboard, drill into the variants of a use-only dashboard, and pick screen
+ * modes for a dashboard that does not sync them. Saves through `dashboardActions` when set, otherwise through the
+ * built-in adapter on `authKey`/`authToken`/`apiUrl`, otherwise renders nothing.
+ * @fires {CustomEvent<AddToDashboardChartAddedEventDetail>} luzmo-chart-added - Fired after the chart was saved to a dashboard, a new dashboard or a variant.
+ * @fires {CustomEvent<AddToDashboardChartAddFailedEventDetail>} luzmo-chart-add-failed - Fired when saving the chart failed.
+ * @attr auth-key - Auth key for the built-in adapter (`authKey`).
+ * @attr auth-token - Auth token for the built-in adapter (`authToken`).
+ * @attr api-url - API URL for the built-in adapter (`apiUrl`).
+ * @cssprop --luzmo-add-to-dashboard-picker-width - Width of the picker popover.
+ * @cssprop --luzmo-add-to-dashboard-list-max-height - Maximum height of the scrolling dashboard list.
+ */
+export declare class LuzmoAddToDashboard extends LuzmoAddToDashboard_base {
+    static get styles(): CSSResultArray;
+    /** Chart to save; `options.theme` is removed before it reaches the adapter. */
+    chart: FlexChartConfig | null;
+    /** Host data operations. When unset, the built-in adapter on the auth properties is used. */
+    dashboardActions: DashboardActions | null;
+    /** Auth key for the built-in adapter. */
+    authKey: string;
+    /** Auth token for the built-in adapter. */
+    authToken: string;
+    /**
+     * API URL for the built-in adapter.
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /** Placement of the picker relative to the button. */
+    placement: Placement;
+    /** When present, the button is disabled. */
+    disabled: boolean;
+    private _open;
+    private _actions;
+    private _step;
+    private _rows;
+    private _hasMore;
+    private _loading;
+    private _listFailed;
+    private _original;
+    private _variants;
+    private _variantsLoading;
+    private _variantsFailed;
+    private _pending;
+    private _screenModes;
+    private _saving;
+    private _status;
+    private _triggerElement;
+    private _searchElement;
+    private _backElement;
+    private _noticeElement;
+    private readonly _triggerId;
+    private _search;
+    private _searchTimer?;
+    private _listAbort?;
+    private _variantsAbort?;
+    private _saveAbort?;
+    private _alertResizeObserver?;
+    private _actionsGeneration;
+    private _reloadOnUpdate;
+    private get _hasSource();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changes: PropertyValues<this>): void;
+    protected updated(changes: PropertyValues): void;
+    private get _alertContainer();
+    private _startFittingAlert;
+    private _stopFittingAlert;
+    private _fitAlert;
+    private _resolveActions;
+    private _dispatch;
+    private _displayName;
+    private _variantName;
+    private _screenModeChoices;
+    private _handleOpened;
+    private _loadList;
+    private _handleClosed;
+    private _loadPage;
+    private _handleSearchInput;
+    private _handleListScroll;
+    private _menuValue;
+    private _handleListChange;
+    private _handleVariantChange;
+    private _selectTarget;
+    private _loadVariants;
+    private _handleBack;
+    private _toggleScreenMode;
+    private _handleConfirmScreenModes;
+    private _save;
+    private _setStatus;
+    private _focusTrigger;
+    private _isFocusLost;
+    private _handleNoticeClose;
+    private _focusStep;
+    private _renderRow;
+    private _renderCreateRow;
+    private _renderLoading;
+    private _handleRetry;
+    private _renderEmpty;
+    private _renderHeader;
+    private _renderList;
+    private _renderVariants;
+    private _renderScreenModes;
+    private _renderPicker;
+    private _noticeLabels;
+    private _renderStatus;
+    protected render(): TemplateResult | typeof nothing;
+}
+export {};

package/components/add-to-dashboard/dashboard-actions.d.ts

@@ -0,0 +1,14 @@
+import type { BuiltInDashboardActionsConfig, DashboardActions, DashboardListPage, DashboardOption } from '../../types/add-to-dashboard.types';
+type DashboardSource = (offset: number, limit: number) => Promise<{
+    count: number;
+    rows: DashboardOption[];
+}>;
+export declare function pageAcrossSources(sources: DashboardSource[], offset: number, limit: number): Promise<DashboardListPage>;
+/**
+ * Built-in `DashboardActions` on the public API with the given credentials. Rights come from the token: an
+ * embed token's `access.dashboards` grants plus the user's own access rights. `create` is only present for
+ * an embed token with a designer or owner role or for any other token type. With the `flag_dashboard_variants`
+ * user flag, use-only dashboards and their variants are listed, and `addToVariant` follows the `create` rule.
+ */
+export declare function createDashboardActions(config: BuiltInDashboardActionsConfig): Promise<DashboardActions>;
+export {};

package/components/add-to-dashboard/helpers/add-to-dashboard-helpers.d.ts

@@ -0,0 +1,3 @@
+import type { FlexChartConfig, NormalizedChartConfig } from '../../interactive-viz-item/types';
+export declare function toDashboardChart(chart: FlexChartConfig): NormalizedChartConfig;
+export declare function nextVariantNumber(takenNames: string[], nameFor: (number: number) => string): number;

package/components/add-to-dashboard/index.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../add-to-dashboard-nYUaDghN.cjs");Object.defineProperty(exports,"LuzmoAddToDashboard",{enumerable:!0,get:function(){return e.t}}),exports.createDashboardActions=e.n;

package/components/add-to-dashboard/index.d.ts

@@ -0,0 +1,11 @@
+import { LuzmoAddToDashboard } from './add-to-dashboard';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-add-to-dashboard': LuzmoAddToDashboard;
+    }
+}
+export { LuzmoAddToDashboard } from './add-to-dashboard';
+export { createDashboardActions } from './dashboard-actions';
+export type { AddToDashboardChartAddedEventDetail, AddToDashboardChartAddFailedEventDetail } from './types';
+export type { FlexChartConfig } from '../interactive-viz-item/types';
+export type { AddToDashboardSettings, BuiltInDashboardActionsConfig, DashboardActionCallOptions, DashboardActions, DashboardListPage, DashboardListRequest, DashboardOption } from '../../types/add-to-dashboard.types';

package/components/add-to-dashboard/index.js

@@ -0,0 +1,21 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "../add-to-dashboard-BY70QBzE.js";
+export { t as LuzmoAddToDashboard, e as createDashboardActions };

package/components/add-to-dashboard/types.d.ts

@@ -0,0 +1,7 @@
+import type { DashboardOption } from '../../types/add-to-dashboard.types';
+export interface AddToDashboardChartAddedEventDetail {
+    dashboard: DashboardOption;
+}
+export interface AddToDashboardChartAddFailedEventDetail {
+    error: unknown;
+}