@sisense/sdk-ui-angular 2.17.0 → 2.18.0

package/dist/fesm2020/sisense-sdk-ui-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, createComponent, NgModule, EventEmitter, Component, ViewChild, Input, Output } from '@angular/core';
-import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomWidgetsProviderAdapter, createClientApplication, TabberButtonsWidget, createWrapperElement, getDashboardModel, getDashboardModels, HookAdapter, useComposedDashboardInternal, createHookApiFacade, useGetFilterMembers, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, useExecuteCsvQueryInternal, useExecuteCustomWidgetQueryInternal, getWidgetModel, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, FilterTile, FiltersPanel, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, Widget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
+import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomWidgetsProviderAdapter, createClientApplication, TabberButtonsWidget, createWrapperElement, getDashboardModel, getDashboardModels, HookAdapter, useComposedDashboardInternal, createHookApiFacade, useGetFilterMembers, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, useExecuteCsvQueryInternal, useExecuteCustomWidgetQueryInternal, getWidgetModel, useJtdWidget, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, FilterTile, FiltersPanel, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, Widget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
 export { boxWhiskerProcessResult, extractDimensionsAndMeasures } from '@sisense/sdk-ui-preact';
 import { ReplaySubject, firstValueFrom, concat, of, BehaviorSubject, skip } from 'rxjs';
 import { __decorate } from 'tslib';
@@ -285,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [SISENSE_CONTEXT_CONFIG_TOKEN]
                 }] }]; } });
 
-var packageVersion = '2.17.0';
+var packageVersion = '2.18.0';
 
 /**
  * Service for rendering components dynamically.
@@ -392,7 +392,10 @@ function translateToPreactWidgetProps(widgetProps) {
             })
             : undefined,
         onDataPointContextMenu: dataPointContextMenu
-            ? (...[point, nativeEvent]) => dataPointContextMenu({ point, nativeEvent })
+            ? (...[point, nativeEvent]) => dataPointContextMenu({
+                point,
+                nativeEvent,
+            })
             : undefined,
         onDataPointsSelected: dataPointsSelect
             ? (...[points, nativeEvent]) => dataPointsSelect({ points, nativeEvent })
@@ -501,7 +504,7 @@ let DashboardService = class DashboardService {
      *
      * ```ts
       // Component behavior in example.component.ts
-      import { Component } from '@angular/core';
+      import { Component, OnDestroy } from '@angular/core';
       import { BehaviorSubject } from 'rxjs';
       import { DashboardService, type DashboardProps } from '@sisense/sdk-ui-angular';
   
@@ -510,15 +513,20 @@ let DashboardService = class DashboardService {
         templateUrl: './example.component.html',
         styleUrls: ['./example.component.scss'],
       })
-      export class ExampleComponent {
+      export class ExampleComponent implements OnDestroy {
         dashboard$: BehaviorSubject<DashboardProps> | undefined;
+        private composedDashboard: ReturnType<DashboardService['createComposedDashboard']> | undefined;
   
         constructor(private dashboardService: DashboardService) {}
   
         ngOnInit() {
           const initialDashboard: DashboardProps = { ... };
-          const composedDashboard = this.dashboardService.createComposedDashboard(initialDashboard);
-          this.dashboard$ = composedDashboard.dashboard$;
+          this.composedDashboard = this.dashboardService.createComposedDashboard(initialDashboard);
+          this.dashboard$ = this.composedDashboard.dashboard$;
+        }
+  
+        ngOnDestroy() {
+          this.composedDashboard?.destroy();
         }
   
         trackByIndex = (index: number) => index;
@@ -528,7 +536,9 @@ let DashboardService = class DashboardService {
      * ```
      * @param initialDashboard - Initial dashboard
      * @param options - Configuration options
-     * @returns Reactive composed dashboard object and API methods for interacting with it
+     * @returns Reactive composed dashboard object and API methods for interacting with it.
+     * The returned object includes a `destroy()` method that should be called when
+     * the dashboard is no longer needed to prevent memory leaks (e.g., in `ngOnDestroy`).
      */
     createComposedDashboard(initialDashboard, options = {}) {
         const hookAdapter = new HookAdapter((useComposedDashboardInternal), [createSisenseContextConnector(this.sisenseContextService)]);
@@ -539,10 +549,15 @@ let DashboardService = class DashboardService {
         hookAdapter.run(translateToPreactDashboardProps(initialDashboard), options);
         const setFilters = createHookApiFacade(hookAdapter, 'setFilters', true);
         const setWidgetsLayout = createHookApiFacade(hookAdapter, 'setWidgetsLayout', true);
+        const destroy = () => {
+            hookAdapter.destroy();
+            dashboard$.complete();
+        };
         return {
             dashboard$,
             setFilters,
             setWidgetsLayout,
+            destroy,
         };
     }
 };
@@ -813,8 +828,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @fusionEmbed
  */
 let WidgetService = class WidgetService {
-    constructor(sisenseContextService) {
+    constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
     }
     /**
      * Retrieves an existing widget model from the Sisense instance.
@@ -827,18 +843,153 @@ let WidgetService = class WidgetService {
         const app = await this.sisenseContextService.getApp();
         return getWidgetModel(app.httpClient, dashboardOid, widgetOid);
     }
+    /**
+     * Adds Jump To Dashboard (JTD) functionality to widget props.
+     *
+     * Jump To Dashboard (JTD) allows users to navigate from one dashboard to another when interacting with widgets,
+     * such as clicking on chart data points or using context menus. This method is particularly useful when rendering
+     * Widget components directly (not through a Dashboard component), but you still want JTD navigation functionality.
+     *
+     * For widgets that are part of a dashboard, consider using `applyJtdConfig` or `applyJtdConfigs` instead,
+     * as they apply JTD configuration at the dashboard level rather than individual widget level.
+     *
+     * Note: dashboard-only 'includeDashboardFilters' is not supported and would just be ignored, since we do not have a dashboard in the current context.
+     *
+     * This method enhances the provided widget props with JTD navigation capabilities, including:
+     * - Click and right-click event handlers for navigation
+     * - Hyperlink styling for actionable pivot cells (when applicable)
+     * - JTD icon display in widget headers
+     * @example
+     * ```TypeScript
+     * import { Component, OnDestroy } from '@angular/core';
+     * import {
+     *   WidgetService,
+     *   widgetModelTranslator,
+     *   type WidgetProps,
+     * } from '@sisense/sdk-ui-angular';
+     * import { BehaviorSubject } from 'rxjs';
+     *
+     * @Component({
+     *   selector: 'code-example',
+     *   template: `
+     *     <csdk-widget
+     *       *ngIf="widgetProps$ && (widgetProps$ | async) as widgetProps"
+     *       [id]="widgetProps.id"
+     *       [widgetType]="widgetProps.widgetType"
+     *       [chartType]="widgetProps.chartType"
+     *       [title]="widgetProps.title"
+     *       [dataSource]="widgetProps.dataSource"
+     *       [dataOptions]="widgetProps.dataOptions"
+     *       [filters]="widgetProps.filters"
+     *       [highlights]="widgetProps.highlights"
+     *       [styleOptions]="widgetProps.styleOptions"
+     *       [beforeMenuOpen]="widgetProps.beforeMenuOpen"
+     *       (dataPointClick)="widgetProps.dataPointClick?.($event)"
+     *       (dataPointContextMenu)="widgetProps.dataPointContextMenu?.($event)"
+     *       (dataPointsSelect)="widgetProps.dataPointsSelect?.($event)"
+     *     />
+     *   `,
+     * })
+     * export class CodeExample implements OnDestroy {
+     *   constructor(private widgetService: WidgetService) {}
+     *
+     *   widgetProps$: BehaviorSubject<WidgetProps | null> | null = null;
+     *   private jtdDestroy: (() => void) | null = null;
+     *
+     *   async ngOnInit(): Promise<void> {
+     *     const widget = await this.widgetService.getWidgetModel({
+     *       dashboardOid: '65a82171719e7f004018691c',
+     *       widgetOid: '65a82171719e7f004018691f',
+     *     });
+     *
+     *     const baseProps = widget
+     *       ? widgetModelTranslator.toWidgetProps(widget)
+     *       : null;
+     *
+     *     if (baseProps) {
+     *       const jtdConfig = {
+     *         targets: [{ id: 'target-dashboard-id', caption: 'Details' }],
+     *         interaction: { triggerMethod: 'rightclick' },
+     *       };
+     *       const jtdResult = this.widgetService.createJtdWidget(
+     *         baseProps,
+     *         jtdConfig,
+     *       );
+     *       this.widgetProps$ = jtdResult.widget$;
+     *       this.jtdDestroy = jtdResult.destroy;
+     *     }
+     *   }
+     *
+     *   ngOnDestroy(): void {
+     *     this.jtdDestroy?.();
+     *   }
+     * }
+     * ```
+     *
+     * @param widgetProps - Base widget props to enhance with JTD functionality
+     * @param jtdConfig - JTD configuration defining navigation targets and behavior
+     * @returns Object containing:
+     *         - `widget$`: The observable that emits enhanced widget props with JTD handlers.
+     *         - `destroy`: Function to clean up resources. Call this when the component is destroyed.
+     * @group Dashboards
+     */
+    createJtdWidget(widgetProps, jtdConfig) {
+        // Create BehaviorSubject initialized with base props (or null)
+        const enhancedProps$ = new BehaviorSubject(widgetProps);
+        if (!widgetProps) {
+            return {
+                widget$: enhancedProps$,
+                destroy: () => {
+                    enhancedProps$.complete();
+                },
+            };
+        }
+        // Create HookAdapter with useJtdWidget hook and context connectors
+        const hookAdapter = new HookAdapter(useJtdWidget, [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+        // Convert Angular props to preact props
+        const preactProps = translateToPreactWidgetProps(widgetProps);
+        // Subscribe to hook adapter results and capture the subscription
+        const hookAdapterSubscription = hookAdapter.subscribe((enhancedPreactProps) => {
+            if (enhancedPreactProps) {
+                // Convert back to Angular props
+                const angularProps = translateFromPreactWidgetProps(enhancedPreactProps);
+                enhancedProps$.next(angularProps);
+            }
+            else {
+                enhancedProps$.next(null);
+            }
+        });
+        // Run the hook with widget props and JTD config
+        // This will trigger the subscription above asynchronously when React contexts are ready
+        hookAdapter.run(preactProps, jtdConfig);
+        // Return the BehaviorSubject and destroy function for cleanup
+        return {
+            widget$: enhancedProps$,
+            destroy: () => {
+                // Unsubscribe from hook adapter
+                hookAdapterSubscription.unsubscribe();
+                // Destroy the hook adapter to clean up React components and contexts
+                hookAdapter.destroy();
+                // Complete the BehaviorSubject to release subscribers and avoid leaks
+                enhancedProps$.complete();
+            },
+        };
+    }
 };
-WidgetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+WidgetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Injectable });
 WidgetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, providedIn: 'root' });
 WidgetService = __decorate([
-    TrackableService(['getWidgetModel'])
+    TrackableService(['getWidgetModel', 'createJtdWidget'])
 ], WidgetService);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; } });
 
 class DecoratorsModule {
     constructor(sisenseContextService) {
@@ -2671,6 +2822,18 @@ class PivotTableComponent {
     constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(PivotTable, [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
@@ -2693,6 +2856,8 @@ class PivotTableComponent {
             filters: this.filters,
             highlights: this.highlights,
             styleOptions: this.styleOptions,
+            onDataPointClick: (...[point, nativeEvent]) => this.dataPointClick.emit({ point, nativeEvent }),
+            onDataPointContextMenu: (...[point, nativeEvent]) => this.dataPointContextMenu.emit({ point, nativeEvent }),
         };
     }
     /** @internal */
@@ -2701,7 +2866,7 @@ class PivotTableComponent {
     }
 }
 PivotTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-PivotTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableComponent, selector: "csdk-pivot-table", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
+PivotTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableComponent, selector: "csdk-pivot-table", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'csdk-pivot-table', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
@@ -2718,6 +2883,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], styleOptions: [{
                 type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
             }] } });
 
 /**
@@ -5186,6 +5355,18 @@ class PivotTableWidgetComponent {
     constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(PivotTableWidget, [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
@@ -5208,8 +5389,11 @@ class PivotTableWidgetComponent {
             filters: this.filters,
             highlights: this.highlights,
             styleOptions: this.styleOptions,
+            drilldownOptions: this.drilldownOptions,
             title: this.title,
             description: this.description,
+            onDataPointClick: (...[point, nativeEvent]) => this.dataPointClick.emit({ point, nativeEvent }),
+            onDataPointContextMenu: (...[point, nativeEvent]) => this.dataPointContextMenu.emit({ point, nativeEvent }),
         };
     }
     /** @internal */
@@ -5218,7 +5402,7 @@ class PivotTableWidgetComponent {
     }
 }
 PivotTableWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-PivotTableWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableWidgetComponent, selector: "csdk-pivot-table-widget", inputs: { dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", title: "title", description: "description" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
+PivotTableWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableWidgetComponent, selector: "csdk-pivot-table-widget", inputs: { dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", drilldownOptions: "drilldownOptions", title: "title", description: "description" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'csdk-pivot-table-widget', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
@@ -5235,10 +5419,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], styleOptions: [{
                 type: Input
+            }], drilldownOptions: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
                 type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
             }] } });
 
 /**
@@ -6256,6 +6446,57 @@ const textWidgetProps = widgetModelTranslator.toTextWidgetProps(widgetModel);
 function toTextWidgetProps(widgetModel) {
     return widgetModelTranslator$1.toTextWidgetProps(widgetModel);
 }
+/**
+ * Translates {@link WidgetModel} to {@link WidgetProps}.
+ *
+ * @example
+ * ```html
+ * <csdk-widget
+ *   *ngIf="widgetProps"
+ *   [id]="widgetProps.id"
+ *   [widgetType]="widgetProps.widgetType"
+ *   [chartType]="widgetProps.chartType"
+ *   [dataSource]="widgetProps.dataSource"
+ *   [dataOptions]="widgetProps.dataOptions"
+ *   [filters]="widgetProps.filters"
+ *   [highlights]="widgetProps.highlights"
+ *   [styleOptions]="widgetProps.styleOptions"
+ *   [title]="widgetProps.title"
+ *   [description]="widgetProps.description"
+ * />
+ * ```
+ *
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import {
+ *   type WidgetProps,
+ *   WidgetService,
+ *   widgetModelTranslator,
+ * } from '@sisense/sdk-ui-angular';
+ *
+ * @Component({
+ *   selector: 'app-example',
+ *   templateUrl: './example.component.html',
+ *   styleUrls: ['./example.component.scss'],
+ * })
+ * export class ExampleComponent {
+ *   widgetProps: WidgetProps | null = null;
+ *
+ *   constructor(private widgetService: WidgetService) {}
+ *
+ *   async ngOnInit(): Promise<void> {
+ *     const widgetModel = await widgetService.getWidgetModel({
+ *       dashboardOid: 'your-dashboard-oid',
+ *       widgetOid: 'your-widget-oid'
+ *     });
+ *     this.widgetProps = widgetModelTranslator.toWidgetProps(widgetModel);
+ *   }
+ * }
+ * ```
+ */
+function toWidgetProps(widgetModel) {
+    return widgetModelTranslator$1.toWidgetProps(widgetModel);
+}
 
 var widgetModelTranslator = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6266,7 +6507,8 @@ var widgetModelTranslator = /*#__PURE__*/Object.freeze({
     toPivotTableProps: toPivotTableProps,
     toPivotTableWidgetProps: toPivotTableWidgetProps,
     toTableProps: toTableProps,
-    toTextWidgetProps: toTextWidgetProps
+    toTextWidgetProps: toTextWidgetProps,
+    toWidgetProps: toWidgetProps
 });
 
 /**