@sisense/sdk-ui-angular 1.5.0 → 1.6.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewChild, Input, Output, InjectionToken, Injectable, Inject, NgModule, Optional } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ComponentAdapter, createElement, BasicMemberFilterTile, createContextProviderRenderer, CustomThemeProvider, CustomSisenseContextProvider, createClientApplication, executeQuery, executeQueryByWidgetId, getDashboardModel, getDashboardModels, getDefaultThemeSettings, getThemeSettingsByOid, Chart, Table, ChartWidget, TableWidget, DashboardWidget, MemberFilterTile, createWrapperElementHandler, createWrapperElement, DrilldownWidget, createComponentRenderer, DateRangeFilterTile, DrilldownBreadcrumbs, ContextMenu, PivotTable } from '@sisense/sdk-ui-preact';
+import { ComponentAdapter, createElement, BasicMemberFilterTile, createContextProviderRenderer, CustomThemeProvider, CustomSisenseContextProvider, createClientApplication, executeQuery, executeQueryByWidgetId, getDashboardModel, getDashboardModels, getDefaultThemeSettings, getThemeSettingsByOid, MemberFilterTile, DateRangeFilterTile, Chart, Table, PivotTable, TableWidget, DashboardWidget, createWrapperElementHandler, createWrapperElement, DrilldownWidget, createComponentRenderer, ChartWidget, DrilldownBreadcrumbs, ContextMenu } from '@sisense/sdk-ui-preact';
 export { boxWhiskerProcessResult } from '@sisense/sdk-ui-preact';
 import { map, BehaviorSubject } from 'rxjs';
 import { __decorate } from 'tslib';
@@ -80,6 +80,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Creates theme context connector
+ *
+ * @param themeService - The theme service
+ * @internal
+ */
 const createThemeContextConnector = (themeService) => {
     return {
         prepareContext() {
@@ -91,6 +97,12 @@ const createThemeContextConnector = (themeService) => {
         renderContextProvider: createContextProviderRenderer(CustomThemeProvider),
     };
 };
+/**
+ * Creates Sisense context connector
+ *
+ * @param sisenseContextService - The Sisense context service
+ * @internal
+ */
 const createSisenseContextConnector = (sisenseContextService) => {
     return {
         async prepareContext() {
@@ -135,8 +147,14 @@ const createSisenseContextConnector = (sisenseContextService) => {
  *   bootstrap: [AppComponent],
  * })
  * ```
+ * @group Contexts
  */
 const SISENSE_CONTEXT_CONFIG_TOKEN = new InjectionToken('Props for connecting to Sisense instance');
+/**
+ * Service for working with Sisense Fusion context.
+ *
+ * @group Contexts
+ */
 class SisenseContextService {
     constructor(sisenseContextConfig) {
         this.appPromise = createClientApplication(sisenseContextConfig);
@@ -167,6 +185,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [SISENSE_CONTEXT_CONFIG_TOKEN]
                 }] }]; } });
 
+/**
+ * Service for executing data queries.
+ *
+ * @group Queries
+ */
 let QueryService = class QueryService {
     constructor(sisenseContextService) {
         this.sisenseContextService = sisenseContextService;
@@ -179,7 +202,7 @@ let QueryService = class QueryService {
      * [External Charts Guide](/guides/sdk/guides/charts/guide-external-charts.html#query)
      *
      * @param params - Query parameters
-     * return Query result
+     * @return Query result
      */
     async executeQuery(params) {
         const { dataSource, dimensions, measures, filters, highlights, count, offset, onBeforeQuery } = params;
@@ -223,6 +246,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
+/**
+ * Service for working with Sisense Fusion dashboards.
+ *
+ * @group Fusion Assets
+ */
 let DashboardService = class DashboardService {
     constructor(sisenseContextService) {
         this.sisenseContextService = sisenseContextService;
@@ -277,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
-var packageVersion = '1.5.0';
+var packageVersion = '1.6.0';
 
 function Trackable(target, propertyKey, descriptor) {
     const originalMethod = descriptor.value;
@@ -350,8 +378,14 @@ async function track(action, methodName) {
  *   bootstrap: [AppComponent],
  * })
  * ```
+ * @group Contexts
  */
 const THEME_CONFIG_TOKEN = new InjectionToken('theme configuration');
+/**
+ * Service for working with Sisense Fusion themes.
+ *
+ * @group Contexts
+ */
 let ThemeService = class ThemeService {
     constructor(sisenseContextService, themeConfig) {
         this.sisenseContextService = sisenseContextService;
@@ -406,6 +440,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [THEME_CONFIG_TOKEN]
                 }] }]; } });
 
+/**
+ * Member Filter Tile Component
+ *
+ * @example
+ * ```html
+ *     <csdk-member-filter-tile
+ *       title="Years Filter"
+ *       [attribute]="DM.ER.Date.Years"
+ *       [filter]="memberFilterTileProps.yearFilter"
+ *       (filterChange)="memberFilterTileProps.setYearFilter($event)"
+ *     />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { Member } from '@sisense/sdk-ui-angular';
+ * import { Filter, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-filters',
+ *   templateUrl: './filters.component.html',
+ *   styleUrls: ['./filters.component.scss'],
+ * })
+ * export class FiltersComponent {
+ *   DM = DM;
+ *   memberFilterTileProps = {
+ *     yearFilter: filterFactory.members(DM.ER.Date.Years, ['2013-01-01T00:00:00']),
+ *     setYearFilter({ filter }: { filter: Filter | null }) {
+ *       if (filter) {
+ *         this.yearFilter = filter;
+ *       }
+ *     },
+ *   };
+ * }
+ * ```
+ * <img src="media://angular-member-filter-tile-example.png" width="800px" />
+ *
+ * @group Filter Tiles
+ */
+class MemberFilterTileComponent {
+    /**
+     * Constructor for the `MemberFilterTileComponent`.
+     *
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
+     */
+    constructor(
+    /**
+     * Sisense context service
+     *
+     * @category Constructor
+     */
+    sisenseContextService, 
+    /**
+     * Theme service
+     *
+     * @category Constructor
+     */
+    themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!MemberFilterTileProps.onChange}
+         */
+        this.filterChange = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /**
+     * @internal
+     */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement);
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement);
+        }
+    }
+    createPreactComponent() {
+        const props = {
+            title: this.title,
+            dataSource: this.dataSource,
+            attribute: this.attribute,
+            filter: this.filter,
+            onChange: (...[filter]) => this.filterChange.emit({ filter }),
+        };
+        return createElement(MemberFilterTile, props);
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
+    }
+}
+MemberFilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MemberFilterTileComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+MemberFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MemberFilterTileComponent, selector: "csdk-member-filter-tile", inputs: { title: "title", dataSource: "dataSource", attribute: "attribute", filter: "filter" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MemberFilterTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-member-filter-tile',
+                    template,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], title: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], attribute: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Date Range Filter Tile Component
+ *
+ * @example
+ * ```html
+ * <csdk-date-range-filter-tile
+ *       title="dateRangeFilterTileProps.title"
+ *       [attribute]="dateRangeFilterTileProps.attribute"
+ *       [filter]="dateRangeFilterTileProps.filter"
+ *       (filterChange)="dateRangeFilterTileProps.setFilter($event)"
+ *     />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { Member } from '@sisense/sdk-ui-angular';
+ * import { Filter, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-filters',
+ *   templateUrl: './filters.component.html',
+ *   styleUrls: ['./filters.component.scss'],
+ * })
+ * export class FiltersComponent {
+ *   DM = DM;
+
+ *   dateRangeFilterTileProps = {
+ *     title: 'Range Filter',
+ *     attribute: DM.ER.Date.Years,
+ *     filter: filterFactory.dateRange(DM.ER.Date.Years),
+ *     setFilter({ filter }: { filter: Filter | null }) {
+ *       console.log(filter);
+ *       if (filter) {
+ *         this.filter = filter;
+ *       }
+ *     },
+ *   };
+ * }
+ * ```
+ * <img src="media://angular-date-range-filter-tile-example.png" width="800px" />
+ *
+ * @group Filter Tiles
+ */
+class DateRangeFilterTileComponent {
+    /**
+     * Constructor for the `DateRangeFilterTileComponent`.
+     *
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
+     */
+    constructor(
+    /**
+     * Sisense context service
+     *
+     * @category Constructor
+     */
+    sisenseContextService, 
+    /**
+     * Theme service
+     *
+     * @category Constructor
+     */
+    themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!DateRangeFilterTileProps.onChange}
+         */
+        this.filterChange = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /**
+     * @internal
+     */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement);
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement);
+        }
+    }
+    createPreactComponent() {
+        const props = {
+            title: this.title,
+            attribute: this.attribute,
+            dataSource: this.dataSource,
+            filter: this.filter,
+            earliestDate: this.earliestDate,
+            lastDate: this.lastDate,
+            onChange: (...[filter]) => this.filterChange.emit({ filter }),
+        };
+        return createElement(DateRangeFilterTile, props);
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
+    }
+}
+DateRangeFilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeFilterTileComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeFilterTileComponent, selector: "csdk-date-range-filter-tile", inputs: { title: "title", attribute: "attribute", dataSource: "dataSource", filter: "filter", earliestDate: "earliestDate", lastDate: "lastDate" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeFilterTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-date-range-filter-tile',
+                    template,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], title: [{
+                type: Input
+            }], attribute: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], earliestDate: [{
+                type: Input
+            }], lastDate: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
 /**
  * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
  *
@@ -452,7 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * />
  * ```
  *
- * <img src="media://angular-chart-data-source-example-1.png" width="800px" />
+ * <img src="media://angular-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class ChartComponent {
     /**
@@ -570,6 +864,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 /**
  * Table with aggregation and pagination.
+ *
+ * @example
+ * ```html
+ *  <csdk-table [dataSet]="table.dataSet" [dataOptions]="table.dataOptions" [filters]="filters" />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@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'])];
+  table = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      columns: [DM.Admissions.Patient_ID, measureFactory.sum(DM.Admissions.Cost_of_admission)],
+    },
+  };
+
+}
+ * ```
+ * <img src="media://angular-table-chart-example.png" width="800px" />
+ *
+ * @group Data Grids
  */
 class TableComponent {
     constructor(sisenseContextService, themeService) {
@@ -626,114 +950,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * The Chart Widget component extending {@link ChartComponent} to support widget style options.
- */
-class ChartWidgetComponent {
-    constructor(sisenseContextService, 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(() => this.createPreactComponent(), [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    /** @internal */
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement);
-    }
-    /** @internal */
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement);
-        }
-    }
-    createPreactComponent() {
-        const props = {
-            chartType: this.chartType,
-            dataSource: this.dataSource,
-            dataOptions: this.dataOptions,
-            filters: this.filters,
-            highlights: this.highlights,
-            styleOptions: this.styleOptions,
-            drilldownOptions: this.drilldownOptions,
-            title: this.title,
-            description: this.description,
-            highlightSelectionDisabled: this.highlightSelectionDisabled,
-            onBeforeRender: this.beforeRender?.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 }),
-        };
-        return createElement(ChartWidget, props);
-    }
-    /** @internal */
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
-    }
-}
-ChartWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChartWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWidgetComponent, selector: "csdk-chart-widget", inputs: { chartType: "chartType", dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", drilldownOptions: "drilldownOptions", title: "title", description: "description", highlightSelectionDisabled: "highlightSelectionDisabled", beforeRender: "beforeRender" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWidgetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'csdk-chart-widget',
-                    template,
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], chartType: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], drilldownOptions: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], highlightSelectionDisabled: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], dataPointClick: [{
-                type: Output
-            }], dataPointContextMenu: [{
-                type: Output
-            }], dataPointsSelect: [{
-                type: Output
-            }] } });
-
-/**
- * A component representing categorical data with vertical rectangular bars
- * whose heights are proportional to the values that they represent.
- * See [Column Chart](https://docs.sisense.com/main/SisenseLinux/column-chart.htm) for more information.
+ * A component representing categorical data with vertical rectangular bars
+ * whose heights are proportional to the values that they represent.
+ * See [Column Chart](https://docs.sisense.com/main/SisenseLinux/column-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <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, 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-column-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class ColumnChartComponent {
     constructor() {
@@ -817,6 +1087,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * A component representing categorical data with horizontal rectangular bars,
  * whose lengths are proportional to the values that they represent.
  * See [Bar Chart](https://docs.sisense.com/main/SisenseLinux/bar-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-bar-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    /> * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-bar-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class BarChartComponent {
     constructor() {
@@ -900,6 +1220,57 @@ 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.
  * More info on [Sisense Documentation page](https://docs.sisense.com/main/SisenseLinux/area-chart.htm).
+ *
+ * @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';
+
+@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() {
@@ -982,6 +1353,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * A component displaying data as a series of points connected by a line. Used to show trends or changes over time.
  * See [Line Chart](https://docs.sisense.com/main/SisenseLinux/line-chart.htm) for more information.
+ *
+ * @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
  */
 class LineChartComponent {
     constructor() {
@@ -1064,6 +1485,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * A component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
  * See [Indicator](https://docs.sisense.com/main/SisenseLinux/indicator.htm) for more information.
+ *
+ * @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
  */
 class IndicatorChartComponent {
     constructor() {
@@ -1119,6 +1596,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
  *
  * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-scatter-chart
+ *      [dataSet]="scatter.dataSet"
+ *      [dataOptions]="scatter.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';
+
+@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'])];
+  scatter = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      x: DM.Admissions.Room_ID,
+      y: measureFactory.sum(DM.Admissions.Cost_of_admission),
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-scatter-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class ScatterChartComponent {
     constructor() {
@@ -1202,6 +1727,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * A component representing data in a circular graph with the data shown as slices of a whole,
  * with each slice representing a proportion of the total.
  * See [Pie Chart](https://docs.sisense.com/main/SisenseLinux/pie-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-pie-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-pie-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class PieChartComponent {
     constructor() {
@@ -1284,6 +1860,56 @@ 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.
  * See [Funnel Chart](https://docs.sisense.com/main/SisenseLinux/funnel-chart.htm) for more information.
+ *
+ * @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: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-funnel-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class FunnelChartComponent {
     constructor() {
@@ -1366,6 +1992,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * A component comparing multiple categories/variables with a spacial perspective in a radial chart.
  * See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-polar-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-polar-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class PolarChartComponent {
     constructor() {
@@ -1449,6 +2126,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * A component displaying hierarchical data in the form of nested rectangles.
  * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
  * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-treemap-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 type { ChartType } from '@sisense/sdk-ui-angular';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@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-treemap-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class TreemapChartComponent {
     constructor() {
@@ -1532,6 +2260,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * A component displaying hierarchical data in the form of nested slices.
  * This type of chart can be used instead of a pie chart for comparing a large number of categories and sub-categories.
  * See [Sunburst Chart](https://docs.sisense.com/main/SisenseLinux/sunburst-widget.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-sunburst-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-sunburst-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 class SunburstChartComponent {
     constructor() {
@@ -1612,342 +2391,403 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * The Table Widget component extending {@link TableComponent} component to support widget style options.
+ * An Angular component representing data in a way that visually describes the distribution, variability,
+ * and center of a data set along an axis.
+ * See [Boxplot Chart](https://docs.sisense.com/main/SisenseLinux/box-and-whisker-plot.htm) for more information.
  *
- * @internal
+ * @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)"
+ *    /> * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { filterFactory } from '@sisense/sdk-data';
+import type { BoxplotChartDataOptions } from '@sisense/sdk-ui-angular';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  boxplotChart = {
+    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 TableWidgetComponent {
-    constructor(sisenseContextService, themeService) {
-        this.sisenseContextService = sisenseContextService;
-        this.themeService = themeService;
-        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement);
-    }
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement);
-        }
-    }
-    createPreactComponent() {
-        const props = {
-            dataSource: this.dataSource,
-            dataOptions: this.dataOptions,
-            filters: this.filters,
-            styleOptions: this.styleOptions,
-            title: this.title,
-            description: this.description,
-        };
-        return createElement(TableWidget, props);
-    }
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
+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();
+        /** @internal */
+        this.chartType = 'boxplot';
     }
 }
-TableWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-TableWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableWidgetComponent, selector: "csdk-table-widget", inputs: { dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", styleOptions: "styleOptions", title: "title", description: "description" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableWidgetComponent, decorators: [{
+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" }, 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"
+      (dataPointClick)="dataPointClick.emit($event)"
+      (dataPointContextMenu)="dataPointContextMenu.emit($event)"
+      (dataPointsSelect)="dataPointsSelect.emit($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxplotChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-table-widget',
-                    template,
+                    selector: 'csdk-boxplot-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      (dataPointClick)="dataPointClick.emit($event)"
+      (dataPointContextMenu)="dataPointContextMenu.emit($event)"
+      (dataPointsSelect)="dataPointsSelect.emit($event)"
+    />
+  `,
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], dataSource: [{
+        }], propDecorators: { dataSet: [{
                 type: Input
             }], dataOptions: [{
                 type: Input
             }], filters: [{
                 type: Input
-            }], styleOptions: [{
+            }], highlights: [{
                 type: Input
-            }], title: [{
+            }], styleOptions: [{
                 type: Input
-            }], description: [{
+            }], beforeRender: [{
                 type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
             }] } });
 
 /**
- * The Dashboard Widget component, which is a thin wrapper on {@link ChartWidgetComponent},
- * is used to render a widget created in a Sisense Fusion instance.
- *
- * To learn more about using Sisense Fusion Widgets in Compose SDK, see
- * [Sisense Fusion Widgets](https://sisense.dev/guides/sdk/guides/charts/guide-fusion-widgets.html).
+ * An Angular component that allows to visualize geographical data as data points on a map.
+ * See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
  *
+ * @example
+ * ```html
+ *    <csdk-scattermap-chart
+ *      [dataSet]="scattermapChart.dataSet"
+ *      [dataOptions]="scattermapChart.dataOptions"
+ *      [styleOptions]="scattermapChart.styleOptions"
+ *      (dataPointClick)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import type { ScattermapStyleOptions,ScattermapChartDataOptions } from '@sisense/sdk-ui-angular';
+import * as DM from '../../assets/sample-ecommerce';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  scattermapChart = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      geo: [DM.Country.Country],
+      size: measureFactory.sum(DM.Commerce.Cost, 'Size by Cost'),
+      colorBy: {
+        column: measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue'),
+        color: 'green',
+      },
+      details: DM.Category.Category,
+    } as ScattermapChartDataOptions,
+    styleOptions: {
+      markers: {
+        fill: 'hollow-bold',
+      },
+    } as ScattermapStyleOptions,
+  };
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-scattermap-chart-example.png" width="800px" />
+ * @group Charts
  */
-class DashboardWidgetComponent {
-    constructor(sisenseContextService, themeService) {
-        this.sisenseContextService = sisenseContextService;
-        this.themeService = themeService;
-        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    /** @internal */
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement);
-    }
-    /** @internal */
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement);
-        }
-    }
-    /** @internal */
-    createPreactComponent() {
-        const props = {
-            widgetOid: this.widgetOid,
-            dashboardOid: this.dashboardOid,
-            filters: this.filters,
-            highlights: this.highlights,
-            filtersMergeStrategy: this.filtersMergeStrategy,
-            includeDashboardFilters: this.includeDashboardFilters,
-            title: this.title,
-            description: this.description,
-            styleOptions: this.styleOptions,
-            highlightSelectionDisabled: this.highlightSelectionDisabled,
-            drilldownOptions: this.drilldownOptions,
-        };
-        return createElement(DashboardWidget, props);
-    }
-    /** @internal */
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
+class ScattermapChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ScattermapChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /** @internal */
+        this.chartType = 'scattermap';
     }
 }
-DashboardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetComponent, selector: "csdk-dashboard-widget", inputs: { widgetOid: "widgetOid", dashboardOid: "dashboardOid", filters: "filters", highlights: "highlights", filtersMergeStrategy: "filtersMergeStrategy", includeDashboardFilters: "includeDashboardFilters", title: "title", description: "description", styleOptions: "styleOptions", highlightSelectionDisabled: "highlightSelectionDisabled", drilldownOptions: "drilldownOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, decorators: [{
+ScattermapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScattermapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScattermapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ScattermapChartComponent, selector: "csdk-scattermap-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      (dataPointClick)="dataPointClick.emit($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScattermapChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-dashboard-widget',
-                    template,
+                    selector: 'csdk-scattermap-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      (dataPointClick)="dataPointClick.emit($event)"
+    />
+  `,
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], widgetOid: [{
+        }], propDecorators: { dataSet: [{
                 type: Input
-            }], dashboardOid: [{
+            }], dataOptions: [{
                 type: Input
             }], filters: [{
                 type: Input
             }], highlights: [{
                 type: Input
-            }], filtersMergeStrategy: [{
-                type: Input
-            }], includeDashboardFilters: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
             }], styleOptions: [{
                 type: Input
-            }], highlightSelectionDisabled: [{
-                type: Input
-            }], drilldownOptions: [{
-                type: Input
+            }], dataPointClick: [{
+                type: Output
             }] } });
 
 /**
- * Member Filter Tile Component
+ * An Angular component that allows to visualize geographical data as polygons on a map.
+ * See [Areamap Chart](https://docs.sisense.com/main/SisenseLinux/area-map.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-areamap-chart
+ *      [dataSet]="areamapChart.dataSet"
+ *      [dataOptions]="areamapChart.dataOptions"
+ *      [styleOptions]="areamapChart.styleOptions"
+ *      (dataPointClick)="logArguments($event)"
+ *    /> * ```
+ * ```ts
+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);
+  }
+}
+ * ```
+ * <img src="media://angular-areamap-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
-class MemberFilterTileComponent {
-    /**
-     * Constructor for the `MemberFilterTileComponent`.
-     *
-     * @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 AreamapChartComponent {
+    constructor() {
         /**
-         * {@inheritDoc @sisense/sdk-ui!MemberFilterTileProps.onChange}
+         * {@inheritDoc @sisense/sdk-ui!AreamapChartProps.onDataPointClick}
+         *
+         * @category Callbacks
          */
-        this.filterChange = new EventEmitter();
-        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    /**
-     * @internal
-     */
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement);
-    }
-    /**
-     * @internal
-     */
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement);
-        }
-    }
-    createPreactComponent() {
-        const props = {
-            title: this.title,
-            dataSource: this.dataSource,
-            attribute: this.attribute,
-            filter: this.filter,
-            onChange: (...[filter]) => this.filterChange.emit({ filter }),
-        };
-        return createElement(MemberFilterTile, props);
-    }
-    /**
-     * @internal
-     */
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
+        this.dataPointClick = new EventEmitter();
+        /** @internal */
+        this.chartType = 'areamap';
     }
 }
-MemberFilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MemberFilterTileComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-MemberFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MemberFilterTileComponent, selector: "csdk-member-filter-tile", inputs: { title: "title", dataSource: "dataSource", attribute: "attribute", filter: "filter" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MemberFilterTileComponent, decorators: [{
+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" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      (dataPointClick)="dataPointClick.emit($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreamapChartComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-member-filter-tile',
-                    template,
+                    selector: 'csdk-areamap-chart',
+                    template: `
+    <csdk-chart
+      [chartType]="chartType"
+      [dataSet]="dataSet"
+      [dataOptions]="dataOptions"
+      [filters]="filters"
+      [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      (dataPointClick)="dataPointClick.emit($event)"
+    />
+  `,
                 }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], title: [{
+        }], propDecorators: { dataSet: [{
                 type: Input
-            }], dataSource: [{
+            }], dataOptions: [{
                 type: Input
-            }], attribute: [{
+            }], filters: [{
                 type: Input
-            }], filter: [{
+            }], highlights: [{
                 type: Input
-            }], filterChange: [{
+            }], styleOptions: [{
+                type: Input
+            }], dataPointClick: [{
                 type: Output
             }] } });
 
 /**
- * An Angular component designed to add drilldown functionality to any type of chart.
- *
- * It acts as a wrapper around a given chart component, enhancing it with drilldown capabilities
- *
- * The widget offers several features including:
- * - A context menu for initiating drilldown actions (can be provided as a custom component)
- * - Breadcrumbs that not only allow for drilldown selection slicing but also
- * provide an option to clear the selection (can be provided as a custom component)
- * - Filters specifically created for drilldown operation
- * - An option to navigate to the next drilldown dimension
- *
- * When an `initialDimension` is specified, the `drilldownDimension` will automatically inherit its value,
- * even before any points on the chart are selected.
- * This allows for complete control over the chart's dimensions to be handed over to the DrilldownWidget
+ * Pivot Table with and pagination.
  *
  * @example
- * An example of using the `csdk-drilldown-widget` component to plot a `csdk-column-chart`
- * over the Sample Healthcare data source hosted in a Sisense instance:
- * ```ts
- * // Component behavior in .component.ts
- * chart = {
- *   dataOptions: {
- *     category: [DM.Divisions.Divison_name],
- *     value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
- *     breakBy: [],
- *   },
- *   dataPointContextMenu: ({ point, nativeEvent }: { point: any; nativeEvent: MouseEvent }) => {
- *     this.drilldownResult?.onDataPointsSelected?.([point], nativeEvent);
- *     this.drilldownResult?.onContextMenu({
- *       left: nativeEvent.clientX,
- *       top: nativeEvent.clientY,
- *     });
- *   }
- * }
- *
- * drilldownResult?: CustomDrilldownResult;
- *
- * drilldown = {
- *   drilldownDimensions: [DM.Patients.Gender, DM.Admissions.Surgical_Procedure],
- *   initialDimension: DM.Divisions.Divison_name,
- *   drilldownChange: (drilldownResult: CustomDrilldownResult) => {
- *     this.drilldownResult = drilldownResult;
- *     this.chart.dataOptions = {
- *       ...this.chart.dataOptions,
- *       category: [drilldownResult.drilldownDimension]
- *     }
- *   }
- * };
- * ```
  * ```html
- * <!--Component HTML template in .component.html-->
- * <csdk-drilldown-widget
- *   [drilldownDimensions]="drilldown.drilldownDimensions"
- *   [initialDimension]="drilldown.initialDimension"
- *   (drilldownResultChange)="drilldown.drilldownChange($event)"
- * >
- *   <csdk-column-chart
- *     [dataSet]="DM.DataSource"
- *     [dataOptions]="chart.dataOptions"
- *     [filters]="drilldownResult?.drilldownFilters || []"
- *     (dataPointContextMenu)="chart.dataPointContextMenu($event)"
- *   />
- * </csdk-drilldown-widget>
+ *  <csdk-pivot-table
+ *    [dataSet]="pivotTable.dataSet"
+ *    [dataOptions]="pivotTable.dataOptions"
+ *    [filters]="pivotTable.filters"
+ *    [styleOptions]="pivotTable.styleOptions"
+ *  />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-ecommerce';
+import type { PivotTableDataOptions } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+
+  pivotTableDataOptions: PivotTableDataOptions = {
+    rows: [
+      { column: DM.Category.Category, includeSubTotals: true },
+      { column: DM.Commerce.AgeRange, includeSubTotals: true },
+      DM.Commerce.Condition,
+    ],
+    columns: [{ column: DM.Commerce.Gender, includeSubTotals: true }],
+    values: [
+      measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
+      {
+        column: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
+        totalsCalculation: 'sum',
+        dataBars: true,
+      },
+    ],
+    grandTotals: { title: 'Grand Total', rows: true, columns: true },
+  };
+
+  pivotTable = {
+    dataSet: DM.DataSource,
+    dataOptions: this.pivotTableDataOptions,
+    filters: [filterFactory.members(DM.Commerce.Gender, ['Female', 'Male'])],
+    styleOptions: { width: 1400, height: 600, rowsPerPage: 50 },
+  };
+
+}
  * ```
+ * <img src="media://angular-pivot-table-example.png" width="800px" />
+ * @group Data Grids
+ * @alpha
  */
-class DrilldownWidgetComponent {
-    /**
-     * Constructor for the `DrilldownWidgetComponent`.
-     *
-     * @param sisenseContextService - Sisense context service
-     * @param themeService - Theme service
-     */
-    constructor(
-    /**
-     * Sisense context service
-     *
-     * @category Constructor
-     */
-    sisenseContextService, 
-    /**
-     * Theme service
-     *
-     * @category Constructor
-     */
-    themeService) {
+class PivotTableComponent {
+    constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        this.drilldownResultChange = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
         ]);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngAfterViewInit() {
         this.componentAdapter.render(this.preactRef.nativeElement);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngOnChanges() {
         if (this.preactRef) {
             this.componentAdapter.render(this.preactRef.nativeElement);
@@ -1955,103 +2795,91 @@ class DrilldownWidgetComponent {
     }
     createPreactComponent() {
         const props = {
-            drilldownDimensions: this.drilldownDimensions,
-            initialDimension: this.initialDimension,
-            config: {
-                ...this.config,
-                ...(this.config?.breadcrumbsComponent && {
-                    breadcrumbsComponent: createWrapperElementHandler(this.config.breadcrumbsComponent),
-                }),
-                ...(this.config?.contextMenuComponent && {
-                    contextMenuComponent: (contextMenuProps) => createWrapperElement(this.config.contextMenuComponent(contextMenuProps)),
-                }),
-            },
+            dataSet: this.dataSet,
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            styleOptions: this.styleOptions,
         };
-        return createElement(DrilldownWidget, props, (customDrilldownResult) => {
-            const { breadcrumbsComponent } = customDrilldownResult;
-            this.drilldownResultChange.emit({
-                ...customDrilldownResult,
-                ...(breadcrumbsComponent && {
-                    breadcrumbsComponent: { render: createComponentRenderer(breadcrumbsComponent) },
-                }),
-            });
-            return createWrapperElement(this.preactContentRef.nativeElement);
-        });
+        return createElement(PivotTable, props);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngOnDestroy() {
         this.componentAdapter.destroy();
     }
 }
-DrilldownWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-DrilldownWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrilldownWidgetComponent, selector: "csdk-drilldown-widget", inputs: { drilldownDimensions: "drilldownDimensions", initialDimension: "initialDimension", config: "config" }, outputs: { drilldownResultChange: "drilldownResultChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }, { propertyName: "preactContentRef", first: true, predicate: ["preactContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\">\n        <div #preactContent style=\"width: 100%; height: 100%\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownWidgetComponent, decorators: [{
+PivotTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+PivotTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableComponent, selector: "csdk-pivot-table", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", styleOptions: "styleOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-drilldown-widget',
-                    template: templateWithContent,
+                    selector: 'csdk-pivot-table',
+                    template,
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
-            }], preactContentRef: [{
-                type: ViewChild,
-                args: [rootContentId]
-            }], drilldownDimensions: [{
+            }], dataSet: [{
                 type: Input
-            }], initialDimension: [{
+            }], dataOptions: [{
                 type: Input
-            }], config: [{
+            }], filters: [{
+                type: Input
+            }], styleOptions: [{
                 type: Input
-            }], drilldownResultChange: [{
-                type: Output
             }] } });
 
 /**
- * Date Range Filter Tile Component
+ * The Table Widget component extending {@link TableComponent} component to support widget style options.
+ *
+ * @example
+ * ```html
+ *  <csdk-table-widget
+ *    [dataSource]="table.dataSet"
+ *    [dataOptions]="table.dataOptions"
+ *    [filters]="filters"
+ *    [title]="table.title"
+ *    [description]="table.description"
+ *  />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { ChartType } from '@sisense/sdk-ui-angular';
+ * import { filterFactory, measureFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *  selector: 'app-widgets',
+ * templateUrl: './widgets.component.html',
+ * styleUrls: ['./widgets.component.scss'],
+ * })
+ * export class WidgetsComponent {
+ * filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+ *
+ * table = {
+ *    dataSet: DM.DataSource,
+ *    dataOptions: {
+ *      columns: [DM.Admissions.Patient_ID, measureFactory.sum(DM.Admissions.Cost_of_admission)],
+ *    }
+ *    title: 'Widget Title',
+ *    description: 'Widget Description',
+ *  };
+ * }
+ * ```
+ * <img src="media://angular-table-widget-example.png" width="800px" />
+ * @internal
  */
-class DateRangeFilterTileComponent {
-    /**
-     * Constructor for the `DateRangeFilterTileComponent`.
-     *
-     * @param sisenseContextService - Sisense context service
-     * @param themeService - Theme service
-     */
-    constructor(
-    /**
-     * Sisense context service
-     *
-     * @category Constructor
-     */
-    sisenseContextService, 
-    /**
-     * Theme service
-     *
-     * @category Constructor
-     */
-    themeService) {
+class TableWidgetComponent {
+    constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        /**
-         * {@inheritDoc @sisense/sdk-ui!DateRangeFilterTileProps.onChange}
-         */
-        this.filterChange = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
         ]);
     }
-    /**
-     * @internal
-     */
     ngAfterViewInit() {
         this.componentAdapter.render(this.preactRef.nativeElement);
     }
-    /**
-     * @internal
-     */
     ngOnChanges() {
         if (this.preactRef) {
             this.componentAdapter.render(this.preactRef.nativeElement);
@@ -2059,149 +2887,224 @@ class DateRangeFilterTileComponent {
     }
     createPreactComponent() {
         const props = {
-            title: this.title,
-            attribute: this.attribute,
             dataSource: this.dataSource,
-            filter: this.filter,
-            earliestDate: this.earliestDate,
-            lastDate: this.lastDate,
-            onChange: (...[filter]) => this.filterChange.emit({ filter }),
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            styleOptions: this.styleOptions,
+            title: this.title,
+            description: this.description,
         };
-        return createElement(DateRangeFilterTile, props);
+        return createElement(TableWidget, props);
     }
-    /**
-     * @internal
-     */
     ngOnDestroy() {
         this.componentAdapter.destroy();
     }
 }
-DateRangeFilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeFilterTileComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeFilterTileComponent, selector: "csdk-date-range-filter-tile", inputs: { title: "title", attribute: "attribute", dataSource: "dataSource", filter: "filter", earliestDate: "earliestDate", lastDate: "lastDate" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeFilterTileComponent, decorators: [{
+TableWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+TableWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableWidgetComponent, selector: "csdk-table-widget", inputs: { dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", styleOptions: "styleOptions", title: "title", description: "description" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableWidgetComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-date-range-filter-tile',
+                    selector: 'csdk-table-widget',
                     template,
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
-            }], title: [{
+            }], dataSource: [{
                 type: Input
-            }], attribute: [{
+            }], dataOptions: [{
                 type: Input
-            }], dataSource: [{
+            }], filters: [{
                 type: Input
-            }], filter: [{
+            }], styleOptions: [{
                 type: Input
-            }], earliestDate: [{
+            }], title: [{
                 type: Input
-            }], lastDate: [{
+            }], description: [{
                 type: Input
-            }], filterChange: [{
-                type: Output
             }] } });
 
 /**
- * Drilldown Breadcrumbs Component
+ * The Dashboard Widget component, which is a thin wrapper on {@link ChartWidgetComponent},
+ * is used to render a widget created in a Sisense Fusion instance.
+ *
+ * To learn more about using Sisense Fusion Widgets in Compose SDK, see
+ * [Sisense Fusion Widgets](https://sisense.dev/guides/sdk/guides/charts/guide-fusion-widgets.html).
+ *
+ * @example
+ * ```html
+ * <csdk-dashboard-widget
+ *    [widgetOid]="widgetOid"
+ *    [dashboardOid]="dashboardOid"
+ *    [includeDashboardFilters]="true"
+ * />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { ChartType } from '@sisense/sdk-ui-angular';
+ * import { filterFactory, measureFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *  selector: 'app-widgets',
+ * templateUrl: './widgets.component.html',
+ * styleUrls: ['./widgets.component.scss'],
+ * })
+ * export class WidgetsComponent {
+ *  widgetOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
+ *  dashboardOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
+ * ```
+ * @group Fusion Assets
  */
-class DrilldownBreadcrumbsComponent {
-    /**
-     * Constructor for the `DrilldownBreadcrumbsComponent`.
-     *
-     * @param sisenseContextService - Sisense context service
-     * @param themeService - Theme service
-     */
-    constructor(
-    /**
-     * Sisense context service
-     *
-     * @category Constructor
-     */
-    sisenseContextService, 
-    /**
-     * Theme service
-     *
-     * @category Constructor
-     */
-    themeService) {
+class DashboardWidgetComponent {
+    constructor(sisenseContextService, themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        /**
-         * {@inheritDoc @sisense/sdk-ui!DrilldownBreadcrumbsProps.clearDrilldownSelections}
-         *
-         * @category Widget
-         */
-        this.drilldownSelectionsClear = new EventEmitter();
-        /**
-         * {@inheritDoc @sisense/sdk-ui!DrilldownBreadcrumbsProps.sliceDrilldownSelections}
-         *
-         * @category Widget
-         */
-        this.drilldownSelectionsSlice = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
         ]);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngAfterViewInit() {
         this.componentAdapter.render(this.preactRef.nativeElement);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngOnChanges() {
         if (this.preactRef) {
             this.componentAdapter.render(this.preactRef.nativeElement);
         }
     }
+    /** @internal */
     createPreactComponent() {
         const props = {
-            filtersDisplayValues: this.filtersDisplayValues,
-            currentDimension: this.currentDimension,
-            clearDrilldownSelections: () => this.drilldownSelectionsClear.emit(),
-            sliceDrilldownSelections: (i) => this.drilldownSelectionsSlice.emit(i),
+            widgetOid: this.widgetOid,
+            dashboardOid: this.dashboardOid,
+            filters: this.filters,
+            highlights: this.highlights,
+            filtersMergeStrategy: this.filtersMergeStrategy,
+            includeDashboardFilters: this.includeDashboardFilters,
+            title: this.title,
+            description: this.description,
+            styleOptions: this.styleOptions,
+            highlightSelectionDisabled: this.highlightSelectionDisabled,
+            drilldownOptions: this.drilldownOptions,
         };
-        return createElement(DrilldownBreadcrumbs, props);
+        return createElement(DashboardWidget, props);
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     ngOnDestroy() {
         this.componentAdapter.destroy();
     }
 }
-DrilldownBreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownBreadcrumbsComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-DrilldownBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrilldownBreadcrumbsComponent, selector: "csdk-drilldown-breadcrumbs", inputs: { filtersDisplayValues: "filtersDisplayValues", currentDimension: "currentDimension" }, outputs: { drilldownSelectionsClear: "drilldownSelectionsClear", drilldownSelectionsSlice: "drilldownSelectionsSlice" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownBreadcrumbsComponent, decorators: [{
+DashboardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetComponent, selector: "csdk-dashboard-widget", inputs: { widgetOid: "widgetOid", dashboardOid: "dashboardOid", filters: "filters", highlights: "highlights", filtersMergeStrategy: "filtersMergeStrategy", includeDashboardFilters: "includeDashboardFilters", title: "title", description: "description", styleOptions: "styleOptions", highlightSelectionDisabled: "highlightSelectionDisabled", drilldownOptions: "drilldownOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-drilldown-breadcrumbs',
+                    selector: 'csdk-dashboard-widget',
                     template,
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
-            }], filtersDisplayValues: [{
+            }], widgetOid: [{
                 type: Input
-            }], currentDimension: [{
+            }], dashboardOid: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], filtersMergeStrategy: [{
+                type: Input
+            }], includeDashboardFilters: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], highlightSelectionDisabled: [{
+                type: Input
+            }], drilldownOptions: [{
                 type: Input
-            }], drilldownSelectionsClear: [{
-                type: Output
-            }], drilldownSelectionsSlice: [{
-                type: Output
             }] } });
 
 /**
- * Context Menu Component
+ * An Angular component designed to add drilldown functionality to any type of chart.
+ *
+ * It acts as a wrapper around a given chart component, enhancing it with drilldown capabilities
+ *
+ * The widget offers several features including:
+ * - A context menu for initiating drilldown actions (can be provided as a custom component)
+ * - Breadcrumbs that not only allow for drilldown selection slicing but also
+ * provide an option to clear the selection (can be provided as a custom component)
+ * - Filters specifically created for drilldown operation
+ * - An option to navigate to the next drilldown dimension
+ *
+ * When an `initialDimension` is specified, the `drilldownDimension` will automatically inherit its value,
+ * even before any points on the chart are selected.
+ * This allows for complete control over the chart's dimensions to be handed over to the DrilldownWidget
+ *
+ * @example
+ * An example of using the `csdk-drilldown-widget` component to plot a `csdk-column-chart`
+ * over the Sample Healthcare data source hosted in a Sisense instance:
+ * ```ts
+ * // Component behavior in .component.ts
+ * chart = {
+ *   dataOptions: {
+ *     category: [DM.Divisions.Divison_name],
+ *     value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+ *     breakBy: [],
+ *   },
+ *   dataPointContextMenu: ({ point, nativeEvent }: { point: any; nativeEvent: MouseEvent }) => {
+ *     this.drilldownResult?.onDataPointsSelected?.([point], nativeEvent);
+ *     this.drilldownResult?.onContextMenu({
+ *       left: nativeEvent.clientX,
+ *       top: nativeEvent.clientY,
+ *     });
+ *   }
+ * }
+ *
+ * drilldownResult?: CustomDrilldownResult;
+ *
+ * drilldown = {
+ *   drilldownDimensions: [DM.Patients.Gender, DM.Admissions.Surgical_Procedure],
+ *   initialDimension: DM.Divisions.Divison_name,
+ *   drilldownChange: (drilldownResult: CustomDrilldownResult) => {
+ *     this.drilldownResult = drilldownResult;
+ *     this.chart.dataOptions = {
+ *       ...this.chart.dataOptions,
+ *       category: [drilldownResult.drilldownDimension]
+ *     }
+ *   }
+ * };
+ * ```
+ * ```html
+ * <!--Component HTML template in .component.html-->
+ * <csdk-drilldown-widget
+ *   [drilldownDimensions]="drilldown.drilldownDimensions"
+ *   [initialDimension]="drilldown.initialDimension"
+ *   (drilldownResultChange)="drilldown.drilldownChange($event)"
+ * >
+ *   <csdk-column-chart
+ *     [dataSet]="DM.DataSource"
+ *     [dataOptions]="chart.dataOptions"
+ *     [filters]="drilldownResult?.drilldownFilters || []"
+ *     (dataPointContextMenu)="chart.dataPointContextMenu($event)"
+ *   />
+ * </csdk-drilldown-widget>
+ * ```
+ * <img src="media://angular-drilldown-widget-example.png" width="800px" />
+ *
+ * @group Drilldown
  */
-class ContextMenuComponent {
+class DrilldownWidgetComponent {
     /**
-     * Constructor for the `ContextMenuComponent`.
+     * Constructor for the `DrilldownWidgetComponent`.
      *
      * @param sisenseContextService - Sisense context service
      * @param themeService - Theme service
@@ -2221,10 +3124,7 @@ class ContextMenuComponent {
     themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        /**
-         * {@inheritDoc @sisense/sdk-ui!ContextMenuProps.closeContextMenu}
-         */
-        this.contextMenuClose = new EventEmitter();
+        this.drilldownResultChange = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
@@ -2246,11 +3146,28 @@ class ContextMenuComponent {
     }
     createPreactComponent() {
         const props = {
-            position: this.position,
-            itemSections: this.itemSections,
-            closeContextMenu: () => this.contextMenuClose.emit(),
+            drilldownDimensions: this.drilldownDimensions,
+            initialDimension: this.initialDimension,
+            config: {
+                ...this.config,
+                ...(this.config?.breadcrumbsComponent && {
+                    breadcrumbsComponent: createWrapperElementHandler(this.config.breadcrumbsComponent),
+                }),
+                ...(this.config?.contextMenuComponent && {
+                    contextMenuComponent: (contextMenuProps) => createWrapperElement(this.config.contextMenuComponent(contextMenuProps)),
+                }),
+            },
         };
-        return createElement(ContextMenu, props, createWrapperElement(this.preactContentRef.nativeElement));
+        return createElement(DrilldownWidget, props, (customDrilldownResult) => {
+            const { breadcrumbsComponent } = customDrilldownResult;
+            this.drilldownResultChange.emit({
+                ...customDrilldownResult,
+                ...(breadcrumbsComponent && {
+                    breadcrumbsComponent: { render: createComponentRenderer(breadcrumbsComponent) },
+                }),
+            });
+            return createWrapperElement(this.preactContentRef.nativeElement);
+        });
     }
     /**
      * @internal
@@ -2259,12 +3176,12 @@ class ContextMenuComponent {
         this.componentAdapter.destroy();
     }
 }
-ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContextMenuComponent, selector: "csdk-context-menu", inputs: { position: "position", itemSections: "itemSections" }, outputs: { contextMenuClose: "contextMenuClose" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }, { propertyName: "preactContentRef", first: true, predicate: ["preactContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\">\n        <div #preactContent style=\"width: 100%; height: 100%\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, decorators: [{
+DrilldownWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+DrilldownWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrilldownWidgetComponent, selector: "csdk-drilldown-widget", inputs: { drilldownDimensions: "drilldownDimensions", initialDimension: "initialDimension", config: "config" }, outputs: { drilldownResultChange: "drilldownResultChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }, { propertyName: "preactContentRef", first: true, predicate: ["preactContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\">\n        <div #preactContent style=\"width: 100%; height: 100%\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownWidgetComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-context-menu',
+                    selector: 'csdk-drilldown-widget',
                     template: templateWithContent,
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
@@ -2273,78 +3190,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], preactContentRef: [{
                 type: ViewChild,
                 args: [rootContentId]
-            }], position: [{
+            }], drilldownDimensions: [{
                 type: Input
-            }], itemSections: [{
+            }], initialDimension: [{
                 type: Input
-            }], contextMenuClose: [{
+            }], config: [{
+                type: Input
+            }], drilldownResultChange: [{
                 type: Output
             }] } });
 
 /**
- * An Angular component representing data in a way that visually describes the distribution, variability,
- * and center of a data set along an axis.
- * See [Boxplot Chart](https://docs.sisense.com/main/SisenseLinux/box-and-whisker-plot.htm) for more information.
+ * The Chart Widget component extending {@link ChartComponent} to support widget style options.
+ *
+ * @example
+ * ```html
+ * <csdk-chart-widget
+ *   [chartType]="chartWidget.chartType"
+ *   [dataSource]="chartWidget.dataSource"
+ *   [dataOptions]="chartWidget.dataOptions"
+ *   [highlights]="filters"
+ *   [title]="chartWidget.title"
+ *   [description]="chartWidget.description"
+ *   [beforeRender]="onBeforeRender"
+ *   (dataPointClick)="logArguments($event)"
+ *   (dataPointContextMenu)="logArguments($event)"
+ *   (dataPointsSelect)="logArguments($event)"
+ * />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { ChartType } from '@sisense/sdk-ui-angular';
+ * import { filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-widgets',
+ *   templateUrl: './widgets.component.html',
+ *   styleUrls: ['./widgets.component.scss'],
+ * })
+ * export class WidgetsComponent {
+ *   filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+ *   chartWidget = {
+ *     chartType: 'column' as ChartType,
+ *     dataSource: DM.DataSource,
+ *     dataOptions: {
+ *       category: [DM.Divisions.Divison_name],
+ *       value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+ *       breakBy: [],
+ *     },
+ *     title: 'Chart Title',
+ *     description: 'Chart Description',
+ *   };
+ *  logArguments(...args: any[]) {
+ *   console.log(args);
+ * }
+ *
+ * onBeforeRender(options: any) {
+ *   console.log('beforeRender');
+ *   console.log(options);
+ *   return options;
+ * }
+ *
+ * }
+ * ```
+ * <img src="media://angular-chart-widget-example.png" width="800px" />
+ *
+ * @group Chart Utilities
  */
-class BoxplotChartComponent {
-    constructor() {
+class ChartWidgetComponent {
+    constructor(sisenseContextService, themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
         /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointClick}
          *
          * @category Callbacks
          */
         this.dataPointClick = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointContextMenu}
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointContextMenu}
          *
          * @category Callbacks
          */
         this.dataPointContextMenu = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!BoxplotChartProps.onDataPointsSelected}
+         * {@inheritDoc @sisense/sdk-ui!ChartProps.onDataPointsSelected}
          *
          * @category Callbacks
          */
         this.dataPointsSelect = new EventEmitter();
-        /** @internal */
-        this.chartType = 'boxplot';
+        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /** @internal */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement);
+    }
+    /** @internal */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement);
+        }
+    }
+    createPreactComponent() {
+        const props = {
+            chartType: this.chartType,
+            dataSource: this.dataSource,
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            highlights: this.highlights,
+            styleOptions: this.styleOptions,
+            drilldownOptions: this.drilldownOptions,
+            title: this.title,
+            description: this.description,
+            highlightSelectionDisabled: this.highlightSelectionDisabled,
+            onBeforeRender: this.beforeRender?.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 }),
+        };
+        return createElement(ChartWidget, props);
+    }
+    /** @internal */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
     }
 }
-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" }, 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"
-      (dataPointClick)="dataPointClick.emit($event)"
-      (dataPointContextMenu)="dataPointContextMenu.emit($event)"
-      (dataPointsSelect)="dataPointsSelect.emit($event)"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxplotChartComponent, decorators: [{
+ChartWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWidgetComponent, selector: "csdk-chart-widget", inputs: { chartType: "chartType", dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", drilldownOptions: "drilldownOptions", title: "title", description: "description", highlightSelectionDisabled: "highlightSelectionDisabled", beforeRender: "beforeRender" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWidgetComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-boxplot-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      [beforeRender]="beforeRender"
-      (dataPointClick)="dataPointClick.emit($event)"
-      (dataPointContextMenu)="dataPointContextMenu.emit($event)"
-      (dataPointsSelect)="dataPointsSelect.emit($event)"
-    />
-  `,
+                    selector: 'csdk-chart-widget',
+                    template,
                 }]
-        }], propDecorators: { dataSet: [{
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], chartType: [{
+                type: Input
+            }], dataSource: [{
                 type: Input
             }], dataOptions: [{
                 type: Input
@@ -2354,6 +3342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], styleOptions: [{
                 type: Input
+            }], drilldownOptions: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], highlightSelectionDisabled: [{
+                type: Input
             }], beforeRender: [{
                 type: Input
             }], dataPointClick: [{
@@ -2365,140 +3361,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * An Angular component that allows to visualize geographical data as data points on a map.
- * See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
+ * Drilldown Breadcrumbs Component
+ *
+ * @group Drilldown
  */
-class ScattermapChartComponent {
-    constructor() {
+class DrilldownBreadcrumbsComponent {
+    /**
+     * Constructor for the `DrilldownBreadcrumbsComponent`.
+     *
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
+     */
+    constructor(
+    /**
+     * Sisense context service
+     *
+     * @category Constructor
+     */
+    sisenseContextService, 
+    /**
+     * Theme service
+     *
+     * @category Constructor
+     */
+    themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
         /**
-         * {@inheritDoc @sisense/sdk-ui!ScattermapChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!DrilldownBreadcrumbsProps.clearDrilldownSelections}
          *
-         * @category Callbacks
+         * @category Widget
          */
-        this.dataPointClick = new EventEmitter();
-        /** @internal */
-        this.chartType = 'scattermap';
-    }
-}
-ScattermapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScattermapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScattermapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ScattermapChartComponent, selector: "csdk-scattermap-chart", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      (dataPointClick)="dataPointClick.emit($event)"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScattermapChartComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'csdk-scattermap-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      (dataPointClick)="dataPointClick.emit($event)"
-    />
-  `,
-                }]
-        }], propDecorators: { dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], dataPointClick: [{
-                type: Output
-            }] } });
-
-/**
- * An Angular component that allows to visualize geographical data as polygons on a map.
- * See [Areamap Chart](https://docs.sisense.com/main/SisenseLinux/area-map.htm) for more information.
- */
-class AreamapChartComponent {
-    constructor() {
+        this.drilldownSelectionsClear = new EventEmitter();
         /**
-         * {@inheritDoc @sisense/sdk-ui!AreamapChartProps.onDataPointClick}
+         * {@inheritDoc @sisense/sdk-ui!DrilldownBreadcrumbsProps.sliceDrilldownSelections}
          *
-         * @category Callbacks
+         * @category Widget
          */
-        this.dataPointClick = new EventEmitter();
-        /** @internal */
-        this.chartType = 'areamap';
+        this.drilldownSelectionsSlice = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /**
+     * @internal
+     */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement);
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement);
+        }
+    }
+    createPreactComponent() {
+        const props = {
+            filtersDisplayValues: this.filtersDisplayValues,
+            currentDimension: this.currentDimension,
+            clearDrilldownSelections: () => this.drilldownSelectionsClear.emit(),
+            sliceDrilldownSelections: (i) => this.drilldownSelectionsSlice.emit(i),
+        };
+        return createElement(DrilldownBreadcrumbs, props);
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
     }
 }
-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" }, outputs: { dataPointClick: "dataPointClick" }, ngImport: i0, template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      (dataPointClick)="dataPointClick.emit($event)"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartComponent, selector: "csdk-chart", inputs: ["chartType", "dataSet", "dataOptions", "filters", "highlights", "styleOptions", "beforeRender"], outputs: ["dataPointClick", "dataPointContextMenu", "dataPointsSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AreamapChartComponent, decorators: [{
+DrilldownBreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownBreadcrumbsComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+DrilldownBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrilldownBreadcrumbsComponent, selector: "csdk-drilldown-breadcrumbs", inputs: { filtersDisplayValues: "filtersDisplayValues", currentDimension: "currentDimension" }, outputs: { drilldownSelectionsClear: "drilldownSelectionsClear", drilldownSelectionsSlice: "drilldownSelectionsSlice" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrilldownBreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-areamap-chart',
-                    template: `
-    <csdk-chart
-      [chartType]="chartType"
-      [dataSet]="dataSet"
-      [dataOptions]="dataOptions"
-      [filters]="filters"
-      [highlights]="highlights"
-      [styleOptions]="styleOptions"
-      (dataPointClick)="dataPointClick.emit($event)"
-    />
-  `,
+                    selector: 'csdk-drilldown-breadcrumbs',
+                    template,
                 }]
-        }], propDecorators: { dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], filtersDisplayValues: [{
                 type: Input
-            }], styleOptions: [{
+            }], currentDimension: [{
                 type: Input
-            }], dataPointClick: [{
+            }], drilldownSelectionsClear: [{
+                type: Output
+            }], drilldownSelectionsSlice: [{
                 type: Output
             }] } });
 
 /**
- * Pivot Table with and pagination.
+ * Context Menu Component
  *
- * @alpha
+ * @group Drilldown
  */
-class PivotTableComponent {
-    constructor(sisenseContextService, themeService) {
+class ContextMenuComponent {
+    /**
+     * Constructor for the `ContextMenuComponent`.
+     *
+     * @param sisenseContextService - Sisense context service
+     * @param themeService - Theme service
+     */
+    constructor(
+    /**
+     * Sisense context service
+     *
+     * @category Constructor
+     */
+    sisenseContextService, 
+    /**
+     * Theme service
+     *
+     * @category Constructor
+     */
+    themeService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ContextMenuProps.closeContextMenu}
+         */
+        this.contextMenuClose = new EventEmitter();
         this.componentAdapter = new ComponentAdapter(() => this.createPreactComponent(), [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
         ]);
     }
-    /** @internal */
+    /**
+     * @internal
+     */
     ngAfterViewInit() {
         this.componentAdapter.render(this.preactRef.nativeElement);
     }
-    /** @internal */
+    /**
+     * @internal
+     */
     ngOnChanges() {
         if (this.preactRef) {
             this.componentAdapter.render(this.preactRef.nativeElement);
@@ -2506,37 +3507,39 @@ class PivotTableComponent {
     }
     createPreactComponent() {
         const props = {
-            dataSet: this.dataSet,
-            dataOptions: this.dataOptions,
-            filters: this.filters,
-            styleOptions: this.styleOptions,
+            position: this.position,
+            itemSections: this.itemSections,
+            closeContextMenu: () => this.contextMenuClose.emit(),
         };
-        return createElement(PivotTable, props);
+        return createElement(ContextMenu, props, createWrapperElement(this.preactContentRef.nativeElement));
     }
-    /** @internal */
+    /**
+     * @internal
+     */
     ngOnDestroy() {
         this.componentAdapter.destroy();
     }
 }
-PivotTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-PivotTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotTableComponent, selector: "csdk-pivot-table", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", styleOptions: "styleOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotTableComponent, decorators: [{
+ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContextMenuComponent, selector: "csdk-context-menu", inputs: { position: "position", itemSections: "itemSections" }, outputs: { contextMenuClose: "contextMenuClose" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }, { propertyName: "preactContentRef", first: true, predicate: ["preactContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\">\n        <div #preactContent style=\"width: 100%; height: 100%\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'csdk-pivot-table',
-                    template,
+                    selector: 'csdk-context-menu',
+                    template: templateWithContent,
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
-            }], dataSet: [{
-                type: Input
-            }], dataOptions: [{
-                type: Input
-            }], filters: [{
+            }], preactContentRef: [{
+                type: ViewChild,
+                args: [rootContentId]
+            }], position: [{
                 type: Input
-            }], styleOptions: [{
+            }], itemSections: [{
                 type: Input
+            }], contextMenuClose: [{
+                type: Output
             }] } });
 
 /**
@@ -2564,6 +3567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *   bootstrap: [AppComponent],
  * })
  * ```
+ *
+ * @group Contexts
  */
 class SdkUiModule {
 }
@@ -2692,6 +3697,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  */
 /**
  * @packageDocumentation
+ * @groupDescription Charts
+ * Angular components for charts
+ * @groupDescription Fusion Assets
+ * Fusion Dashboards, Widgets, Queries, and Formulas
+ * @groupDescription Interfaces
+ * TypeScript interfaces for components and services listed above
+ * @groupDescription Type Aliases
+ * TypeScript type aliases for components and services listed above
  * @beta
  */