@sisense/sdk-ui-angular 2.17.0 → 2.18.1

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 { InjectionToken, Injectable, Optional, Inject, NgModule, EventEmitter, Component, ViewChild, Input, Output, createComponent } from '@angular/core';
+import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomWidgetsProviderAdapter, createClientApplication, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, TabberButtonsWidget, createWrapperElement, getDashboardModel, getDashboardModels, HookAdapter, useComposedDashboardInternal, createHookApiFacade, useGetFilterMembers, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, useExecuteCsvQueryInternal, useExecuteCustomWidgetQueryInternal, getWidgetModel, useJtdWidget, 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,915 +285,499 @@ 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.1';
 
-/**
- * Service for rendering components dynamically.
- *
- * @internal
- */
-class DynamicRenderer {
-    constructor(appRef, injector, envInjector) {
-        this.appRef = appRef;
-        this.injector = injector;
-        this.envInjector = envInjector;
-    }
-    renderComponent(component, props) {
-        const componentRef = createComponent(component, {
-            environmentInjector: this.envInjector,
-            elementInjector: this.injector,
-        });
-        // Apply props to the component instance
-        Object.assign(componentRef.instance, props);
-        // Attach the component to the application
-        this.appRef.attachView(componentRef.hostView);
-        // Get the DOM element
-        const domElem = componentRef.hostView.rootNodes[0];
-        // Create destroy function
-        const destroy = () => {
-            // Detach from application
-            this.appRef.detachView(componentRef.hostView);
-            // Destroy the component
-            componentRef.destroy();
-        };
-        return {
-            element: domElem,
-            componentRef,
-            destroy,
-        };
-    }
-}
-DynamicRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicRenderer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }]; } });
-
-/**
- * Service for working with custom widgets.
- *
- * @group Dashboards
- */
-class CustomWidgetsService {
-    constructor(
-    /** @internal */
-    dynamicRenderer) {
-        this.dynamicRenderer = dynamicRenderer;
-        this.customWidgetsMap$ = new BehaviorSubject(new Map([['tabber-buttons', TabberButtonsWidget]]));
-    }
-    /**
-     * Registers a new custom widget.
-     *
-     * @param customWidgetType - The unique identifier for the custom widget type.
-     * @param customWidget - The custom widget component class to register.
-     */
-    registerCustomWidget(customWidgetType, customWidget) {
-        const customWidgetPreactComponent = (props) => {
-            const renderedComponent = this.dynamicRenderer.renderComponent(customWidget, props);
-            return createWrapperElement(renderedComponent.element, () => renderedComponent.destroy());
-        };
-        const customWidgetsMap = this.customWidgetsMap$.value;
-        if (!customWidgetsMap.has(customWidgetType)) {
-            customWidgetsMap.set(customWidgetType, customWidgetPreactComponent);
-            this.customWidgetsMap$.next(customWidgetsMap);
-        }
-    }
-    /**
-     * Checks if a custom widget is registered.
-     *
-     * @param customWidgetType - The type of the custom widget.
-     * @returns True if the custom widget is registered, false otherwise.
-     */
-    hasCustomWidget(customWidgetType) {
-        return this.customWidgetsMap$.value.has(customWidgetType);
+class DecoratorsModule {
+    constructor(sisenseContextService) {
+        DecoratorsModule.sisenseContextService = sisenseContextService;
     }
 }
-CustomWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, deps: [{ token: DynamicRenderer }], target: i0.ɵɵFactoryTarget.Injectable });
-CustomWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, decorators: [{
-            type: Injectable,
+DecoratorsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.NgModule });
+DecoratorsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
+DecoratorsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    declarations: [],
+                    exports: [],
                 }]
-        }], ctorParameters: function () { return [{ type: DynamicRenderer }]; } });
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
-function translateToPreactWidgetProps(widgetProps) {
-    const { beforeRender, dataReady, beforeMenuOpen, dataPointClick, dataPointContextMenu, dataPointsSelect, ...commonWidgetProps } = widgetProps;
-    return {
-        ...commonWidgetProps,
-        onBeforeRender: beforeRender,
-        onDataReady: dataReady,
-        onBeforeMenuOpen: beforeMenuOpen,
-        onDataPointClick: dataPointClick
-            ? (...[point, nativeEvent]) => dataPointClick({
-                point,
-                nativeEvent,
-            })
-            : undefined,
-        onDataPointContextMenu: dataPointContextMenu
-            ? (...[point, nativeEvent]) => dataPointContextMenu({ point, nativeEvent })
-            : undefined,
-        onDataPointsSelected: dataPointsSelect
-            ? (...[points, nativeEvent]) => dataPointsSelect({ points, nativeEvent })
-            : undefined,
-    };
-}
-function translateFromPreactWidgetProps(widgetProps) {
-    const { onBeforeRender, onDataReady, onBeforeMenuOpen, onDataPointClick, onDataPointContextMenu, onDataPointsSelected, ...commonWidgetProps } = widgetProps;
-    return {
-        ...commonWidgetProps,
-        beforeRender: onBeforeRender,
-        dataReady: onDataReady,
-        beforeMenuOpen: onBeforeMenuOpen,
-        dataPointClick: onDataPointClick
-            ? ({ point, nativeEvent }) => onDataPointClick(point, nativeEvent)
-            : undefined,
-        dataPointContextMenu: onDataPointContextMenu
-            ? ({ point, nativeEvent }) => onDataPointContextMenu(point, nativeEvent)
-            : undefined,
-        dataPointsSelect: onDataPointsSelected
-            ? ({ points, nativeEvent }) => onDataPointsSelected(points, nativeEvent)
-            : undefined,
+function Trackable(target, propertyKey, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        track('sdkAngularServiceMethodExecuted', propertyKey);
+        return originalMethod.apply(this, args);
     };
+    return descriptor;
 }
-
-function translateToPreactDashboardProps(dashboardProps) {
-    return {
-        ...dashboardProps,
-        widgets: dashboardProps.widgets.map(translateToPreactWidgetProps),
+/** @internal */
+function TrackableService(trackableMethods) {
+    return function (ServiceClass) {
+        trackableMethods.forEach((methodName) => {
+            // eslint-disable-next-line security/detect-object-injection
+            const original = ServiceClass.prototype[methodName];
+            // eslint-disable-next-line security/detect-object-injection
+            ServiceClass.prototype[methodName] = function (...params) {
+                track('sdkAngularServiceMethodExecuted', `${ServiceClass.name}.${methodName}`);
+                return original.apply(this, params);
+            };
+        });
     };
 }
-function translateFromPreactDashboardProps(dashboardProps) {
-    return {
-        ...dashboardProps,
-        widgets: dashboardProps.widgets.map(translateFromPreactWidgetProps),
-    };
+async function track(action, methodName) {
+    try {
+        const app = await DecoratorsModule.sisenseContextService.getApp();
+        const trackingEnabled = app.settings?.trackingConfig?.enabled ?? true;
+        if (app?.httpClient) {
+            const payload = {
+                packageName: 'sdk-ui-angular',
+                packageVersion,
+                methodName,
+            };
+            void trackProductEvent(action, payload, app.httpClient, !trackingEnabled);
+        }
+    }
+    catch (e) {
+        console.warn('tracking error', e);
+    }
 }
 
 /**
- * Service for working with Sisense Fusion dashboards.
+ * Token used to inject {@link ThemeConfig} into your application
  *
- * **Note:** Dashboard and Widget extensions based on JS scripts and add-ons in Fusion – for example, Blox and Jump To Dashboard – are not supported.
+ * @example
  *
- * @group Fusion Assets
- * @fusionEmbed
+ * Example of injecting both {@link SisenseContextConfig} and {@link ThemeConfig} into your application:
+ *
+ * ```ts
+ * export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
+ *   url: "<instance url>", // replace with the URL of your Sisense instance
+ *   token: "<api token>", // replace with the API token of your user account
+ *   defaultDataSource: DM.DataSource,
+ * };
+ *
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     SdkUiModule,
+ *   ],
+ *   declarations: [AppComponent],
+ *   providers: [
+ *     { provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG },
+ *     {
+ *       provide: THEME_CONFIG_TOKEN,
+ *       useValue: {
+ *         // initial theme settings
+ *       } as ThemeConfig,
+ *     },
+ *   ],
+ *   bootstrap: [AppComponent],
+ * })
+ * ```
+ * @group Contexts
  */
-let DashboardService = class DashboardService {
-    constructor(sisenseContextService) {
+const THEME_CONFIG_TOKEN = new InjectionToken('theme configuration');
+/**
+ * Service for working with Sisense Fusion themes.
+ *
+ * If no theme service is used, the current Fusion theme is applied by default.
+ *
+ * @group Contexts
+ */
+let ThemeService = class ThemeService {
+    constructor(sisenseContextService, themeConfig) {
         this.sisenseContextService = sisenseContextService;
+        this.initializationPromise = Promise.resolve();
+        this.themeSettings$ = new BehaviorSubject(getDefaultThemeSettings());
+        this.initializationPromise = this.initThemeSettings(themeConfig?.theme);
+        this.sisenseContextService
+            .getApp$()
+            // Skip current app value
+            .pipe(skip(1))
+            // Subscribe to new app values
+            .subscribe({
+            next: ({ app }) => {
+                if (app) {
+                    this.initializationPromise = this.applyThemeSettings(app.settings.serverThemeSettings);
+                }
+            },
+        });
     }
-    /**
-     * Retrieves an existing dashboard model from the Sisense instance.
-     *
-     * @param dashboardOid - Identifier of the dashboard
-     * @param options - Advanced configuration options
-     * @returns Dashboard model
-     */
-    async getDashboardModel(dashboardOid, options) {
+    async initThemeSettings(theme) {
         const app = await this.sisenseContextService.getApp();
-        return getDashboardModel(app.httpClient, dashboardOid, options);
+        // apply system theme settings first
+        await this.applyThemeSettings(app.settings.serverThemeSettings);
+        if (theme) {
+            // Manually tracks theme update during initialization as execution of updateThemeSettings for consistency.
+            track('sdkAngularServiceMethodExecuted', 'ThemeService.updateThemeSettings');
+            await this.applyThemeSettings(theme);
+        }
     }
-    /**
-     * Retrieves existing dashboard models from the Sisense instance.
-     *
-     * @param options - Advanced configuration options
-     * @returns Dashboard models array
-     */
-    async getDashboardModels(options) {
-        const app = await this.sisenseContextService.getApp();
-        return getDashboardModels(app.httpClient, options);
-    }
-    /**
-     * Сomposes dashboard or separate dashboard elements into a coordinated dashboard
-     * with cross filtering, and change detection.
-     *
-     * @example
-     * An example of using the `createComposedDashboard` to construct a composed dashboard and render it:
-     * ```html
-      <!--Component HTML template in example.component.html-->
-      <div *ngIf="dashboard$ | async as dashboard">
-        <csdk-filter-tile
-          *ngFor="let filter of getDashboardFilters(dashboard); trackBy: trackByIndex"
-          [filter]="filter"
-        />
-        <csdk-widget
-          *ngFor="let widget of dashboard.widgets; trackBy: trackByIndex"
-          [id]="widget.id"
-          [widgetType]="widget.widgetType"
-          [chartType]="widget.chartType"
-          [customWidgetType]="widget.customWidgetType"
-          [dataSource]="widget.dataSource"
-          [dataOptions]="widget.dataOptions"
-          [filters]="widget.filters"
-          [highlights]="widget.highlights"
-          [styleOptions]="widget.styleOptions"
-          [drilldownOptions]="widget.drilldownOptions"
-          [title]="widget.title"
-          [description]="widget.description"
-          [beforeMenuOpen]="widget.beforeMenuOpen"
-          (dataPointClick)="widget.dataPointClick?.($event)"
-          (dataPointContextMenu)="widget.dataPointContextMenu?.($event)"
-          (dataPointsSelect)="widget.dataPointsSelect?.($event)"
-        />
-      </div>
-     * ```
-     *
-     * ```ts
-      // Component behavior in example.component.ts
-      import { Component } from '@angular/core';
-      import { BehaviorSubject } from 'rxjs';
-      import { DashboardService, type DashboardProps } from '@sisense/sdk-ui-angular';
-  
-      @Component({
-        selector: 'example',
-        templateUrl: './example.component.html',
-        styleUrls: ['./example.component.scss'],
-      })
-      export class ExampleComponent {
-        dashboard$: BehaviorSubject<DashboardProps> | undefined;
-  
-        constructor(private dashboardService: DashboardService) {}
-  
-        ngOnInit() {
-          const initialDashboard: DashboardProps = { ... };
-          const composedDashboard = this.dashboardService.createComposedDashboard(initialDashboard);
-          this.dashboard$ = composedDashboard.dashboard$;
+    async applyThemeSettings(theme) {
+        try {
+            const app = await this.sisenseContextService.getApp();
+            const isThemeOid = typeof theme === 'string';
+            let userThemeSettings = theme;
+            if (isThemeOid) {
+                userThemeSettings = await getThemeSettingsByOid(theme, app.httpClient);
+            }
+            const mergedThemeSettings = merge.withOptions({ mergeArrays: false }, this.themeSettings$.value, userThemeSettings);
+            this.themeSettings$.next(mergedThemeSettings);
+        }
+        catch (error) {
+            this.themeSettings$.error(error);
         }
-  
-        trackByIndex = (index: number) => index;
-  
-        getDashboardFilters = ({ filters }: DashboardProps) => Array.isArray(filters) ? filters : [];
-      }
-     * ```
-     * @param initialDashboard - Initial dashboard
-     * @param options - Configuration options
-     * @returns Reactive composed dashboard object and API methods for interacting with it
-     */
-    createComposedDashboard(initialDashboard, options = {}) {
-        const hookAdapter = new HookAdapter((useComposedDashboardInternal), [createSisenseContextConnector(this.sisenseContextService)]);
-        const dashboard$ = new BehaviorSubject(initialDashboard);
-        hookAdapter.subscribe(({ dashboard }) => {
-            dashboard$.next(translateFromPreactDashboardProps(dashboard));
-        });
-        hookAdapter.run(translateToPreactDashboardProps(initialDashboard), options);
-        const setFilters = createHookApiFacade(hookAdapter, 'setFilters', true);
-        const setWidgetsLayout = createHookApiFacade(hookAdapter, 'setWidgetsLayout', true);
-        return {
-            dashboard$,
-            setFilters,
-            setWidgetsLayout,
-        };
+    }
+    /** @internal */
+    getThemeSettings() {
+        return this.themeSettings$.asObservable();
+    }
+    async updateThemeSettings(theme) {
+        await this.initializationPromise;
+        await this.applyThemeSettings(theme);
     }
 };
-DashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, providedIn: 'root' });
-DashboardService = __decorate([
-    TrackableService(['getDashboardModel', 'getDashboardModels'])
-], DashboardService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, decorators: [{
+ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, deps: [{ token: SisenseContextService }, { token: THEME_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, providedIn: 'root' });
+ThemeService = __decorate([
+    TrackableService(['updateThemeSettings'])
+], ThemeService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THEME_CONFIG_TOKEN]
+                }] }]; } });
 
 /**
- * Service for working with filter.
+ * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
  *
- * @group Filters
+ * @example
+ * An example of using the `Chart` component to
+ * plot a column chart of the Sample Healthcare data source hosted in a Sisense instance:
+ *
+ * ```html
+ * <!--Component HTML template in .component.html-->
+ * <csdk-chart
+ *   [chartType]="chart.chartType"
+ *   [dataSet]="chart.dataSet"
+ *   [dataOptions]="chart.dataOptions"
+ *   [filters]="chart.filters"
+ *   [styleOptions]="chart.styleOptions"
+ * />
+ * ```
+ *
+ * ```ts
+ * // Component behavior in .component.ts
+ * chart = {
+ *   chartType: 'column' as ChartType,
+ *   dataSet: DM.DataSource,
+ *   dataOptions: {
+ *     category: [DM.Admissions.Admission_Time.Months],
+ *     value: [measureFactory.count(DM.Admissions.Patient_ID, 'Total Patients')],
+ *     breakBy: [],
+ *   },
+ *   filters: [filterFactory.members(DM.Doctors.Specialty, ['Oncology', 'Cardiology'])],
+ *   styleOptions: {
+ *     width: 800,
+ *     height: 500,
+ *     xAxis: {
+ *       title: {
+ *         text: 'Months',
+ *         enabled: true,
+ *       },
+ *     },
+ *     yAxis: {
+ *       title: {
+ *         text: 'Total Patients',
+ *         enabled: true,
+ *       },
+ *     },
+ *   },
+ * };
+ * ```
+ *
+ * <img src="media://angular-chart-example.png" width="800px" />
+ * @shortDescription Common component for rendering charts of different types including table
+ * @group Charts
  */
-let FilterService = class FilterService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
+class ChartComponent {
     /**
-     * Retrieves members of the provided filter.
-     *
-     * Those members can be used to display a list of members in a third-party filter component such as Material UI Select.
-     *
-     * ## Example
-     *
-     * Retrieve selected members from a Filter on Country of the Sample ECommerce data model.
+     * Constructor for the `Chart` component.
      *
-     * ```ts
-     * try {
-     *   const data = await filterService.getFilterMembers({
-     *     filter: filterFactory.members(DM.Country.Country, ['United States', 'Canada'])
-     *   });
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
+     */
+    constructor(
+    /**
+     * Sisense context service
      *
-     *   const { selectedMembers, allMembers, excludeMembers, enableMultiSelection } = data;
-     *   console.log('selectedMembers', selectedMembers);
-     * } catch (error) {
-     *   console.error('Error:', error);
-     * }
-     * ```
+     * @category Constructor
+     */
+    sisenseContextService, 
+    /**
+     * Theme service
      *
-     * @param params - Parameters for retrieving filter members
-     * @returns Promise that resolves to the filter members data
+     * @category Constructor
      */
-    async getFilterMembers(params) {
-        const hookAdapter = new HookAdapter(useGetFilterMembers, [
+    themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(Chart, [
             createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
         ]);
-        const resultPromise = new Promise((resolve, reject) => {
-            hookAdapter.subscribe((res) => {
-                const { isError, isSuccess, error } = res;
-                if (isError) {
-                    reject(error);
-                }
-                else if (isSuccess) {
-                    resolve(res.data);
-                }
-            });
-        });
-        hookAdapter.run(params);
-        return resultPromise.finally(() => {
-            hookAdapter.destroy();
-        });
-    }
-};
-FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, providedIn: 'root' });
-FilterService = __decorate([
-    TrackableService(['getFilterMembers'])
-], FilterService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
-
-/**
- * Service for working with Sisense Fusion hierarchies.
- *
- * @group Fusion Assets
- * @fusionEmbed
- */
-let HierarchyService = class HierarchyService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
-    /**
-     * Retrieves existing hierarchy models from the Sisense instance.
-     *
-     * @param params - Parameters to identify the target hierarchy models
-     * @returns Hierarchy models array
-     */
-    async getHierarchyModels(params) {
-        const app = await this.sisenseContextService.getApp();
-        return getHierarchyModels(app.httpClient, params, app.defaultDataSource);
-    }
-};
-HierarchyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-HierarchyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, providedIn: 'root' });
-HierarchyService = __decorate([
-    TrackableService(['getHierarchyModels'])
-], HierarchyService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
-
-/**
- * Service for executing data queries.
- *
- * @group Queries
- */
-let QueryService = class QueryService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
-    /**
-     * Executes a data query. If you want to display the query results, you can use
-     * them to populate Compose SDK UI elements or third party UI elements.
-     *
-     * To learn how to populate third party UI elements with query results, see the
-     * [External Charts Guide](/guides/sdk/guides/charts/guide-external-charts.html#query)
-     *
-     * @param params - Query parameters
-     * @return Query result
-     */
-    async executeQuery(params) {
-        const { dataSource, dimensions, measures, filters, highlights, count, offset, ungroup, beforeQuery, } = params;
-        const app = await this.sisenseContextService.getApp();
-        const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
-        const data = await executeQuery({
-            dataSource,
-            dimensions,
-            measures,
-            filters: filterList,
-            filterRelations,
-            highlights,
-            count,
-            offset,
-            ungroup,
-        }, app, { onBeforeQuery: beforeQuery });
-        return { data };
     }
     /**
-     * Executes a data query extracted from an existing widget in the Sisense instance.
-     *
-     * @param params - Parameters to identify the target widget
-     * @returns Query result
+     * @internal
      */
-    async executeQueryByWidgetId(params) {
-        const app = await this.sisenseContextService.getApp();
-        return executeQueryByWidgetId({
-            ...params,
-            app,
-            onBeforeQuery: params.beforeQuery,
-        });
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
     }
     /**
-     * Executes a data query for a pivot table.
-     *
-     * @param params - Pivot query parameters
-     * @return Pivot query result
+     * @internal
      */
-    async executePivotQuery(params) {
-        const { dataSource, rows, columns, values, grandTotals, filters, highlights, count, offset, beforeQuery, } = params;
-        const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
-        const app = await this.sisenseContextService.getApp();
-        const data = await executePivotQuery({
-            dataSource,
-            rows,
-            columns,
-            values,
-            grandTotals,
-            filters: filterList,
-            filterRelations,
-            highlights,
-            count,
-            offset,
-        }, app, { onBeforeQuery: beforeQuery });
-        return { data };
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+        }
     }
-    /**
-     * Executes a CSV data query.
-     * Similar to {@link QueryService.executeQuery}, but returns the data in CSV format as text or as a stream.
-     *
-     * @param params - CSV query parameters
-     * @return CSV query result
-     */
-    async executeCsvQuery(params) {
-        const hookAdapter = new HookAdapter(useExecuteCsvQueryInternal, [
-            createSisenseContextConnector(this.sisenseContextService),
-        ]);
-        const resultPromise = new Promise((resolve, reject) => {
-            hookAdapter.subscribe((res) => {
-                const { data, isSuccess, isError, error } = res;
-                if (isSuccess) {
-                    resolve({ data });
-                }
-                else if (isError) {
-                    reject(error);
-                }
-            });
-        });
-        hookAdapter.run(params);
-        return resultPromise.finally(() => {
-            hookAdapter.destroy();
-        });
+    getPreactComponentProps() {
+        return {
+            chartType: this.chartType,
+            dataSet: this.dataSet,
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            highlights: this.highlights,
+            styleOptions: this.styleOptions,
+            onBeforeRender: this.beforeRender?.bind(this),
+            onDataReady: this.dataReady?.bind(this),
+            onDataPointClick: (...[point, nativeEvent]) => this.dataPointClick.emit({ point, nativeEvent }),
+            onDataPointContextMenu: (...[point, nativeEvent]) => this.dataPointContextMenu.emit({ point, nativeEvent }),
+            onDataPointsSelected: (...[points, nativeEvent]) => this.dataPointsSelect.emit({ points, nativeEvent }),
+        };
     }
     /**
-     * Executes a data query from custom widget component props.
-     *
-     * This method takes custom widget props (dataSource, dataOptions, filters, etc.)
-     * and executes the appropriate data query
-     *
-     * @param params - Custom widget component props containing data source, data options, filters, etc.
-     * @returns Promise resolving to query result with formatted data
+     * @internal
      */
-    async executeCustomWidgetQuery(params) {
-        const hookAdapter = new HookAdapter(useExecuteCustomWidgetQueryInternal, [
-            createSisenseContextConnector(this.sisenseContextService),
-        ]);
-        const resultPromise = new Promise((resolve, reject) => {
-            hookAdapter.subscribe((res) => {
-                const { data, isSuccess, isError, error } = res;
-                if (isSuccess) {
-                    resolve({ data });
-                }
-                else if (isError) {
-                    reject(error);
-                }
-            });
-        });
-        hookAdapter.run(params);
-        return resultPromise.finally(() => {
-            hookAdapter.destroy();
-        });
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
     }
-};
-QueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-QueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, providedIn: 'root' });
-QueryService = __decorate([
-    TrackableService([
-        'executeQuery',
-        'executeQueryByWidgetId',
-        'executePivotQuery',
-        'executeCustomWidgetQuery',
-    ])
-], QueryService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+}
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, selector: "csdk-chart", inputs: { chartType: "chartType", dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, 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: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'csdk-chart', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], chartType: [{
+                type: Input
+            }], dataSet: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], beforeRender: [{
+                type: Input
+            }], dataReady: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
+            }] } });
 
 /**
- * Service for working with Sisense Fusion widgets.
+ * A component similar to a {@link LineChartComponent},
+ * but with filled in areas under each line and an option to display them as stacked.
  *
- * @group Fusion Assets
- * @fusionEmbed
- */
-let WidgetService = class WidgetService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
-    /**
-     * Retrieves an existing widget model from the Sisense instance.
-     *
-     * @param params - Parameters to identify the target widget
-     * @returns Widget model
-     */
-    async getWidgetModel(params) {
-        const { dashboardOid, widgetOid } = params;
-        const app = await this.sisenseContextService.getApp();
-        return getWidgetModel(app.httpClient, dashboardOid, widgetOid);
-    }
-};
-WidgetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, deps: [{ token: SisenseContextService }], 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'])
-], 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 }]; } });
+ * @example
+ * ```html
+ *    <csdk-area-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory, Filter } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
 
-class DecoratorsModule {
-    constructor(sisenseContextService) {
-        DecoratorsModule.sisenseContextService = sisenseContextService;
-    }
-}
-DecoratorsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.NgModule });
-DecoratorsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
-DecoratorsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    exports: [],
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
 
-function Trackable(target, propertyKey, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        track('sdkAngularServiceMethodExecuted', propertyKey);
-        return originalMethod.apply(this, args);
-    };
-    return descriptor;
-}
-/** @internal */
-function TrackableService(trackableMethods) {
-    return function (ServiceClass) {
-        trackableMethods.forEach((methodName) => {
-            // eslint-disable-next-line security/detect-object-injection
-            const original = ServiceClass.prototype[methodName];
-            // eslint-disable-next-line security/detect-object-injection
-            ServiceClass.prototype[methodName] = function (...params) {
-                track('sdkAngularServiceMethodExecuted', `${ServiceClass.name}.${methodName}`);
-                return original.apply(this, params);
-            };
-        });
-    };
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
 }
-async function track(action, methodName) {
-    try {
-        const app = await DecoratorsModule.sisenseContextService.getApp();
-        const trackingEnabled = app.settings?.trackingConfig?.enabled ?? true;
-        if (app?.httpClient) {
-            const payload = {
-                packageName: 'sdk-ui-angular',
-                packageVersion,
-                methodName,
-            };
-            void trackProductEvent(action, payload, app.httpClient, !trackingEnabled);
-        }
-    }
-    catch (e) {
-        console.warn('tracking error', e);
+ * ```
+ * <img src="media://angular-area-chart-example.png" width="800px" />
+ * @group Charts
+ */
+class AreaChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        /** @internal */
+        this.chartType = 'area';
     }
 }
+AreaChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreaChartComponent, selector: "csdk-area-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, ngImport: i0, template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.emit($any($event))"
+      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
+      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender", "dataReady"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-area-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.emit($any($event))"
+      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
+      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
+    />
+  `,
+                }]
+        }], propDecorators: { dataSet: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], beforeRender: [{
+                type: Input
+            }], dataReady: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
+            }] } });
 
 /**
- * Token used to inject {@link ThemeConfig} into your application
+ * A component that displays a range of data over a given time period or across multiple categories.
+ * It is particularly useful for visualizing the minimum and maximum values in a dataset, along with
+ * the area between these values.
  *
  * @example
- *
- * Example of injecting both {@link SisenseContextConfig} and {@link ThemeConfig} into your application:
- *
- * ```ts
- * export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
- *   url: "<instance url>", // replace with the URL of your Sisense instance
- *   token: "<api token>", // replace with the API token of your user account
- *   defaultDataSource: DM.DataSource,
- * };
- *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     SdkUiModule,
- *   ],
- *   declarations: [AppComponent],
- *   providers: [
- *     { provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG },
- *     {
- *       provide: THEME_CONFIG_TOKEN,
- *       useValue: {
- *         // initial theme settings
- *       } as ThemeConfig,
- *     },
- *   ],
- *   bootstrap: [AppComponent],
- * })
- * ```
- * @group Contexts
- */
-const THEME_CONFIG_TOKEN = new InjectionToken('theme configuration');
-/**
- * Service for working with Sisense Fusion themes.
- *
- * If no theme service is used, the current Fusion theme is applied by default.
- *
- * @group Contexts
- */
-let ThemeService = class ThemeService {
-    constructor(sisenseContextService, themeConfig) {
-        this.sisenseContextService = sisenseContextService;
-        this.initializationPromise = Promise.resolve();
-        this.themeSettings$ = new BehaviorSubject(getDefaultThemeSettings());
-        this.initializationPromise = this.initThemeSettings(themeConfig?.theme);
-        this.sisenseContextService
-            .getApp$()
-            // Skip current app value
-            .pipe(skip(1))
-            // Subscribe to new app values
-            .subscribe({
-            next: ({ app }) => {
-                if (app) {
-                    this.initializationPromise = this.applyThemeSettings(app.settings.serverThemeSettings);
-                }
-            },
-        });
-    }
-    async initThemeSettings(theme) {
-        const app = await this.sisenseContextService.getApp();
-        // apply system theme settings first
-        await this.applyThemeSettings(app.settings.serverThemeSettings);
-        if (theme) {
-            // Manually tracks theme update during initialization as execution of updateThemeSettings for consistency.
-            track('sdkAngularServiceMethodExecuted', 'ThemeService.updateThemeSettings');
-            await this.applyThemeSettings(theme);
-        }
-    }
-    async applyThemeSettings(theme) {
-        try {
-            const app = await this.sisenseContextService.getApp();
-            const isThemeOid = typeof theme === 'string';
-            let userThemeSettings = theme;
-            if (isThemeOid) {
-                userThemeSettings = await getThemeSettingsByOid(theme, app.httpClient);
-            }
-            const mergedThemeSettings = merge.withOptions({ mergeArrays: false }, this.themeSettings$.value, userThemeSettings);
-            this.themeSettings$.next(mergedThemeSettings);
-        }
-        catch (error) {
-            this.themeSettings$.error(error);
-        }
-    }
-    /** @internal */
-    getThemeSettings() {
-        return this.themeSettings$.asObservable();
-    }
-    async updateThemeSettings(theme) {
-        await this.initializationPromise;
-        await this.applyThemeSettings(theme);
-    }
-};
-ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, deps: [{ token: SisenseContextService }, { token: THEME_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, providedIn: 'root' });
-ThemeService = __decorate([
-    TrackableService(['updateThemeSettings'])
-], ThemeService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THEME_CONFIG_TOKEN]
-                }] }]; } });
-
-/**
- * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
- *
- * @example
- * An example of using the `Chart` component to
- * plot a column chart of the Sample Healthcare data source hosted in a Sisense instance:
- *
- * ```html
- * <!--Component HTML template in .component.html-->
- * <csdk-chart
- *   [chartType]="chart.chartType"
- *   [dataSet]="chart.dataSet"
- *   [dataOptions]="chart.dataOptions"
- *   [filters]="chart.filters"
- *   [styleOptions]="chart.styleOptions"
- * />
- * ```
- *
- * ```ts
- * // Component behavior in .component.ts
- * chart = {
- *   chartType: 'column' as ChartType,
- *   dataSet: DM.DataSource,
- *   dataOptions: {
- *     category: [DM.Admissions.Admission_Time.Months],
- *     value: [measureFactory.count(DM.Admissions.Patient_ID, 'Total Patients')],
- *     breakBy: [],
- *   },
- *   filters: [filterFactory.members(DM.Doctors.Specialty, ['Oncology', 'Cardiology'])],
- *   styleOptions: {
- *     width: 800,
- *     height: 500,
- *     xAxis: {
- *       title: {
- *         text: 'Months',
- *         enabled: true,
- *       },
- *     },
- *     yAxis: {
- *       title: {
- *         text: 'Total Patients',
- *         enabled: true,
- *       },
- *     },
- *   },
- * };
- * ```
- *
- * <img src="media://angular-chart-example.png" width="800px" />
- * @shortDescription Common component for rendering charts of different types including table
- * @group Charts
- */
-class ChartComponent {
-    /**
-     * Constructor for the `Chart` component.
-     *
-     * @param sisenseContextService - Sisense context service
-     * @param themeService - Theme service
-     */
-    constructor(
-    /**
-     * Sisense context service
-     *
-     * @category Constructor
-     */
-    sisenseContextService, 
-    /**
-     * Theme service
-     *
-     * @category Constructor
-     */
-    themeService) {
-        this.sisenseContextService = sisenseContextService;
-        this.themeService = themeService;
-        /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
-        this.componentAdapter = new ComponentAdapter(Chart, [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    /**
-     * @internal
-     */
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
-    }
-    /**
-     * @internal
-     */
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
-        }
-    }
-    getPreactComponentProps() {
-        return {
-            chartType: this.chartType,
-            dataSet: this.dataSet,
-            dataOptions: this.dataOptions,
-            filters: this.filters,
-            highlights: this.highlights,
-            styleOptions: this.styleOptions,
-            onBeforeRender: this.beforeRender?.bind(this),
-            onDataReady: this.dataReady?.bind(this),
-            onDataPointClick: (...[point, nativeEvent]) => this.dataPointClick.emit({ point, nativeEvent }),
-            onDataPointContextMenu: (...[point, nativeEvent]) => this.dataPointContextMenu.emit({ point, nativeEvent }),
-            onDataPointsSelected: (...[points, nativeEvent]) => this.dataPointsSelect.emit({ points, nativeEvent }),
-        };
-    }
-    /**
-     * @internal
-     */
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
-    }
-}
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, selector: "csdk-chart", inputs: { chartType: "chartType", dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, 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: ChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'csdk-chart', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], chartType: [{
-                type: Input
-            }], dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], dataReady: [{
-                type: Input
-            }], dataPointClick: [{
-                type: Output
-            }], dataPointContextMenu: [{
-                type: Output
-            }], dataPointsSelect: [{
-                type: Output
-            }] } });
-
-/**
- * A component similar to a {@link LineChartComponent},
- * but with filled in areas under each line and an option to display them as stacked.
- *
- * @example
- * ```html
- *    <csdk-area-chart
- *      [dataSet]="chart.dataSet"
- *      [dataOptions]="chart.dataOptions"
- *      [highlights]="filters"
- *      [beforeRender]="onBeforeRender"
- *      (dataPointClick)="logArguments($event)"
- *      (dataPointContextMenu)="logArguments($event)"
- *      (dataPointsSelect)="logArguments($event)"
- *    />
+ * ```html
+ *    <csdk-area-range-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
  * ```
  * ```ts
 import { Component } from '@angular/core';
 import { measureFactory, filterFactory, Filter } from '@sisense/sdk-data';
 import * as DM from '../../assets/sample-healthcare-model';
-import type { ChartType } from '@sisense/sdk-ui-angular';
+import type { ChartType, RangeChartDataOptions } from '@sisense/sdk-ui-angular';
 
 @Component({
   selector: 'app-analytics',
@@ -1204,162 +788,25 @@ export class AnalyticsComponent {
   DM = DM;
   filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
   chart = {
-    chartType: 'column' as ChartType,
+    chartType: 'arearange' as ChartType,
     dataSet: DM.DataSource,
     dataOptions: {
-      category: [DM.Divisions.Divison_name],
-      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      category: [DM.Admissions.Admission_Time.Years],
+      value: [
+        {
+            title: 'Admission Cost Range',
+            upperBound: measureFactory.multiply(
+              measureFactory.sum(DM.Admissions.Cost_of_admission, 'Lower Admission'),
+              0.6,
+            ),
+            lowerBound: measureFactory.multiply(
+              measureFactory.sum(DM.Admissions.Cost_of_admission, 'Upper Admission'),
+              1.4,
+             ),
+        }
+      ],
       breakBy: [],
-    },
-  };
-
-  onBeforeRender(options: any) {
-    console.log('beforeRender');
-    console.log(options);
-    return options;
-  }
-
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
-}
- * ```
- * <img src="media://angular-area-chart-example.png" width="800px" />
- * @group Charts
- */
-class AreaChartComponent {
-    constructor() {
-        /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
-        /** @internal */
-        this.chartType = 'area';
-    }
-}
-AreaChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreaChartComponent, selector: "csdk-area-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, ngImport: i0, template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-      (dataPointClick)="dataPointClick.emit($any($event))"
-      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
-      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender", "dataReady"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaChartComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'csdk-area-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-      (dataPointClick)="dataPointClick.emit($any($event))"
-      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
-      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
-    />
-  `,
-                }]
-        }], propDecorators: { dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], dataReady: [{
-                type: Input
-            }], dataPointClick: [{
-                type: Output
-            }], dataPointContextMenu: [{
-                type: Output
-            }], dataPointsSelect: [{
-                type: Output
-            }] } });
-
-/**
- * A component that displays a range of data over a given time period or across multiple categories.
- * It is particularly useful for visualizing the minimum and maximum values in a dataset, along with
- * the area between these values.
- *
- * @example
- * ```html
- *    <csdk-area-range-chart
- *      [dataSet]="chart.dataSet"
- *      [dataOptions]="chart.dataOptions"
- *      [highlights]="filters"
- *      [beforeRender]="onBeforeRender"
- *      (dataPointClick)="logArguments($event)"
- *      (dataPointContextMenu)="logArguments($event)"
- *      (dataPointsSelect)="logArguments($event)"
- *    />
- * ```
- * ```ts
-import { Component } from '@angular/core';
-import { measureFactory, filterFactory, Filter } from '@sisense/sdk-data';
-import * as DM from '../../assets/sample-healthcare-model';
-import type { ChartType, RangeChartDataOptions } from '@sisense/sdk-ui-angular';
-
-@Component({
-  selector: 'app-analytics',
-  templateUrl: './analytics.component.html',
-  styleUrls: ['./analytics.component.scss'],
-})
-export class AnalyticsComponent {
-  DM = DM;
-  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
-  chart = {
-    chartType: 'arearange' as ChartType,
-    dataSet: DM.DataSource,
-    dataOptions: {
-      category: [DM.Admissions.Admission_Time.Years],
-      value: [
-        {
-            title: 'Admission Cost Range',
-            upperBound: measureFactory.multiply(
-              measureFactory.sum(DM.Admissions.Cost_of_admission, 'Lower Admission'),
-              0.6,
-            ),
-            lowerBound: measureFactory.multiply(
-              measureFactory.sum(DM.Admissions.Cost_of_admission, 'Upper Admission'),
-              1.4,
-             ),
-        }
-      ],
-      breakBy: [],
-    } as RangeChartDataOptions,
+    } as RangeChartDataOptions,
   };
 
   onBeforeRender(options: any) {
@@ -2471,140 +1918,844 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * A component representing data in a circular graph with the data shown as slices of a whole,
- * with each slice representing a proportion of the total.
+ * A component representing data in a circular graph with the data shown as slices of a whole,
+ * with each slice representing a proportion of the total.
+ *
+ * @example
+ * ```html
+ *    <csdk-pie-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-pie-chart-example.png" width="800px" />
+ * @group Charts
+ */
+class PieChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        /** @internal */
+        this.chartType = 'pie';
+    }
+}
+PieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieChartComponent, selector: "csdk-pie-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, ngImport: i0, template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.emit($any($event))"
+      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
+      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender", "dataReady"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-pie-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.emit($any($event))"
+      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
+      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
+    />
+  `,
+                }]
+        }], propDecorators: { dataSet: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], beforeRender: [{
+                type: Input
+            }], dataReady: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
+            }] } });
+
+/**
+ * Service for rendering components dynamically.
+ *
+ * @internal
+ */
+class DynamicRenderer {
+    constructor(appRef, injector, envInjector) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.envInjector = envInjector;
+    }
+    renderComponent(component, props) {
+        const componentRef = createComponent(component, {
+            environmentInjector: this.envInjector,
+            elementInjector: this.injector,
+        });
+        // Apply props to the component instance
+        Object.assign(componentRef.instance, props);
+        // Attach the component to the application
+        this.appRef.attachView(componentRef.hostView);
+        // Get the DOM element
+        const domElem = componentRef.hostView.rootNodes[0];
+        // Create destroy function
+        const destroy = () => {
+            // Detach from application
+            this.appRef.detachView(componentRef.hostView);
+            // Destroy the component
+            componentRef.destroy();
+        };
+        return {
+            element: domElem,
+            componentRef,
+            destroy,
+        };
+    }
+}
+DynamicRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicRenderer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }]; } });
+
+/**
+ * Service for working with custom widgets.
+ *
+ * @group Dashboards
+ */
+class CustomWidgetsService {
+    constructor(
+    /** @internal */
+    dynamicRenderer) {
+        this.dynamicRenderer = dynamicRenderer;
+        this.customWidgetsMap$ = new BehaviorSubject(new Map([['tabber-buttons', TabberButtonsWidget]]));
+    }
+    /**
+     * Registers a new custom widget.
+     *
+     * @param customWidgetType - The unique identifier for the custom widget type.
+     * @param customWidget - The custom widget component class to register.
+     */
+    registerCustomWidget(customWidgetType, customWidget) {
+        const customWidgetPreactComponent = (props) => {
+            const renderedComponent = this.dynamicRenderer.renderComponent(customWidget, props);
+            return createWrapperElement(renderedComponent.element, () => renderedComponent.destroy());
+        };
+        const customWidgetsMap = this.customWidgetsMap$.value;
+        if (!customWidgetsMap.has(customWidgetType)) {
+            customWidgetsMap.set(customWidgetType, customWidgetPreactComponent);
+            this.customWidgetsMap$.next(customWidgetsMap);
+        }
+    }
+    /**
+     * Checks if a custom widget is registered.
+     *
+     * @param customWidgetType - The type of the custom widget.
+     * @returns True if the custom widget is registered, false otherwise.
+     */
+    hasCustomWidget(customWidgetType) {
+        return this.customWidgetsMap$.value.has(customWidgetType);
+    }
+}
+CustomWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, deps: [{ token: DynamicRenderer }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: DynamicRenderer }]; } });
+
+function translateToPreactWidgetProps(widgetProps) {
+    const { beforeRender, dataReady, beforeMenuOpen, dataPointClick, dataPointContextMenu, dataPointsSelect, ...commonWidgetProps } = widgetProps;
+    return {
+        ...commonWidgetProps,
+        onBeforeRender: beforeRender,
+        onDataReady: dataReady,
+        onBeforeMenuOpen: beforeMenuOpen,
+        onDataPointClick: dataPointClick
+            ? (...[point, nativeEvent]) => dataPointClick({
+                point,
+                nativeEvent,
+            })
+            : undefined,
+        onDataPointContextMenu: dataPointContextMenu
+            ? (...[point, nativeEvent]) => dataPointContextMenu({
+                point,
+                nativeEvent,
+            })
+            : undefined,
+        onDataPointsSelected: dataPointsSelect
+            ? (...[points, nativeEvent]) => dataPointsSelect({ points, nativeEvent })
+            : undefined,
+    };
+}
+function translateFromPreactWidgetProps(widgetProps) {
+    const { onBeforeRender, onDataReady, onBeforeMenuOpen, onDataPointClick, onDataPointContextMenu, onDataPointsSelected, ...commonWidgetProps } = widgetProps;
+    return {
+        ...commonWidgetProps,
+        beforeRender: onBeforeRender,
+        dataReady: onDataReady,
+        beforeMenuOpen: onBeforeMenuOpen,
+        dataPointClick: onDataPointClick
+            ? ({ point, nativeEvent }) => onDataPointClick(point, nativeEvent)
+            : undefined,
+        dataPointContextMenu: onDataPointContextMenu
+            ? ({ point, nativeEvent }) => onDataPointContextMenu(point, nativeEvent)
+            : undefined,
+        dataPointsSelect: onDataPointsSelected
+            ? ({ points, nativeEvent }) => onDataPointsSelected(points, nativeEvent)
+            : undefined,
+    };
+}
+
+function translateToPreactDashboardProps(dashboardProps) {
+    return {
+        ...dashboardProps,
+        widgets: dashboardProps.widgets.map(translateToPreactWidgetProps),
+    };
+}
+function translateFromPreactDashboardProps(dashboardProps) {
+    return {
+        ...dashboardProps,
+        widgets: dashboardProps.widgets.map(translateFromPreactWidgetProps),
+    };
+}
+
+/**
+ * Service for working with Sisense Fusion dashboards.
+ *
+ * **Note:** Dashboard and Widget extensions based on JS scripts and add-ons in Fusion – for example, Blox and Jump To Dashboard – are not supported.
+ *
+ * @group Fusion Assets
+ * @fusionEmbed
+ */
+let DashboardService = class DashboardService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Retrieves an existing dashboard model from the Sisense instance.
+     *
+     * @param dashboardOid - Identifier of the dashboard
+     * @param options - Advanced configuration options
+     * @returns Dashboard model
+     */
+    async getDashboardModel(dashboardOid, options) {
+        const app = await this.sisenseContextService.getApp();
+        return getDashboardModel(app.httpClient, dashboardOid, options);
+    }
+    /**
+     * Retrieves existing dashboard models from the Sisense instance.
+     *
+     * @param options - Advanced configuration options
+     * @returns Dashboard models array
+     */
+    async getDashboardModels(options) {
+        const app = await this.sisenseContextService.getApp();
+        return getDashboardModels(app.httpClient, options);
+    }
+    /**
+     * Сomposes dashboard or separate dashboard elements into a coordinated dashboard
+     * with cross filtering, and change detection.
+     *
+     * @example
+     * An example of using the `createComposedDashboard` to construct a composed dashboard and render it:
+     * ```html
+      <!--Component HTML template in example.component.html-->
+      <div *ngIf="dashboard$ | async as dashboard">
+        <csdk-filter-tile
+          *ngFor="let filter of getDashboardFilters(dashboard); trackBy: trackByIndex"
+          [filter]="filter"
+        />
+        <csdk-widget
+          *ngFor="let widget of dashboard.widgets; trackBy: trackByIndex"
+          [id]="widget.id"
+          [widgetType]="widget.widgetType"
+          [chartType]="widget.chartType"
+          [customWidgetType]="widget.customWidgetType"
+          [dataSource]="widget.dataSource"
+          [dataOptions]="widget.dataOptions"
+          [filters]="widget.filters"
+          [highlights]="widget.highlights"
+          [styleOptions]="widget.styleOptions"
+          [drilldownOptions]="widget.drilldownOptions"
+          [title]="widget.title"
+          [description]="widget.description"
+          [beforeMenuOpen]="widget.beforeMenuOpen"
+          (dataPointClick)="widget.dataPointClick?.($event)"
+          (dataPointContextMenu)="widget.dataPointContextMenu?.($event)"
+          (dataPointsSelect)="widget.dataPointsSelect?.($event)"
+        />
+      </div>
+     * ```
+     *
+     * ```ts
+      // Component behavior in example.component.ts
+      import { Component, OnDestroy } from '@angular/core';
+      import { BehaviorSubject } from 'rxjs';
+      import { DashboardService, type DashboardProps } from '@sisense/sdk-ui-angular';
+  
+      @Component({
+        selector: 'example',
+        templateUrl: './example.component.html',
+        styleUrls: ['./example.component.scss'],
+      })
+      export class ExampleComponent implements OnDestroy {
+        dashboard$: BehaviorSubject<DashboardProps> | undefined;
+        private composedDashboard: ReturnType<DashboardService['createComposedDashboard']> | undefined;
+  
+        constructor(private dashboardService: DashboardService) {}
+  
+        ngOnInit() {
+          const initialDashboard: DashboardProps = { ... };
+          this.composedDashboard = this.dashboardService.createComposedDashboard(initialDashboard);
+          this.dashboard$ = this.composedDashboard.dashboard$;
+        }
+  
+        ngOnDestroy() {
+          this.composedDashboard?.destroy();
+        }
+  
+        trackByIndex = (index: number) => index;
+  
+        getDashboardFilters = ({ filters }: DashboardProps) => Array.isArray(filters) ? filters : [];
+      }
+     * ```
+     * @param initialDashboard - Initial dashboard
+     * @param options - Configuration options
+     * @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)]);
+        const dashboard$ = new BehaviorSubject(initialDashboard);
+        hookAdapter.subscribe(({ dashboard }) => {
+            dashboard$.next(translateFromPreactDashboardProps(dashboard));
+        });
+        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,
+        };
+    }
+};
+DashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, providedIn: 'root' });
+DashboardService = __decorate([
+    TrackableService(['getDashboardModel', 'getDashboardModels'])
+], DashboardService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+/**
+ * Service for working with filter.
+ *
+ * @group Filters
+ */
+let FilterService = class FilterService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Retrieves members of the provided filter.
+     *
+     * Those members can be used to display a list of members in a third-party filter component such as Material UI Select.
+     *
+     * ## Example
+     *
+     * Retrieve selected members from a Filter on Country of the Sample ECommerce data model.
+     *
+     * ```ts
+     * try {
+     *   const data = await filterService.getFilterMembers({
+     *     filter: filterFactory.members(DM.Country.Country, ['United States', 'Canada'])
+     *   });
+     *
+     *   const { selectedMembers, allMembers, excludeMembers, enableMultiSelection } = data;
+     *   console.log('selectedMembers', selectedMembers);
+     * } catch (error) {
+     *   console.error('Error:', error);
+     * }
+     * ```
+     *
+     * @param params - Parameters for retrieving filter members
+     * @returns Promise that resolves to the filter members data
+     */
+    async getFilterMembers(params) {
+        const hookAdapter = new HookAdapter(useGetFilterMembers, [
+            createSisenseContextConnector(this.sisenseContextService),
+        ]);
+        const resultPromise = new Promise((resolve, reject) => {
+            hookAdapter.subscribe((res) => {
+                const { isError, isSuccess, error } = res;
+                if (isError) {
+                    reject(error);
+                }
+                else if (isSuccess) {
+                    resolve(res.data);
+                }
+            });
+        });
+        hookAdapter.run(params);
+        return resultPromise.finally(() => {
+            hookAdapter.destroy();
+        });
+    }
+};
+FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, providedIn: 'root' });
+FilterService = __decorate([
+    TrackableService(['getFilterMembers'])
+], FilterService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+/**
+ * Service for working with Sisense Fusion hierarchies.
+ *
+ * @group Fusion Assets
+ * @fusionEmbed
+ */
+let HierarchyService = class HierarchyService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Retrieves existing hierarchy models from the Sisense instance.
+     *
+     * @param params - Parameters to identify the target hierarchy models
+     * @returns Hierarchy models array
+     */
+    async getHierarchyModels(params) {
+        const app = await this.sisenseContextService.getApp();
+        return getHierarchyModels(app.httpClient, params, app.defaultDataSource);
+    }
+};
+HierarchyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+HierarchyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, providedIn: 'root' });
+HierarchyService = __decorate([
+    TrackableService(['getHierarchyModels'])
+], HierarchyService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+/**
+ * Service for executing data queries.
+ *
+ * @group Queries
+ */
+let QueryService = class QueryService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Executes a data query. If you want to display the query results, you can use
+     * them to populate Compose SDK UI elements or third party UI elements.
+     *
+     * To learn how to populate third party UI elements with query results, see the
+     * [External Charts Guide](/guides/sdk/guides/charts/guide-external-charts.html#query)
+     *
+     * @param params - Query parameters
+     * @return Query result
+     */
+    async executeQuery(params) {
+        const { dataSource, dimensions, measures, filters, highlights, count, offset, ungroup, beforeQuery, } = params;
+        const app = await this.sisenseContextService.getApp();
+        const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
+        const data = await executeQuery({
+            dataSource,
+            dimensions,
+            measures,
+            filters: filterList,
+            filterRelations,
+            highlights,
+            count,
+            offset,
+            ungroup,
+        }, app, { onBeforeQuery: beforeQuery });
+        return { data };
+    }
+    /**
+     * Executes a data query extracted from an existing widget in the Sisense instance.
+     *
+     * @param params - Parameters to identify the target widget
+     * @returns Query result
+     */
+    async executeQueryByWidgetId(params) {
+        const app = await this.sisenseContextService.getApp();
+        return executeQueryByWidgetId({
+            ...params,
+            app,
+            onBeforeQuery: params.beforeQuery,
+        });
+    }
+    /**
+     * Executes a data query for a pivot table.
+     *
+     * @param params - Pivot query parameters
+     * @return Pivot query result
+     */
+    async executePivotQuery(params) {
+        const { dataSource, rows, columns, values, grandTotals, filters, highlights, count, offset, beforeQuery, } = params;
+        const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
+        const app = await this.sisenseContextService.getApp();
+        const data = await executePivotQuery({
+            dataSource,
+            rows,
+            columns,
+            values,
+            grandTotals,
+            filters: filterList,
+            filterRelations,
+            highlights,
+            count,
+            offset,
+        }, app, { onBeforeQuery: beforeQuery });
+        return { data };
+    }
+    /**
+     * Executes a CSV data query.
+     * Similar to {@link QueryService.executeQuery}, but returns the data in CSV format as text or as a stream.
+     *
+     * @param params - CSV query parameters
+     * @return CSV query result
+     */
+    async executeCsvQuery(params) {
+        const hookAdapter = new HookAdapter(useExecuteCsvQueryInternal, [
+            createSisenseContextConnector(this.sisenseContextService),
+        ]);
+        const resultPromise = new Promise((resolve, reject) => {
+            hookAdapter.subscribe((res) => {
+                const { data, isSuccess, isError, error } = res;
+                if (isSuccess) {
+                    resolve({ data });
+                }
+                else if (isError) {
+                    reject(error);
+                }
+            });
+        });
+        hookAdapter.run(params);
+        return resultPromise.finally(() => {
+            hookAdapter.destroy();
+        });
+    }
+    /**
+     * Executes a data query from custom widget component props.
+     *
+     * This method takes custom widget props (dataSource, dataOptions, filters, etc.)
+     * and executes the appropriate data query
+     *
+     * @param params - Custom widget component props containing data source, data options, filters, etc.
+     * @returns Promise resolving to query result with formatted data
+     */
+    async executeCustomWidgetQuery(params) {
+        const hookAdapter = new HookAdapter(useExecuteCustomWidgetQueryInternal, [
+            createSisenseContextConnector(this.sisenseContextService),
+        ]);
+        const resultPromise = new Promise((resolve, reject) => {
+            hookAdapter.subscribe((res) => {
+                const { data, isSuccess, isError, error } = res;
+                if (isSuccess) {
+                    resolve({ data });
+                }
+                else if (isError) {
+                    reject(error);
+                }
+            });
+        });
+        hookAdapter.run(params);
+        return resultPromise.finally(() => {
+            hookAdapter.destroy();
+        });
+    }
+};
+QueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+QueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, providedIn: 'root' });
+QueryService = __decorate([
+    TrackableService([
+        'executeQuery',
+        'executeQueryByWidgetId',
+        'executePivotQuery',
+        'executeCustomWidgetQuery',
+    ])
+], QueryService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+/**
+ * Service for working with Sisense Fusion widgets.
  *
- * @example
- * ```html
- *    <csdk-pie-chart
- *      [dataSet]="chart.dataSet"
- *      [dataOptions]="chart.dataOptions"
- *      [highlights]="filters"
- *      [beforeRender]="onBeforeRender"
- *      (dataPointClick)="logArguments($event)"
- *      (dataPointContextMenu)="logArguments($event)"
- *      (dataPointsSelect)="logArguments($event)"
- *    />
- * ```
- * ```ts
-import { Component } from '@angular/core';
-import { measureFactory, filterFactory } from '@sisense/sdk-data';
-import * as DM from '../../assets/sample-healthcare-model';
-import type { ChartType } from '@sisense/sdk-ui-angular';
-
-@Component({
-  selector: 'app-analytics',
-  templateUrl: './analytics.component.html',
-  styleUrls: ['./analytics.component.scss'],
-})
-export class AnalyticsComponent {
-  DM = DM;
-  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
-  chart = {
-    chartType: 'column' as ChartType,
-    dataSet: DM.DataSource,
-    dataOptions: {
-      category: [DM.Divisions.Divison_name],
-      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
-      breakBy: [],
-    },
-  };
-
-  onBeforeRender(options: any) {
-    console.log('beforeRender');
-    console.log(options);
-    return options;
-  }
-
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
-}
- * ```
- * <img src="media://angular-pie-chart-example.png" width="800px" />
- * @group Charts
+ * @group Fusion Assets
+ * @fusionEmbed
  */
-class PieChartComponent {
-    constructor() {
-        /**
-         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
-        /** @internal */
-        this.chartType = 'pie';
+let WidgetService = class WidgetService {
+    constructor(sisenseContextService, themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
     }
-}
-PieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieChartComponent, selector: "csdk-pie-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, ngImport: i0, template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-      (dataPointClick)="dataPointClick.emit($any($event))"
-      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
-      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender", "dataReady"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
-            type: Component,
+    /**
+     * Retrieves an existing widget model from the Sisense instance.
+     *
+     * @param params - Parameters to identify the target widget
+     * @returns Widget model
+     */
+    async getWidgetModel(params) {
+        const { dashboardOid, widgetOid } = params;
+        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 }, { 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', 'createJtdWidget'])
+], WidgetService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: 'csdk-pie-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-      (dataPointClick)="dataPointClick.emit($any($event))"
-      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
-      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
-    />
-  `,
+                    providedIn: 'root',
                 }]
-        }], propDecorators: { dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], dataReady: [{
-                type: Input
-            }], dataPointClick: [{
-                type: Output
-            }], dataPointContextMenu: [{
-                type: Output
-            }], dataPointsSelect: [{
-                type: Output
-            }] } });
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; } });
 
 /**
  * Pivot Table with and pagination.
@@ -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
 });
 
 /**