@orangelogic/design-system 2.0.0-29DUO2-beta-1 → 2.0.0-29DUO2-beta-2

package/library/components/video.js

@@ -1,11 +1,11 @@
 import { c as ps, a as kn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Ab } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { r as Tb, C as Eb, R as wb } from "../chunks/image.CBjclAIZ.js";
+import { r as Tb, C as Eb, R as wb } from "../chunks/image.C9avagDq.js";
 import Sb from "./resize-observer.js";
 import { c as Cb } from "../chunks/component.styles.DMSLciL5.js";
 import { b as Mb } from "../chunks/browser.BHOCIF_A.js";
 import { c as Db } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as Pb } from "../chunks/i18n.Bge6Wbrz.js";
+import { L as Pb } from "../chunks/i18n.C0iakJkV.js";
 import { w as Bn } from "../chunks/watch.q1sEjPWL.js";
 import { i as Lb, x as Kc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as ki } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.0.0-29DUO2-beta-1",
+  "version": "2.0.0-29DUO2-beta-2",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/e-chart/e-chart.d.ts

@@ -6,6 +6,9 @@ import { ChartSpec } from './e-chart-controller';
 
 /**
  * @summary CxEChart
+ *
+ * @event cx-e-chart-rendered - Emitted when the chart finishes rendering new data or spec.
+ * @event {{ type, raw, seriesName, name, value, data, chart }} cx-e-chart-drill-down - Emitted when the user clicks on a data point.
  */
 export default class CxEChart extends CortexElement {
     #private;
@@ -17,13 +20,15 @@ export default class CxEChart extends CortexElement {
     private readonly localize;
     private readonly eChartController;
     private readonly chartDiv;
-    data: any[];
+    data: Array<Record<string, unknown>>;
     spec: ChartSpec | undefined;
     loading: boolean | undefined;
+    constructor();
     connectedUpdatedCallback(): void;
     disconnectedCallback(): void;
     handleUpdate(): void;
     private handleResize;
+    private handleChartDrillDown;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/events/src/cx-e-chart-drill-down.d.ts

@@ -0,0 +1,16 @@
+import { ECharts } from 'echarts';
+
+export type CxEChartDrillDownEvent = CustomEvent<{
+    chart: ECharts | null;
+    data: unknown;
+    name: string | undefined;
+    raw: unknown;
+    seriesName: string | undefined;
+    type: string | undefined;
+    value: unknown;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-e-chart-drill-down': CxEChartDrillDownEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -54,6 +54,7 @@ export * from './cx-download-format-picker-select';
 export * from './cx-download-format-request-status';
 export * from './cx-drag-end';
 export * from './cx-drag-start';
+export * from './cx-e-chart-drill-down';
 export * from './cx-enter';
 export * from './cx-error';
 export * from './cx-expand';

package/library/packages/molecules/src/stat-card/stat-card.d.ts

@@ -3,12 +3,12 @@ import { default as CxFormatBytes } from '../../../atoms/src/components/format-b
 import { default as CxFormatNumber } from '../../../atoms/src/components/format-number/format-number.ts';
 import { default as CxFormatTime } from '../../../atoms/src/components/format-time/format-time.ts';
 import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
-import { default as CxSkeleton } from '../../../atoms/src/components/skeleton/skeleton.ts';
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { FormatNumberType } from '../../../types/src/format-number';
-import { StatCardDisplayType, TitleFormat, ValueFormat } from '../../../types/src/state-card';
+import { StatCardDisplayType, TitleFormat, ValueFormat } from '../../../types/src/stat-card';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -30,8 +30,8 @@ export default class CxStatCard extends CortexElement {
         'cx-format-number': typeof CxFormatNumber;
         'cx-format-time': typeof CxFormatTime;
         'cx-icon': typeof CxIcon;
-        'cx-skeleton': typeof CxSkeleton;
         'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
         'cx-typography': typeof CxTypography;
     };
     /**
@@ -55,7 +55,7 @@ export default class CxStatCard extends CortexElement {
      */
     valueFormat: ValueFormat;
     /**
-     * Whether the stat card is loading (value area shows skeletons).
+     * Whether the stat card is loading (value area shows a spinner).
      */
     loading: boolean;
     /**

package/library/packages/organisms/src/content-builder/configs/index.d.ts

@@ -4,10 +4,6 @@ export { default as carousel } from './carousel';
 export { default as colorSwatches } from './color-swatches';
 export { default as column } from './column';
 export { default as columnGroup } from './column-group';
-export { default as dashboard } from './dashboard';
-export { default as dashboardChart } from './dashboard-chart';
-export { default as dashboardFilter } from './dashboard-filter';
-export { default as dashboardTable } from './dashboard-table';
 export { default as divider } from './divider';
 export { default as fontKit } from './font-kit';
 export { default as gallery } from './gallery';
@@ -16,7 +12,6 @@ export { default as analytics } from './analytics';
 export { default as image } from './image';
 export { default as richText } from './rich-text';
 export { default as searchBox } from './search-box';
-export { default as statCard } from './stat-card';
 export { default as tabGroup } from './tab-group';
 export { default as text } from './text';
 export { default as timeline } from './timeline';

package/library/packages/organisms/src/content-builder/configs-controller.d.ts

@@ -81,18 +81,6 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'data-constraints': boolean;
         'width-type': import('../../../types/src/column').ColumnWidthType;
-    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
-        data: string;
-        'data-type': string;
-    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
-        controls: string;
-        'default-value': string;
-        'no-controls-label': string;
-        'panel-title': string;
-        'show-reset-button': boolean;
-        value: string;
-    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
-        'data-type': string;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'use-padding': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
@@ -207,13 +195,6 @@ export default class ConfigsController {
         placeholder: import('../../../molecules/src/index.ts').CxSearchBox["placeholder"];
         size: import('../../../molecules/src/index.ts').CxSearchBox["size"];
         'width-type': import('../../../types/src/search-box').SearchBoxWidthType;
-    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
-        'card-title': string;
-        'card-title-format': import('../../../types/src/state-card').TitleFormat;
-        'data-type': string;
-        icon: string;
-        value: string;
-        'value-format': import('../../../types/src/state-card').ValueFormat;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
         'data-constraints': boolean;
@@ -339,15 +320,6 @@ export default class ConfigsController {
         trigger: string;
         'width-type': import('../../../types/src/column').ColumnWidthType;
     }> | {
-        controls: string;
-        'default-value': string;
-        'no-controls-label': string;
-        'panel-title': string;
-        'show-reset-button': boolean;
-        value: string;
-    } | {
-        'data-type': string;
-    } | {
         'use-padding': boolean;
     } | Partial<{
         'download-appearance': import('./blocks/font-kit/font-kit').default["downloadAppearance"];

package/library/packages/organisms/src/content-builder/content-builder-config.d.ts

@@ -26,18 +26,6 @@ export declare const defaultBlockValue: {
     BlockColumns: {
         components: undefined;
     };
-    BlockDashboard: {
-        components: undefined;
-    };
-    BlockDashboardChart: {
-        components: undefined;
-    };
-    BlockDashboardFilter: {
-        components: undefined;
-    };
-    BlockDashboardTable: {
-        components: undefined;
-    };
     BlockDivider: {
         components: undefined;
     };
@@ -59,9 +47,6 @@ export declare const defaultBlockValue: {
     BlockSearchBox: {
         components: undefined;
     };
-    BlockStatCard: {
-        components: undefined;
-    };
     BlockTabs: {
         components: undefined;
     };

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -6,10 +6,6 @@ export { default as ColumnPlugin } from './column';
 export { default as ColumnGroupPlugin } from './column-group';
 export { default as CorePlugin } from './core';
 export { default as InjectCustomFrameAbilityForGrapesJS } from './custom-frame';
-export { default as DashboardPlugin } from './dashboard';
-export { default as DashboardChartPlugin } from './dashboard-chart';
-export { default as DashboardFilterPlugin } from './dashboard-filter';
-export { default as DashboardTablePlugin } from './dashboard-table';
 export { default as DividerPlugin } from './divider';
 export { default as FontKitPlugin } from './font-kit';
 export { default as GalleryPlugin } from './gallery';
@@ -19,7 +15,6 @@ export { default as ImagePlugin } from './image';
 export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
-export { default as StatCardPlugin } from './stat-card';
 export { default as TabsPlugin } from './tab-group';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';

package/library/packages/organisms/src/dashboard-filter/dashboard-filter.d.ts

@@ -0,0 +1,83 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxCard } from '../../../atoms/src/components/card/card.ts';
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+export type DashboardFilterOption = {
+    disabled?: boolean;
+    label: string;
+    value: string;
+};
+/** Raw option row keyed by source column names (used when {@link DashboardFilterControl.optionColumnMapping} is set). */
+export type DashboardFilterOptionRow = Record<string, unknown>;
+export type DashboardFilterControl = {
+    controlId: string;
+    controlType: string;
+    /**
+     * ID generated by cx-table
+     */
+    id: string;
+    label: string;
+    maxOptionsVisible?: number;
+    /**
+     * Maps option fields to column names on each {@link DashboardFilterControl.options} row.
+     * Omitted keys fall back to columns named `disabled`, `label`, and `value`.
+     */
+    optionColumnMapping: Partial<Record<keyof DashboardFilterOption, string>>;
+    /** Pre-shaped options, or raw rows when `optionColumnMapping` is non-empty. */
+    options?: DashboardFilterOption[] | DashboardFilterOptionRow[];
+    placeholder?: string;
+    type?: string;
+};
+/**
+ * @summary Dashboard filter panel (Filters & Controls) with date range, category, status and actions.
+ *
+ * @event cx-dashboard-filter-change - Emitted when the user applies filters.
+ * @event cx-dashboard-filter-reset - Emitted when the user resets filters.
+ */
+export default class CxDashboardFilter extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-card': typeof CxCard;
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-icon': typeof CxIcon;
+        'cx-input': typeof CxInput;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+        'cx-space': typeof CxSpace;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    private readonly hasSlotController;
+    /** Title of the filter panel. */
+    panelTitle: string;
+    /** Controls to show in the filter panel. */
+    controls: DashboardFilterControl[];
+    /** Whether to show the reset button. */
+    showResetButton: boolean;
+    noControlsLabel: string;
+    /** Default value for the filter panel. */
+    defaultValue: Record<string, unknown>;
+    /** Data for the filter panel. */
+    value: Record<string, unknown>;
+    runFirstUpdated(): void;
+    private handleChange;
+    private handleReset;
+    private handleApply;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-dashboard-filter': CxDashboardFilter;
+    }
+}

package/library/packages/organisms/src/dashboard-filter/dashboard-filter.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/organisms/src/dashboard-table/dashboard-table.d.ts

@@ -0,0 +1,45 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTable } from '../../../atoms/src/components/table/table.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { Options, OptionsColumns } from '../../../types/src/table';
+
+/**
+ * @summary Dashboard table block: wraps `cx-table` with column helpers (e.g. epoch formatters), and optional load-more control that notifies the host via event.
+ *
+ * @event {{ paginationSize?: number }} cx-dashboard-table-load-more - Fired when the user activates load more; the container should fetch and update `data`.
+ */
+export default class CxDashboardTable extends CortexElement {
+    #private;
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-space': typeof CxSpace;
+        'cx-table': typeof CxTable;
+    };
+    data: Options['data'];
+    columns: OptionsColumns['columns'];
+    loading: boolean;
+    /** Tabulator layout mode passed to `cx-table`. */
+    layout: NonNullable<OptionsColumns['layout']>;
+    /** Row height in px for `cx-table`. */
+    rowHeight: number;
+    pagination: boolean;
+    paginationSize: number | undefined;
+    canSearch: boolean;
+    searchFields: string[];
+    /** Sets CSS `--table-height` on `cx-table` when defined. */
+    tableHeight?: string;
+    /** Shows the load-more button; clicks emit `cx-dashboard-table-load-more`. */
+    showLoadMore: boolean;
+    loadMoreLabel: string;
+    private transformedColumns;
+    handleColumnsChange(): void;
+    handleLoadMoreClick(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-dashboard-table': CxDashboardTable;
+    }
+}

package/library/packages/organisms/src/dashboard-table/dashboard-table.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/organisms/src/index.d.ts

@@ -1,8 +1,10 @@
 export { default as CxAssetLinkFormat } from './asset-link-format/asset-link-format';
+export { default as CxDashboardFilter } from './dashboard-filter/dashboard-filter';
+export { default as CxDashboardTable } from './dashboard-table/dashboard-table';
 export { default as CxBentoGrid } from './bento-grid/bento-grid';
 export { default as CxCarousel } from './carousel/carousel';
 export { default as CxChatbot } from './chatbot/chatbot';
-export { default as CxChartPlanBuilder } from './content-builder/components/chart-plan.builder/chart-plan-builder';
+export { default as CxChartPlanBuilder } from './content-builder/components/chart-plan-builder/chart-plan-builder';
 export { default as CxClusterManagement } from './cluster-management/cluster-management';
 export { default as CxColorSwatchGroup } from './color-swatch-group/color-swatch-group';
 export { default as CxComment } from './comment/comment';

package/library/packages/services/src/api/dashboard/dashboard.d.ts

@@ -1,14 +1,7 @@
-import { GetDashboardChartTypeListResponse, GetDashboardFilterControlListResponse, GetDashboardListResponse, GetDashboardTableTypeListResponse, GetStatCardTypeListResponse } from './dashboard.types';
+import { GetDashboardListResponse } from './dashboard.types';
 
 export declare function apiGetDashboardList(): Promise<never[] | GetDashboardListResponse>;
 export declare function apiGetDashboardEmbeddedUrl({ dashboardId, pageId, }: {
     dashboardId: string;
     pageId: string;
 }): Promise<string>;
-export declare function apiGetStatCardTypeList(): Promise<GetStatCardTypeListResponse>;
-export declare function apiGetDashboardFilterControlList(): Promise<GetDashboardFilterControlListResponse | {
-    data: never[];
-    hasMore: boolean;
-}>;
-export declare function apiGetDashboardChartTypeList(): Promise<GetDashboardChartTypeListResponse>;
-export declare function apiGetDashboardTableTypeList(): Promise<GetDashboardTableTypeListResponse>;

package/library/packages/services/src/api/endpoints.d.ts

@@ -20,15 +20,6 @@ export declare enum AUTOCOMPLETE_API_ENDPOINT {
     GET_AUTOCOMPLETE_ITEMS_WITH_QUERY = "webapi/ui/autocompletion/executequery_4JD_v1-alpha",
     GET_AUTOCOMPLETE_ITEMS_WITH_SERVICE = "webapi/ui/autocompletion/callservice_41s5_v1-alpha"
 }
-/**
- * TODO: Change to correct endpoints
- */
-export declare enum NEW_DASHBOARD_API_ENDPOINT {
-    GET_DASHBOARD_CHART_TYPE_LIST = "webapi/extensibility/integrations/businessintelligence/getdashboardcharttypelist_41JJ_v1",
-    GET_DASHBOARD_FILTER_CONTROL_LIST = "webapi/extensibility/integrations/businessintelligence/getdashboardfiltercontrollist_41JJ_v1",
-    GET_DASHBOARD_TABLE_TYPE_LIST = "webapi/extensibility/integrations/businessintelligence/getdashboardtabletypelist_41JJ_v1",
-    GET_STAT_CARD_TYPE_LIST = "webapi/extensibility/integrations/businessintelligence/getstatcardtypelist_41JJ_v1"
-}
 export declare enum DASHBOARD_API_ENDPOINT {
     GET_DASHBOARD_EMBEDDED_URL = "webapi/extensibility/integrations/businessintelligence/getdashboardembededurl_41JJ_v1",
     GET_DASHBOARD_LIST = "webapi/extensibility/integrations/businessintelligence/getlistdashboards_41JI_v1"

package/library/packages/types/src/content-builder.d.ts

@@ -235,10 +235,6 @@ export declare enum BlockType {
     ColorSwatches = "BlockColorSwatches",
     Column = "BlockCell",
     ColumnGroup = "BlockColumns",
-    Dashboard = "BlockDashboard",
-    DashboardChart = "BlockDashboardChart",
-    DashboardFilter = "BlockDashboardFilter",
-    DashboardTable = "BlockDashboardTable",
     Divider = "BlockDivider",
     FontKit = "BlockFontKit",
     Gallery = "BlockGallery",
@@ -246,13 +242,12 @@ export declare enum BlockType {
     Image = "BlockImage",
     RichText = "BlockRichText",
     SearchBox = "BlockSearchBox",
-    StatCard = "BlockStatCard",
     TabGroup = "BlockTabs",
     Text = "BlockText",
     Timeline = "BlockTimeline",
     Video = "BlockVideo"
 }
-export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.Dashboard | BlockType.DashboardChart | BlockType.DashboardFilter | BlockType.DashboardTable | BlockType.Divider | BlockType.FontKit | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.StatCard | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
+export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.Divider | BlockType.FontKit | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
 export declare enum DialogType {
     Carousel = "carousel",
     Gallery = "gallery"

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -209,9 +209,6 @@ export interface Translation extends DefaultTranslation {
     darkModeImage: string;
     dashSpacing: string;
     dashWidth: string;
-    dashboardChart: string;
-    dashboardFilter: string;
-    dashboardTable: string;
     dashed: string;
     dateFormat: string;
     default: string;
@@ -657,7 +654,6 @@ export interface Translation extends DefaultTranslation {
     splitIntoMultipleScreens: string;
     splitIntoMultipleScreensHelpText: string;
     start: string;
-    statCard: string;
     status: string;
     statusDate: string;
     stop: string;

package/library/packages/utils/src/object/object.d.ts

@@ -2,4 +2,3 @@ export declare function omit<T extends object, K extends keyof T>(obj: T, keys:
 export declare function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): {
     [P in K]: T[P];
 };
-export declare function retrieve<T>(obj: unknown, key: string): T | undefined;