@sisense/sdk-ui-angular 0.14.0 → 0.15.0

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

@@ -1,12 +1,24 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Input, Output, InjectionToken, Injectable, Inject, Optional, NgModule } from '@angular/core';
-import { ComponentAdapter, createElement, BasicMemberFilterTile, createContextProviderRenderer, CustomThemeProvider, CustomSisenseContextProvider, createClientApplication, getDefaultThemeSettings, getThemeSettingsByOid, Chart, Table, ChartWidget, TableWidget, DashboardWidget, executeQuery, executeQueryByWidgetId } from '@sisense/sdk-ui-preact';
+import { EventEmitter, Component, ViewChild, Input, Output, InjectionToken, Injectable, Inject, NgModule, Optional } from '@angular/core';
+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 } from '@sisense/sdk-ui-preact';
 import { CommonModule } from '@angular/common';
 import { map, BehaviorSubject } from 'rxjs';
+import { __decorate } from 'tslib';
 import merge from 'ts-deepmerge';
+import { trackProductEvent } from '@sisense/sdk-tracking';
 
 const rootId = 'preact';
-const template = `<div #${rootId} style="width: 100%; height: 100%"></div>`;
+const rootContentId = 'preactContent';
+const template = `
+    <div #${rootId} style="width: 100%; height: 100%"></div>
+`;
+const templateWithContent = `
+    <div #${rootId} style="width: 100%; height: 100%">
+        <div #${rootContentId} style="width: 100%; height: 100%">
+            <ng-content></ng-content>
+        </div>
+    </div>
+`;
 
 /**
  * Basic Member Filter Tile Component
@@ -44,7 +56,7 @@ class BasicMemberFilterTileComponent {
     }
 }
 BasicMemberFilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BasicMemberFilterTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BasicMemberFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BasicMemberFilterTileComponent, selector: "csdk-basic-member-filter-tile", inputs: { title: "title", allMembers: "allMembers", initialSelectedMembers: "initialSelectedMembers", maxAllowedMembers: "maxAllowedMembers" }, outputs: { selectedMembersUpdated: "selectedMembersUpdated" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+BasicMemberFilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BasicMemberFilterTileComponent, selector: "csdk-basic-member-filter-tile", inputs: { title: "title", allMembers: "allMembers", initialSelectedMembers: "initialSelectedMembers", maxAllowedMembers: "maxAllowedMembers" }, outputs: { selectedMembersUpdated: "selectedMembersUpdated" }, 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: BasicMemberFilterTileComponent, decorators: [{
             type: Component,
             args: [{
@@ -149,6 +161,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [SISENSE_CONTEXT_CONFIG_TOKEN]
                 }] }]; } });
 
+let QueryService = class QueryService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Executes a data query.
+     *
+     * @param params - Query parameters
+     * return Query result
+     */
+    async executeQuery(params) {
+        const { dataSource, dimensions, measures, filters, highlights, count, offset, onBeforeQuery } = params;
+        const app = await this.sisenseContextService.getApp();
+        const data = await executeQuery({ dataSource, dimensions, measures, filters, highlights, count, offset }, app, { onBeforeQuery });
+        return { data };
+    }
+    /**
+     * Executes a data query extracted from an existing widget in the Sisense instance.
+     *
+     * @param params - Parameters to identify the target widget
+     * @returns Query result
+     */
+    async executeQueryByWidgetId(params) {
+        const app = await this.sisenseContextService.getApp();
+        return executeQueryByWidgetId({
+            ...params,
+            app,
+        });
+    }
+};
+QueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+QueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, providedIn: 'root' });
+QueryService = __decorate([
+    TrackableService(['executeQuery', 'executeQueryByWidgetId'])
+], QueryService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+let DashboardService = class DashboardService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Retrieves an existing dashboard model from the Sisense instance.
+     *
+     * @param dashboardOid - Identifier of the dashboard
+     * @param options - Advanced configuration options
+     * @returns Dashboard model
+     */
+    async getDashboardModel(dashboardOid, options) {
+        const app = await this.sisenseContextService.getApp();
+        return getDashboardModel(app.httpClient, dashboardOid, options);
+    }
+    /**
+     * Retrieves existing dashboard models from the Sisense instance.
+     *
+     * @param options - Advanced configuration options
+     * @returns Dashboard models array
+     */
+    async getDashboardModels(options) {
+        const app = await this.sisenseContextService.getApp();
+        return getDashboardModels(app.httpClient, options);
+    }
+};
+DashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, providedIn: 'root' });
+DashboardService = __decorate([
+    TrackableService(['getDashboardModel', 'getDashboardModels'])
+], DashboardService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+class DecoratorsModule {
+    constructor(sisenseContextService) {
+        DecoratorsModule.sisenseContextService = sisenseContextService;
+    }
+}
+DecoratorsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.NgModule });
+DecoratorsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
+DecoratorsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecoratorsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    exports: [],
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
+var packageVersion = '0.15.0';
+
+function Trackable(target, propertyKey, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        track('sdkAngularServiceMethodExecuted', propertyKey);
+        return originalMethod.apply(this, args);
+    };
+    return descriptor;
+}
+function TrackableService(trackableMethods) {
+    return function (ServiceClass) {
+        trackableMethods.forEach((methodName) => {
+            // eslint-disable-next-line security/detect-object-injection
+            const original = ServiceClass.prototype[methodName];
+            // eslint-disable-next-line security/detect-object-injection
+            ServiceClass.prototype[methodName] = function (...params) {
+                track('sdkAngularServiceMethodExecuted', `${ServiceClass.name}.${methodName}`);
+                return original.apply(this, params);
+            };
+        });
+    };
+}
+async function track(action, methodName) {
+    try {
+        const { enableTracking } = DecoratorsModule.sisenseContextService.getConfig();
+        const app = await DecoratorsModule.sisenseContextService.getApp();
+        if (app?.httpClient) {
+            const payload = {
+                packageName: 'sdk-ui-angular',
+                packageVersion,
+                methodName,
+            };
+            void trackProductEvent(action, payload, app.httpClient, !enableTracking).catch((e) => console.warn(`An error occurred when sending the ${action} event`, e));
+        }
+    }
+    catch (e) {
+        console.warn('tracking error', e);
+    }
+}
+
 /**
  * Token used to inject {@link ThemeConfig} into your application
  *
@@ -183,7 +332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 const THEME_CONFIG_TOKEN = new InjectionToken('theme configuration');
-class ThemeService {
+let ThemeService = class ThemeService {
     constructor(sisenseContextService, themeConfig) {
         this.sisenseContextService = sisenseContextService;
         this.themeSettings$ = new BehaviorSubject(getDefaultThemeSettings());
@@ -194,7 +343,7 @@ class ThemeService {
         // apply system theme settings first
         await this.applyThemeSettings(app.settings.serverThemeSettings);
         if (theme) {
-            await this.applyThemeSettings(theme);
+            await this.updateThemeSettings(theme);
         }
     }
     async applyThemeSettings(theme) {
@@ -218,9 +367,12 @@ class ThemeService {
     async updateThemeSettings(theme) {
         await this.applyThemeSettings(theme);
     }
-}
+};
 ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, deps: [{ token: SisenseContextService }, { token: THEME_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, providedIn: 'root' });
+ThemeService = __decorate([
+    TrackableService(['updateThemeSettings'])
+], ThemeService);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
@@ -363,7 +515,7 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, selector: "csdk-chart", inputs: { chartType: "chartType", dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender" }, outputs: { dataPointClick: "dataPointClick", dataPointContextMenu: "dataPointContextMenu", dataPointsSelect: "dataPointsSelect" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, selector: "csdk-chart", inputs: { chartType: "chartType", dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", beforeRender: "beforeRender" }, 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: ChartComponent, decorators: [{
             type: Component,
             args: [{
@@ -432,7 +584,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "csdk-table", inputs: { dataSet: "dataSet", dataOptions: "dataOptions", filters: "filters", styleOptions: "styleOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "csdk-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: TableComponent, decorators: [{
             type: Component,
             args: [{
@@ -518,7 +670,7 @@ class ChartWidgetComponent {
     }
 }
 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", widgetStyleOptions: "widgetStyleOptions", 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: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+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", widgetStyleOptions: "widgetStyleOptions", 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: [{
@@ -597,6 +749,7 @@ ColumnChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -614,6 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -678,6 +832,7 @@ BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -695,6 +850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -759,6 +915,7 @@ AreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -776,6 +933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -839,6 +997,7 @@ LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -856,6 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -901,6 +1061,7 @@ IndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
     />
   `, 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: IndicatorChartComponent, decorators: [{
@@ -914,6 +1075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
     />
   `,
                 }]
@@ -972,6 +1134,7 @@ ScatterChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -989,6 +1152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1053,6 +1217,7 @@ PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1070,6 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1133,6 +1299,7 @@ FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1150,6 +1317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1213,6 +1381,7 @@ PolarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1230,6 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1294,6 +1464,7 @@ TreemapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
       [beforeRender]="beforeRender"
       (dataPointClick)="dataPointClick.emit($event)"
       (dataPointContextMenu)="dataPointContextMenu.emit($event)"
@@ -1311,6 +1482,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
+      [beforeRender]="beforeRender"
+      (dataPointClick)="dataPointClick.emit($event)"
+      (dataPointContextMenu)="dataPointContextMenu.emit($event)"
+      (dataPointsSelect)="dataPointsSelect.emit($event)"
+    />
+  `,
+                }]
+        }], propDecorators: { dataSet: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], beforeRender: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
+            }] } });
+
+/**
+ * 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.
+ */
+class SunburstChartComponent {
+    constructor() {
+        /**
+         * {@inheritDoc @sisense/sdk-ui!SunburstChartProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!SunburstChartProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!SunburstChartProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        /** @internal */
+        this.chartType = 'sunburst';
+    }
+}
+SunburstChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SunburstChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SunburstChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SunburstChartComponent, selector: "csdk-sunburst-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: SunburstChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-sunburst-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)"
@@ -1377,7 +1632,7 @@ class TableWidgetComponent {
     }
 }
 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", widgetStyleOptions: "widgetStyleOptions", title: "title", description: "description" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+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", widgetStyleOptions: "widgetStyleOptions", 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: [{
@@ -1434,10 +1689,12 @@ class DashboardWidgetComponent {
             filters: this.filters,
             highlights: this.highlights,
             filtersMergeStrategy: this.filtersMergeStrategy,
+            includeDashboardFilters: this.includeDashboardFilters,
             title: this.title,
             description: this.description,
             styleOptions: this.styleOptions,
             widgetStyleOptions: this.widgetStyleOptions,
+            highlightSelectionDisabled: this.highlightSelectionDisabled,
             drilldownOptions: this.drilldownOptions,
         };
         return createElement(DashboardWidget, props);
@@ -1448,7 +1705,7 @@ class DashboardWidgetComponent {
     }
 }
 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", title: "title", description: "description", styleOptions: "styleOptions", widgetStyleOptions: "widgetStyleOptions", drilldownOptions: "drilldownOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #preact style=\"width: 100%; height: 100%\"></div>", isInline: true });
+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", widgetStyleOptions: "widgetStyleOptions", 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: [{
@@ -1468,6 +1725,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], filtersMergeStrategy: [{
                 type: Input
+            }], includeDashboardFilters: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
@@ -1476,36 +1735,562 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], widgetStyleOptions: [{
                 type: Input
+            }], highlightSelectionDisabled: [{
+                type: Input
             }], drilldownOptions: [{
                 type: Input
             }] } });
 
 /**
- * SDK UI Module, which is a container for components.
+ * Member Filter Tile Component
+ */
+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
+            }] } });
+
+/**
+ * An Angular component designed to add drilldown functionality to any type of chart.
  *
- * @example
- * Example of importing `SdkUiModule` and injecting {@link SisenseContextConfig} into your application:
+ * 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
- * export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
- *   url="<instance url>" // replace with the URL of your Sisense instance
- *   token="<api token>" // replace with the API token of your user account
- *   defaultDataSource: DM.DataSource,
- * };
+ * // Component behavior in .component.ts
+ * chart = {
+ *   dataOptions: {
+ *     category: [DM.Divisions.Divison_name],
+ *     value: [measures.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,
+ *     });
+ *   }
+ * }
  *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     SdkUiModule,
- *   ],
- *   declarations: [AppComponent],
- *   providers: [
- *     { provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG },
- *   ],
- *   bootstrap: [AppComponent],
- * })
+ * 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>
+ * ```
+ */
+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) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
+        this.drilldownResultChange = 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 = {
+            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(DrilldownWidget, props, (customDrilldownResult) => {
+            const { breadcrumbsComponent } = customDrilldownResult;
+            this.drilldownResultChange.emit({
+                ...customDrilldownResult,
+                ...(breadcrumbsComponent && {
+                    breadcrumbsComponent: { render: createComponentRenderer(breadcrumbsComponent) },
+                }),
+            });
+            return createWrapperElement(this.preactContentRef.nativeElement);
+        });
+    }
+    /**
+     * @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: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-drilldown-widget',
+                    template: templateWithContent,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], preactContentRef: [{
+                type: ViewChild,
+                args: [rootContentId]
+            }], drilldownDimensions: [{
+                type: Input
+            }], initialDimension: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], drilldownResultChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Date Range Filter Tile Component
+ */
+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
+            }] } });
+
+/**
+ * Drilldown Breadcrumbs Component
+ */
+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!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
+     */
+    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();
+    }
+}
+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-drilldown-breadcrumbs',
+                    template,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], filtersDisplayValues: [{
+                type: Input
+            }], currentDimension: [{
+                type: Input
+            }], drilldownSelectionsClear: [{
+                type: Output
+            }], drilldownSelectionsSlice: [{
+                type: Output
+            }] } });
+
+/**
+ * Context Menu Component
+ */
+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
+     */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement);
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement);
+        }
+    }
+    createPreactComponent() {
+        const props = {
+            position: this.position,
+            itemSections: this.itemSections,
+            closeContextMenu: () => this.contextMenuClose.emit(),
+        };
+        return createElement(ContextMenu, props, createWrapperElement(this.preactContentRef.nativeElement));
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        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: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-context-menu',
+                    template: templateWithContent,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], preactContentRef: [{
+                type: ViewChild,
+                args: [rootContentId]
+            }], position: [{
+                type: Input
+            }], itemSections: [{
+                type: Input
+            }], contextMenuClose: [{
+                type: Output
+            }] } });
+
+/**
+ * SDK UI Module, which is a container for components.
+ *
+ * @example
+ * Example of importing `SdkUiModule` and injecting {@link SisenseContextConfig} into your application:
+ *
+ * ```ts
+ * export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
+ *   url="<instance url>" // replace with the URL of your Sisense instance
+ *   token="<api token>" // replace with the API token of your user account
+ *   defaultDataSource: DM.DataSource,
+ * };
+ *
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     SdkUiModule,
+ *   ],
+ *   declarations: [AppComponent],
+ *   providers: [
+ *     { provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG },
+ *   ],
+ *   bootstrap: [AppComponent],
+ * })
+ * ```
+ */
 class SdkUiModule {
 }
 SdkUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdkUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1523,8 +2308,14 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         FunnelChartComponent,
         PolarChartComponent,
         TreemapChartComponent,
+        SunburstChartComponent,
         TableWidgetComponent,
-        DashboardWidgetComponent], imports: [CommonModule], exports: [BasicMemberFilterTileComponent,
+        DashboardWidgetComponent,
+        MemberFilterTileComponent,
+        DrilldownWidgetComponent,
+        DateRangeFilterTileComponent,
+        DrilldownBreadcrumbsComponent,
+        ContextMenuComponent], imports: [CommonModule, DecoratorsModule], exports: [BasicMemberFilterTileComponent,
         ChartComponent,
         TableComponent,
         ChartWidgetComponent,
@@ -1538,9 +2329,15 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         FunnelChartComponent,
         PolarChartComponent,
         TreemapChartComponent,
+        SunburstChartComponent,
         TableWidgetComponent,
-        DashboardWidgetComponent] });
-SdkUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdkUiModule, imports: [CommonModule] });
+        DashboardWidgetComponent,
+        MemberFilterTileComponent,
+        DrilldownWidgetComponent,
+        DateRangeFilterTileComponent,
+        DrilldownBreadcrumbsComponent,
+        ContextMenuComponent] });
+SdkUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdkUiModule, imports: [CommonModule, DecoratorsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdkUiModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1559,10 +2356,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         FunnelChartComponent,
                         PolarChartComponent,
                         TreemapChartComponent,
+                        SunburstChartComponent,
                         TableWidgetComponent,
                         DashboardWidgetComponent,
+                        MemberFilterTileComponent,
+                        DrilldownWidgetComponent,
+                        DateRangeFilterTileComponent,
+                        DrilldownBreadcrumbsComponent,
+                        ContextMenuComponent,
                     ],
-                    imports: [CommonModule],
+                    imports: [CommonModule, DecoratorsModule],
                     exports: [
                         BasicMemberFilterTileComponent,
                         ChartComponent,
@@ -1578,52 +2381,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         FunnelChartComponent,
                         PolarChartComponent,
                         TreemapChartComponent,
+                        SunburstChartComponent,
                         TableWidgetComponent,
                         DashboardWidgetComponent,
+                        MemberFilterTileComponent,
+                        DrilldownWidgetComponent,
+                        DateRangeFilterTileComponent,
+                        DrilldownBreadcrumbsComponent,
+                        ContextMenuComponent,
                     ],
                     providers: [],
                 }]
         }] });
 
-class QueryService {
-    constructor(sisenseContextService) {
-        this.sisenseContextService = sisenseContextService;
-    }
-    /**
-     * Executes a data query.
-     *
-     * @param params - Query parameters
-     * return Query result
-     */
-    async executeQuery(params) {
-        const { dataSource, dimensions, measures, filters, highlights, count, offset, onBeforeQuery } = params;
-        const app = await this.sisenseContextService.getApp();
-        const data = await executeQuery({ dataSource, dimensions, measures, filters, highlights, count, offset }, app, { onBeforeQuery });
-        return { data };
-    }
-    /**
-     * Executes a data query extracted from an existing widget in the Sisense instance.
-     *
-     * @param params - Parameters to identify the target widget
-     * @returns Query result
-     */
-    async executeQueryByWidgetId(params) {
-        const app = await this.sisenseContextService.getApp();
-        return executeQueryByWidgetId({
-            ...params,
-            app,
-        });
-    }
-}
-QueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-QueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
-
 /*
  * Public API Surface of @sisense/sdk-ui-angular
  */
@@ -1632,5 +2402,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BasicMemberFilterTileComponent, ChartComponent, ChartWidgetComponent, ColumnChartComponent, DashboardWidgetComponent, FunnelChartComponent, IndicatorChartComponent, LineChartComponent, PieChartComponent, PolarChartComponent, QueryService, SISENSE_CONTEXT_CONFIG_TOKEN, ScatterChartComponent, SdkUiModule, SisenseContextService, THEME_CONFIG_TOKEN, TableComponent, TableWidgetComponent, ThemeService, TreemapChartComponent };
+export { AreaChartComponent, BarChartComponent, BasicMemberFilterTileComponent, ChartComponent, ChartWidgetComponent, ColumnChartComponent, ContextMenuComponent, DashboardService, DashboardWidgetComponent, DateRangeFilterTileComponent, DrilldownBreadcrumbsComponent, DrilldownWidgetComponent, FunnelChartComponent, IndicatorChartComponent, LineChartComponent, MemberFilterTileComponent, PieChartComponent, PolarChartComponent, QueryService, SISENSE_CONTEXT_CONFIG_TOKEN, ScatterChartComponent, SdkUiModule, SisenseContextService, SunburstChartComponent, THEME_CONFIG_TOKEN, TableComponent, TableWidgetComponent, ThemeService, TreemapChartComponent };
 //# sourceMappingURL=sisense-sdk-ui-angular.mjs.map