@sisense/sdk-ui-angular 2.18.0 → 2.18.1

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

@@ -1,8 +1,8 @@
 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, useJtdWidget, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, FilterTile, FiltersPanel, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, Widget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
+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 { __awaiter, __rest, __decorate } from 'tslib';
+import { __awaiter, __decorate, __rest } from 'tslib';
 import { ReplaySubject, firstValueFrom, concat, of, BehaviorSubject, skip } from 'rxjs';
 import merge from 'ts-deepmerge';
 import { trackProductEvent } from '@sisense/sdk-tracking';
@@ -287,1030 +287,855 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }] }];
     } });
 
-var packageVersion = '2.18.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 } = widgetProps, commonWidgetProps = __rest(widgetProps, ["beforeRender", "dataReady", "beforeMenuOpen", "dataPointClick", "dataPointContextMenu", "dataPointsSelect"]);
-    return Object.assign(Object.assign({}, 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 } = widgetProps, commonWidgetProps = __rest(widgetProps, ["onBeforeRender", "onDataReady", "onBeforeMenuOpen", "onDataPointClick", "onDataPointContextMenu", "onDataPointsSelected"]);
-    return Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, dashboardProps), { widgets: dashboardProps.widgets.map(translateFromPreactWidgetProps) });
+function track(action, methodName) {
+    var _a, _b, _c;
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const app = yield DecoratorsModule.sisenseContextService.getApp();
+            const trackingEnabled = (_c = (_b = (_a = app.settings) === null || _a === void 0 ? void 0 : _a.trackingConfig) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true;
+            if (app === null || app === void 0 ? void 0 : 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;
-    }
-    /**
-     * Retrieves an existing dashboard model from the Sisense instance.
-     *
-     * @param dashboardOid - Identifier of the dashboard
-     * @param options - Advanced configuration options
-     * @returns Dashboard model
-     */
-    getDashboardModel(dashboardOid, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const app = yield this.sisenseContextService.getApp();
-            return getDashboardModel(app.httpClient, dashboardOid, options);
+        this.initializationPromise = Promise.resolve();
+        this.themeSettings$ = new BehaviorSubject(getDefaultThemeSettings());
+        this.initializationPromise = this.initThemeSettings(themeConfig === null || themeConfig === void 0 ? void 0 : 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 existing dashboard models from the Sisense instance.
-     *
-     * @param options - Advanced configuration options
-     * @returns Dashboard models array
-     */
-    getDashboardModels(options) {
+    initThemeSettings(theme) {
         return __awaiter(this, void 0, void 0, function* () {
             const app = yield this.sisenseContextService.getApp();
-            return getDashboardModels(app.httpClient, options);
+            // apply system theme settings first
+            yield this.applyThemeSettings(app.settings.serverThemeSettings);
+            if (theme) {
+                // Manually tracks theme update during initialization as execution of updateThemeSettings for consistency.
+                track('sdkAngularServiceMethodExecuted', 'ThemeService.updateThemeSettings');
+                yield this.applyThemeSettings(theme);
+            }
         });
     }
-    /**
-     * С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));
+    applyThemeSettings(theme) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const app = yield this.sisenseContextService.getApp();
+                const isThemeOid = typeof theme === 'string';
+                let userThemeSettings = theme;
+                if (isThemeOid) {
+                    userThemeSettings = yield getThemeSettingsByOid(theme, app.httpClient);
+                }
+                const mergedThemeSettings = merge.withOptions({ mergeArrays: false }, this.themeSettings$.value, userThemeSettings);
+                this.themeSettings$.next(mergedThemeSettings);
+            }
+            catch (error) {
+                this.themeSettings$.error(error);
+            }
         });
-        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;
+    /** @internal */
+    getThemeSettings() {
+        return this.themeSettings$.asObservable();
     }
-    /**
-     * 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
-     */
-    getFilterMembers(params) {
+    updateThemeSettings(theme) {
         return __awaiter(this, void 0, void 0, function* () {
-            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();
-            });
+            yield this.initializationPromise;
+            yield this.applyThemeSettings(theme);
         });
     }
 };
-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: [{
+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 Sisense Fusion hierarchies.
+ * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
  *
- * @group Fusion Assets
- * @fusionEmbed
+ * @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 HierarchyService = class HierarchyService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
+class ChartComponent {
     /**
-     * Retrieves existing hierarchy models from the Sisense instance.
+     * Constructor for the `Chart` component.
      *
-     * @param params - Parameters to identify the target hierarchy models
-     * @returns Hierarchy models array
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
      */
-    getHierarchyModels(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const app = yield 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;
-    }
+    constructor(
     /**
-     * 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)
+     * Sisense context service
      *
-     * @param params - Query parameters
-     * @return Query result
+     * @category Constructor
      */
-    executeQuery(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { dataSource, dimensions, measures, filters, highlights, count, offset, ungroup, beforeQuery, } = params;
-            const app = yield this.sisenseContextService.getApp();
-            const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
-            const data = yield executeQuery({
-                dataSource,
-                dimensions,
-                measures,
-                filters: filterList,
-                filterRelations,
-                highlights,
-                count,
-                offset,
-                ungroup,
-            }, app, { onBeforeQuery: beforeQuery });
-            return { data };
-        });
-    }
+    sisenseContextService, 
     /**
-     * Executes a data query extracted from an existing widget in the Sisense instance.
+     * Theme service
      *
-     * @param params - Parameters to identify the target widget
-     * @returns Query result
+     * @category Constructor
      */
-    executeQueryByWidgetId(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const app = yield this.sisenseContextService.getApp();
-            return executeQueryByWidgetId(Object.assign(Object.assign({}, params), { app, onBeforeQuery: params.beforeQuery }));
-        });
+    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),
+        ]);
     }
     /**
-     * Executes a data query for a pivot table.
-     *
-     * @param params - Pivot query parameters
-     * @return Pivot query result
+     * @internal
      */
-    executePivotQuery(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { dataSource, rows, columns, values, grandTotals, filters, highlights, count, offset, beforeQuery, } = params;
-            const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
-            const app = yield this.sisenseContextService.getApp();
-            const data = yield executePivotQuery({
-                dataSource,
-                rows,
-                columns,
-                values,
-                grandTotals,
-                filters: filterList,
-                filterRelations,
-                highlights,
-                count,
-                offset,
-            }, app, { onBeforeQuery: beforeQuery });
-            return { data };
-        });
+    ngAfterViewInit() {
+        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
+     * @internal
      */
-    executeCsvQuery(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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();
-            });
-        });
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+        }
+    }
+    getPreactComponentProps() {
+        var _a, _b;
+        return {
+            chartType: this.chartType,
+            dataSet: this.dataSet,
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            highlights: this.highlights,
+            styleOptions: this.styleOptions,
+            onBeforeRender: (_a = this.beforeRender) === null || _a === void 0 ? void 0 : _a.bind(this),
+            onDataReady: (_b = this.dataReady) === null || _b === void 0 ? void 0 : _b.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
      */
-    executeCustomWidgetQuery(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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, themeService) {
-        this.sisenseContextService = sisenseContextService;
-        this.themeService = themeService;
-    }
-    /**
-     * Retrieves an existing widget model from the Sisense instance.
-     *
-     * @param params - Parameters to identify the target widget
-     * @returns Widget model
-     */
-    getWidgetModel(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { dashboardOid, widgetOid } = params;
-            const app = yield 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: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; } });
+ * @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;
+@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-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';
     }
 }
-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,
+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: [{
-                    declarations: [],
-                    exports: [],
+                    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))"
+    />
+  `,
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+        }], 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
+            }] } });
 
-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);
-            };
-        });
-    };
-}
-function track(action, methodName) {
-    var _a, _b, _c;
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            const app = yield DecoratorsModule.sisenseContextService.getApp();
-            const trackingEnabled = (_c = (_b = (_a = app.settings) === null || _a === void 0 ? void 0 : _a.trackingConfig) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true;
-            if (app === null || app === void 0 ? void 0 : app.httpClient) {
-                const payload = {
-                    packageName: 'sdk-ui-angular',
-                    packageVersion,
-                    methodName,
-                };
-                void trackProductEvent(action, payload, app.httpClient, !trackingEnabled);
-            }
-        }
-        catch (e) {
-            console.warn('tracking error', e);
+/**
+ * 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,
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-area-range-chart-example.png" width="800px" />
+ * @group Charts
+ */
+class AreaRangeChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        /** @internal */
+        this.chartType = 'arearange';
+    }
 }
+AreaRangeChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaRangeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AreaRangeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreaRangeChartComponent, selector: "csdk-area-range-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: AreaRangeChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-area-range-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
+ * An Angular component that allows to visualize geographical data as polygons on a map.
  *
  * @example
- *
- * Example of injecting both {@link SisenseContextConfig} and {@link ThemeConfig} into your application:
+ * ```html
+ *    <csdk-areamap-chart
+ *      [dataSet]="areamapChart.dataSet"
+ *      [dataOptions]="areamapChart.dataOptions"
+ *      [styleOptions]="areamapChart.styleOptions"
+ *      (dataPointClick)="logArguments($event)"
+ *    />
+ * ```
  *
  * ```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],
- * })
+import { Component } from '@angular/core';
+import { measureFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-ecommerce';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  areamapChart = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      geo: [DM.Country.Country],
+      color: [measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue')],
+    } as AreamapChartDataOptions,
+    styleOptions: {
+      mapType: 'world',
+    } as AreamapStyleOptions,
+  };
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
  * ```
- * @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
+ * <img src="media://angular-areamap-chart-example.png" width="800px" />
+ * @group Charts
  */
-let ThemeService = class ThemeService {
-    constructor(sisenseContextService, themeConfig) {
-        this.sisenseContextService = sisenseContextService;
-        this.initializationPromise = Promise.resolve();
-        this.themeSettings$ = new BehaviorSubject(getDefaultThemeSettings());
-        this.initializationPromise = this.initThemeSettings(themeConfig === null || themeConfig === void 0 ? void 0 : 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);
-                }
-            },
-        });
-    }
-    initThemeSettings(theme) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const app = yield this.sisenseContextService.getApp();
-            // apply system theme settings first
-            yield this.applyThemeSettings(app.settings.serverThemeSettings);
-            if (theme) {
-                // Manually tracks theme update during initialization as execution of updateThemeSettings for consistency.
-                track('sdkAngularServiceMethodExecuted', 'ThemeService.updateThemeSettings');
-                yield this.applyThemeSettings(theme);
-            }
-        });
-    }
-    applyThemeSettings(theme) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const app = yield this.sisenseContextService.getApp();
-                const isThemeOid = typeof theme === 'string';
-                let userThemeSettings = theme;
-                if (isThemeOid) {
-                    userThemeSettings = yield 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();
-    }
-    updateThemeSettings(theme) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.initializationPromise;
-            yield this.applyThemeSettings(theme);
-        });
+class AreamapChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!AreamapChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /** @internal */
+        this.chartType = 'areamap';
     }
-};
-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,
+}
+AreamapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreamapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AreamapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreamapChartComponent, selector: "csdk-areamap-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.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: AreamapChartComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'csdk-areamap-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [dataReady]="dataReady"
+      (dataPointClick)="dataPointClick.emit($any($event))"
+    />
+  `,
                 }]
-        }], ctorParameters: function () {
-        return [{ type: SisenseContextService }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [THEME_CONFIG_TOKEN]
-                    }] }];
-    } });
+        }], propDecorators: { dataSet: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], dataReady: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }] } });
 
 /**
- * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
+ * A component representing categorical data with horizontal rectangular bars,
+ * whose lengths are proportional to the values that they represent.
  *
  * @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"
- * />
+ *    <csdk-bar-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
  * ```
  *
  * ```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,
- *       },
- *     },
- *   },
- * };
+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-chart-example.png" width="800px" />
- * @shortDescription Common component for rendering charts of different types including table
+ * <img src="media://angular-bar-chart-example.png" width="800px" />
  * @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;
+class BarChartComponent {
+    constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!BarChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!BarChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!BarChartProps.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() {
-        var _a, _b;
-        return {
-            chartType: this.chartType,
-            dataSet: this.dataSet,
-            dataOptions: this.dataOptions,
-            filters: this.filters,
-            highlights: this.highlights,
-            styleOptions: this.styleOptions,
-            onBeforeRender: (_a = this.beforeRender) === null || _a === void 0 ? void 0 : _a.bind(this),
-            onDataReady: (_b = this.dataReady) === null || _b === void 0 ? void 0 : _b.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();
+        /** @internal */
+        this.chartType = 'bar';
     }
 }
-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: [{
+BarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarChartComponent, selector: "csdk-bar-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: BarChartComponent, 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: [{
+            args: [{
+                    selector: 'csdk-bar-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
@@ -1333,26 +1158,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * A component similar to a {@link LineChartComponent},
- * but with filled in areas under each line and an option to display them as stacked.
+ * An Angular component representing data in a way that visually describes the distribution
+ * variability, and center of a data set along an axis.
  *
  * @example
  * ```html
- *    <csdk-area-chart
- *      [dataSet]="chart.dataSet"
- *      [dataOptions]="chart.dataOptions"
- *      [highlights]="filters"
+ *    <csdk-boxplot-chart
+ *      [dataSet]="boxplotChart.dataSet"
+ *      [dataOptions]="boxplotChart.dataOptions"
+ *      [highlights]="boxplotChart.highlights"
  *      [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 { filterFactory } from '@sisense/sdk-data';
+import type { BoxplotChartDataOptions } from '@sisense/sdk-ui-angular';
 import * as DM from '../../assets/sample-healthcare-model';
-import type { ChartType } from '@sisense/sdk-ui-angular';
 
 @Component({
   selector: 'app-analytics',
@@ -1360,58 +1186,51 @@ import type { ChartType } from '@sisense/sdk-ui-angular';
   styleUrls: ['./analytics.component.scss'],
 })
 export class AnalyticsComponent {
-  DM = DM;
-  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
-  chart = {
-    chartType: 'column' as ChartType,
+  boxplotChart = {
     dataSet: DM.DataSource,
     dataOptions: {
       category: [DM.Divisions.Divison_name],
-      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
-      breakBy: [],
-    },
+      value: [DM.Admissions.TimeofStay],
+      boxType: 'iqr',
+      outliersEnabled: true,
+    } as BoxplotChartDataOptions,
+    highlights: [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])],
   };
 
-  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" />
+ * <img src="media://angular-boxplot-chart-example.png" width="800px" />
  * @group Charts
  */
-class AreaChartComponent {
+class BoxplotChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'area';
+        this.chartType = 'boxplot';
     }
 }
-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: `
+BoxplotChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxplotChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BoxplotChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BoxplotChartComponent, selector: "csdk-boxplot-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"
@@ -1426,10 +1245,10 @@ AreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
       (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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxplotChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-area-chart',
+                    selector: 'csdk-boxplot-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -1469,27 +1288,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * 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.
+ * A component that visualizes values over days in a calendar-like view,
+ * making it easy to identify daily patterns or anomalies
  *
  * @example
  * ```html
- *    <csdk-area-range-chart
+ *    <csdk-calendar-heatmap-chart
  *      [dataSet]="chart.dataSet"
- *      [dataOptions]="chart.dataOptions"
- *      [highlights]="filters"
- *      [beforeRender]="onBeforeRender"
- *      (dataPointClick)="logArguments($event)"
- *      (dataPointContextMenu)="logArguments($event)"
- *      (dataPointsSelect)="logArguments($event)"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="chart.highlights"
+ *      [styleOptions]="chart.styleOptions"
  *    />
  * ```
  * ```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';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-ecommerce';
+import type { CalendarHeatmapChartProps } from '@sisense/sdk-ui-angular';
 
 @Component({
   selector: 'app-analytics',
@@ -1498,69 +1313,54 @@ import type { ChartType, RangeChartDataOptions } from '@sisense/sdk-ui-angular';
 })
 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,
+      date: DM.Commerce.Date.Days,
+      value: measureFactory.sum(DM.Commerce.Cost),
+    },
+    highlights: [
+      filterFactory.dateRange(
+        DM.Commerce.Date.Days,
+        '2009-11-29',
+        '2009-12-15'
+      ),
+    ],
+    styleOptions: {
+      viewType: 'quarter',
+    },
   };
-
-  onBeforeRender(options: any) {
-    console.log('beforeRender');
-    console.log(options);
-    return options;
-  }
-
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
 }
  * ```
- * <img src="media://angular-area-range-chart-example.png" width="800px" />
+ * <img src="media://angular-calendar-heatmap-chart-example.png" width="800px" />
  * @group Charts
  */
-class AreaRangeChartComponent {
+class CalendarHeatmapChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreaRangeChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'arearange';
+        this.chartType = 'calendar-heatmap';
     }
 }
-AreaRangeChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreaRangeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AreaRangeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreaRangeChartComponent, selector: "csdk-area-range-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: `
+CalendarHeatmapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarHeatmapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarHeatmapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarHeatmapChartComponent, selector: "csdk-calendar-heatmap-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"
@@ -1575,10 +1375,10 @@ AreaRangeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       (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: AreaRangeChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarHeatmapChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-area-range-chart',
+                    selector: 'csdk-calendar-heatmap-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -1618,22 +1418,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * An Angular component that allows to visualize geographical data as polygons on a map.
+ * A component representing categorical data with vertical rectangular bars
+ * whose heights are proportional to the values that they represent.
  *
  * @example
  * ```html
- *    <csdk-areamap-chart
- *      [dataSet]="areamapChart.dataSet"
- *      [dataOptions]="areamapChart.dataOptions"
- *      [styleOptions]="areamapChart.styleOptions"
+ *    <csdk-column-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 } from '@sisense/sdk-data';
-import * as DM from '../../assets/sample-ecommerce';
+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',
@@ -1641,39 +1445,58 @@ import * as DM from '../../assets/sample-ecommerce';
   styleUrls: ['./analytics.component.scss'],
 })
 export class AnalyticsComponent {
-  areamapChart = {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
     dataSet: DM.DataSource,
     dataOptions: {
-      geo: [DM.Country.Country],
-      color: [measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue')],
-    } as AreamapChartDataOptions,
-    styleOptions: {
-      mapType: 'world',
-    } as AreamapStyleOptions,
+      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-areamap-chart-example.png" width="800px" />
+ * <img src="media://angular-column-chart-example.png" width="800px" />
  * @group Charts
  */
-class AreamapChartComponent {
+class ColumnChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreamapChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'areamap';
+        this.chartType = 'column';
     }
 }
-AreamapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreamapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AreamapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AreamapChartComponent, selector: "csdk-areamap-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", dataReady: "dataReady" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
+ColumnChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnChartComponent, selector: "csdk-column-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"
@@ -1681,14 +1504,17 @@ AreamapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       [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: AreamapChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-areamap-chart',
+                    selector: 'csdk-column-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -1697,8 +1523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [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))"
     />
   `,
                 }]
@@ -1712,19 +1541,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], styleOptions: [{
                 type: Input
+            }], beforeRender: [{
+                type: Input
             }], dataReady: [{
                 type: Input
             }], dataPointClick: [{
                 type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
             }] } });
 
 /**
- * A component representing categorical data with horizontal rectangular bars,
- * whose lengths are proportional to the values that they represent.
+ * A component representing data progressively decreasing in size or quantity through a funnel shape.
  *
  * @example
  * ```html
- *    <csdk-bar-chart
+ *    <csdk-funnel-chart
  *      [dataSet]="chart.dataSet"
  *      [dataOptions]="chart.dataOptions"
  *      [highlights]="filters"
@@ -1734,13 +1568,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *      (dataPointsSelect)="logArguments($event)"
  *    />
  * ```
- *
  * ```ts
 import { Component } from '@angular/core';
-import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import { measureFactory, filterFactory, Filter } 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',
@@ -1770,35 +1602,35 @@ export class AnalyticsComponent {
   }
 }
  * ```
- * <img src="media://angular-bar-chart-example.png" width="800px" />
+ * <img src="media://angular-funnel-chart-example.png" width="800px" />
  * @group Charts
  */
-class BarChartComponent {
+class FunnelChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!BarChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!BarChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!BarChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'bar';
+        this.chartType = 'funnel';
     }
 }
-BarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarChartComponent, selector: "csdk-bar-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: `
+FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FunnelChartComponent, selector: "csdk-funnel-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"
@@ -1813,10 +1645,10 @@ BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       (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: BarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FunnelChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-bar-chart',
+                    selector: 'csdk-funnel-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -1856,27 +1688,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * An Angular component representing data in a way that visually describes the distribution
- * variability, and center of a data set along an axis.
+ * A component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
  *
  * @example
  * ```html
- *    <csdk-boxplot-chart
- *      [dataSet]="boxplotChart.dataSet"
- *      [dataOptions]="boxplotChart.dataOptions"
- *      [highlights]="boxplotChart.highlights"
- *      [beforeRender]="onBeforeRender"
- *      (dataPointClick)="logArguments($event)"
- *      (dataPointContextMenu)="logArguments($event)"
- *      (dataPointsSelect)="logArguments($event)"
+ *    <csdk-indicator-chart
+ *      [dataSet]="indicator.dataSet"
+ *      [dataOptions]="indicator.dataOptions"
+ *      [filters]="filters"
+ *      [styleOptions]="indicator.styleOptions"
  *    />
  * ```
- *
  * ```ts
 import { Component } from '@angular/core';
-import { filterFactory } from '@sisense/sdk-data';
-import type { BoxplotChartDataOptions } from '@sisense/sdk-ui-angular';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
 import * as DM from '../../assets/sample-healthcare-model';
+import type { IndicatorStyleOptions } from '@sisense/sdk-ui-angular';
 
 @Component({
   selector: 'app-analytics',
@@ -1884,51 +1711,48 @@ import * as DM from '../../assets/sample-healthcare-model';
   styleUrls: ['./analytics.component.scss'],
 })
 export class AnalyticsComponent {
-  boxplotChart = {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  indicator = {
     dataSet: DM.DataSource,
     dataOptions: {
-      category: [DM.Divisions.Divison_name],
-      value: [DM.Admissions.TimeofStay],
-      boxType: 'iqr',
-      outliersEnabled: true,
-    } as BoxplotChartDataOptions,
-    highlights: [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])],
-  };
-
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
-}
- * ```
- * <img src="media://angular-boxplot-chart-example.png" width="800px" />
- * @group Charts
- */
-class BoxplotChartComponent {
-    constructor() {
-        /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      secondary: [measureFactory.sum(DM.Admissions.Diagnosis_ID)],
+    },
+    styleOptions: {
+      indicatorComponents: {
+        title: {
+          shouldBeShown: true,
+          text: 'Total Cost_of_admission',
+        },
+        secondaryTitle: {
+          text: 'Total Diagnosis_ID',
+        },
+        ticks: {
+          shouldBeShown: true,
+        },
+        labels: {
+          shouldBeShown: true,
+        },
+      },
+      subtype: 'indicator/gauge',
+      skin: 2,
+    } as IndicatorStyleOptions,
+  };
+
+}
+ * ```
+ * <img src="media://angular-indicator-chart-example.png" width="800px" />
+ * @group Charts
+ */
+class IndicatorChartComponent {
+    constructor() {
         /** @internal */
-        this.chartType = 'boxplot';
+        this.chartType = 'indicator';
     }
 }
-BoxplotChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxplotChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxplotChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BoxplotChartComponent, selector: "csdk-boxplot-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: `
+IndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IndicatorChartComponent, selector: "csdk-indicator-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, ngImport: i0, template: `
     <csdk-chart
       [chartType]="chartType"
       [dataSet]="dataSet"
@@ -1938,15 +1762,12 @@ BoxplotChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       [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: BoxplotChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-boxplot-chart',
+                    selector: 'csdk-indicator-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -1957,9 +1778,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       [dataReady]="dataReady"
-      (dataPointClick)="dataPointClick.emit($any($event))"
-      (dataPointContextMenu)="dataPointContextMenu.emit($any($event))"
-      (dataPointsSelect)="dataPointsSelect.emit($any($event))"
     />
   `,
                 }]
@@ -1977,33 +1795,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], dataReady: [{
                 type: Input
-            }], dataPointClick: [{
-                type: Output
-            }], dataPointContextMenu: [{
-                type: Output
-            }], dataPointsSelect: [{
-                type: Output
             }] } });
 
 /**
- * A component that visualizes values over days in a calendar-like view,
- * making it easy to identify daily patterns or anomalies
+ * A component displaying data as a series of points connected by a line. Used to show trends or changes over time.
  *
  * @example
  * ```html
- *    <csdk-calendar-heatmap-chart
+ *    <csdk-line-chart
  *      [dataSet]="chart.dataSet"
  *      [dataOptions]="chart.dataOptions"
- *      [highlights]="chart.highlights"
- *      [styleOptions]="chart.styleOptions"
+ *      [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-ecommerce';
-import type { CalendarHeatmapChartProps } from '@sisense/sdk-ui-angular';
-
+import { measureFactory, filterFactory, Filter } 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',
@@ -2011,54 +1824,57 @@ import type { CalendarHeatmapChartProps } from '@sisense/sdk-ui-angular';
 })
 export class AnalyticsComponent {
   DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
   chart = {
+    chartType: 'column' as ChartType,
     dataSet: DM.DataSource,
     dataOptions: {
-      date: DM.Commerce.Date.Days,
-      value: measureFactory.sum(DM.Commerce.Cost),
-    },
-    highlights: [
-      filterFactory.dateRange(
-        DM.Commerce.Date.Days,
-        '2009-11-29',
-        '2009-12-15'
-      ),
-    ],
-    styleOptions: {
-      viewType: 'quarter',
+      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-calendar-heatmap-chart-example.png" width="800px" />
+ * <img src="media://angular-line-chart-example.png" width="800px" />
  * @group Charts
  */
-class CalendarHeatmapChartComponent {
+class LineChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!CalendarHeatmapChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'calendar-heatmap';
+        this.chartType = 'line';
     }
 }
-CalendarHeatmapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarHeatmapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarHeatmapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarHeatmapChartComponent, selector: "csdk-calendar-heatmap-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: `
+LineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LineChartComponent, selector: "csdk-line-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"
@@ -2073,10 +1889,10 @@ CalendarHeatmapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
       (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: CalendarHeatmapChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-calendar-heatmap-chart',
+                    selector: 'csdk-line-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -2116,12 +1932,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * A component representing categorical data with vertical rectangular bars
- * whose heights are proportional to the values that they represent.
+ * 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-column-chart
+ *    <csdk-pie-chart
  *      [dataSet]="chart.dataSet"
  *      [dataOptions]="chart.dataOptions"
  *      [highlights]="filters"
@@ -2166,35 +1982,35 @@ export class AnalyticsComponent {
   }
 }
  * ```
- * <img src="media://angular-column-chart-example.png" width="800px" />
+ * <img src="media://angular-pie-chart-example.png" width="800px" />
  * @group Charts
  */
-class ColumnChartComponent {
+class PieChartComponent {
     constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!ColumnChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!PieChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
         /** @internal */
-        this.chartType = 'column';
+        this.chartType = 'pie';
     }
 }
-ColumnChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnChartComponent, selector: "csdk-column-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: `
+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"
@@ -2209,10 +2025,10 @@ ColumnChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       (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: ColumnChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-column-chart',
+                    selector: 'csdk-pie-chart',
                     template: `
     <csdk-chart
       [chartType]="chartType"
@@ -2252,518 +2068,702 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * A component representing data progressively decreasing in size or quantity through a funnel shape.
+ * Service for rendering components dynamically.
  *
- * @example
- * ```html
- *    <csdk-funnel-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';
-@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: [],
-    },
-  };
+ * @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 }]; } });
 
-  onBeforeRender(options: any) {
-    console.log('beforeRender');
-    console.log(options);
-    return options;
-  }
+/**
+ * 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 }]; } });
 
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
+function translateToPreactWidgetProps(widgetProps) {
+    const { beforeRender, dataReady, beforeMenuOpen, dataPointClick, dataPointContextMenu, dataPointsSelect } = widgetProps, commonWidgetProps = __rest(widgetProps, ["beforeRender", "dataReady", "beforeMenuOpen", "dataPointClick", "dataPointContextMenu", "dataPointsSelect"]);
+    return Object.assign(Object.assign({}, 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 });
 }
- * ```
- * <img src="media://angular-funnel-chart-example.png" width="800px" />
- * @group Charts
+function translateFromPreactWidgetProps(widgetProps) {
+    const { onBeforeRender, onDataReady, onBeforeMenuOpen, onDataPointClick, onDataPointContextMenu, onDataPointsSelected } = widgetProps, commonWidgetProps = __rest(widgetProps, ["onBeforeRender", "onDataReady", "onBeforeMenuOpen", "onDataPointClick", "onDataPointContextMenu", "onDataPointsSelected"]);
+    return Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, dashboardProps), { widgets: dashboardProps.widgets.map(translateToPreactWidgetProps) });
+}
+function translateFromPreactDashboardProps(dashboardProps) {
+    return Object.assign(Object.assign({}, 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
  */
-class FunnelChartComponent {
-    constructor() {
-        /**
-         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!FunnelChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
-        /** @internal */
-        this.chartType = 'funnel';
+let DashboardService = class DashboardService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
     }
-}
-FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FunnelChartComponent, selector: "csdk-funnel-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: FunnelChartComponent, decorators: [{
-            type: Component,
+    /**
+     * Retrieves an existing dashboard model from the Sisense instance.
+     *
+     * @param dashboardOid - Identifier of the dashboard
+     * @param options - Advanced configuration options
+     * @returns Dashboard model
+     */
+    getDashboardModel(dashboardOid, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield 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
+     */
+    getDashboardModels(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield 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: [{
-                    selector: 'csdk-funnel-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
-            }] } });
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
 /**
- * A component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
+ * Service for working with filter.
  *
- * @example
- * ```html
- *    <csdk-indicator-chart
- *      [dataSet]="indicator.dataSet"
- *      [dataOptions]="indicator.dataOptions"
- *      [filters]="filters"
- *      [styleOptions]="indicator.styleOptions"
- *    />
- * ```
- * ```ts
-import { Component } from '@angular/core';
-import { measureFactory, filterFactory } from '@sisense/sdk-data';
-import * as DM from '../../assets/sample-healthcare-model';
-import type { IndicatorStyleOptions } 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'])];
-  indicator = {
-    dataSet: DM.DataSource,
-    dataOptions: {
-      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
-      secondary: [measureFactory.sum(DM.Admissions.Diagnosis_ID)],
-    },
-    styleOptions: {
-      indicatorComponents: {
-        title: {
-          shouldBeShown: true,
-          text: 'Total Cost_of_admission',
-        },
-        secondaryTitle: {
-          text: 'Total Diagnosis_ID',
-        },
-        ticks: {
-          shouldBeShown: true,
-        },
-        labels: {
-          shouldBeShown: true,
-        },
-      },
-      subtype: 'indicator/gauge',
-      skin: 2,
-    } as IndicatorStyleOptions,
-  };
-
-}
- * ```
- * <img src="media://angular-indicator-chart-example.png" width="800px" />
- * @group Charts
+ * @group Filters
  */
-class IndicatorChartComponent {
-    constructor() {
-        /** @internal */
-        this.chartType = 'indicator';
+let FilterService = class FilterService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
     }
-}
-IndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IndicatorChartComponent, selector: "csdk-indicator-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender", dataReady: "dataReady" }, ngImport: i0, template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-    />
-  `, 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: IndicatorChartComponent, decorators: [{
-            type: Component,
+    /**
+     * 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
+     */
+    getFilterMembers(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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: [{
-                    selector: 'csdk-indicator-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      [dataReady]="dataReady"
-    />
-  `,
+                    providedIn: 'root',
                 }]
-        }], propDecorators: { dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], dataReady: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
 /**
- * A component displaying data as a series of points connected by a line. Used to show trends or changes over time.
+ * Service for working with Sisense Fusion hierarchies.
  *
- * @example
- * ```html
- *    <csdk-line-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';
-@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-line-chart-example.png" width="800px" />
- * @group Charts
+ * @group Fusion Assets
+ * @fusionEmbed
  */
-class LineChartComponent {
-    constructor() {
-        /**
-         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointClick}
-         *
-         * @category Callbacks
-         */
-        this.dataPointClick = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointContextMenu}
-         *
-         * @category Callbacks
-         */
-        this.dataPointContextMenu = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!LineChartProps.onDataPointsSelected}
-         *
-         * @category Callbacks
-         */
-        this.dataPointsSelect = new EventEmitter();
-        /** @internal */
-        this.chartType = 'line';
+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
+     */
+    getHierarchyModels(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield this.sisenseContextService.getApp();
+            return getHierarchyModels(app.httpClient, params, app.defaultDataSource);
+        });
     }
-}
-LineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LineChartComponent, selector: "csdk-line-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: LineChartComponent, decorators: [{
-            type: Component,
+};
+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: [{
-                    selector: 'csdk-line-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 }]; } });
 
 /**
- * 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.
+ * Service for executing data queries.
  *
- * @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;
-  }
+ * @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
+     */
+    executeQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { dataSource, dimensions, measures, filters, highlights, count, offset, ungroup, beforeQuery, } = params;
+            const app = yield this.sisenseContextService.getApp();
+            const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
+            const data = yield 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
+     */
+    executeQueryByWidgetId(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield this.sisenseContextService.getApp();
+            return executeQueryByWidgetId(Object.assign(Object.assign({}, params), { app, onBeforeQuery: params.beforeQuery }));
+        });
+    }
+    /**
+     * Executes a data query for a pivot table.
+     *
+     * @param params - Pivot query parameters
+     * @return Pivot query result
+     */
+    executePivotQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { dataSource, rows, columns, values, grandTotals, filters, highlights, count, offset, beforeQuery, } = params;
+            const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
+            const app = yield this.sisenseContextService.getApp();
+            const data = yield 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
+     */
+    executeCsvQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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
+     */
+    executeCustomWidgetQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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 }]; } });
 
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
-}
- * ```
- * <img src="media://angular-pie-chart-example.png" width="800px" />
- * @group Charts
+/**
+ * Service for working with Sisense Fusion widgets.
+ *
+ * @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
+     */
+    getWidgetModel(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { dashboardOid, widgetOid } = params;
+            const app = yield 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.