@sisense/sdk-ui-angular 0.14.0 → 0.15.0

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

@@ -1,13 +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 { __awaiter } from 'tslib';
+import { __awaiter, __decorate } from 'tslib';
 import { map, BehaviorSubject } from 'rxjs';
 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
@@ -45,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: [{
@@ -150,6 +161,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }] }];
     } });
 
+let QueryService = class QueryService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Executes a data query.
+     *
+     * @param params - Query parameters
+     * return Query result
+     */
+    executeQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { dataSource, dimensions, measures, filters, highlights, count, offset, onBeforeQuery } = params;
+            const app = yield this.sisenseContextService.getApp();
+            const data = yield 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
+     */
+    executeQueryByWidgetId(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield this.sisenseContextService.getApp();
+            return executeQueryByWidgetId(Object.assign(Object.assign({}, 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
+     */
+    getDashboardModel(dashboardOid, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield this.sisenseContextService.getApp();
+            return getDashboardModel(app.httpClient, dashboardOid, options);
+        });
+    }
+    /**
+     * Retrieves existing dashboard models from the Sisense instance.
+     *
+     * @param options - Advanced configuration options
+     * @returns Dashboard models array
+     */
+    getDashboardModels(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const app = yield this.sisenseContextService.getApp();
+            return getDashboardModels(app.httpClient, options);
+        });
+    }
+};
+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);
+            };
+        });
+    };
+}
+function track(action, methodName) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { enableTracking } = DecoratorsModule.sisenseContextService.getConfig();
+            const app = yield DecoratorsModule.sisenseContextService.getApp();
+            if (app === null || app === void 0 ? void 0 : 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
  *
@@ -184,7 +339,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());
@@ -196,7 +351,7 @@ class ThemeService {
             // apply system theme settings first
             yield this.applyThemeSettings(app.settings.serverThemeSettings);
             if (theme) {
-                yield this.applyThemeSettings(theme);
+                yield this.updateThemeSettings(theme);
             }
         });
     }
@@ -225,9 +380,12 @@ class ThemeService {
             yield 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: [{
@@ -373,7 +531,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: [{
@@ -442,7 +600,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: [{
@@ -529,7 +687,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: [{
@@ -608,6 +766,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)"
@@ -625,6 +784,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)"
@@ -689,6 +849,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)"
@@ -706,6 +867,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)"
@@ -770,6 +932,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)"
@@ -787,6 +950,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)"
@@ -850,6 +1014,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)"
@@ -867,6 +1032,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)"
@@ -912,6 +1078,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: [{
@@ -925,6 +1092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [dataOptions]="dataOptions"
       [filters]="filters"
       [highlights]="highlights"
+      [styleOptions]="styleOptions"
     />
   `,
                 }]
@@ -983,6 +1151,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)"
@@ -1000,6 +1169,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)"
@@ -1064,6 +1234,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)"
@@ -1081,6 +1252,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)"
@@ -1144,6 +1316,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)"
@@ -1161,6 +1334,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)"
@@ -1224,6 +1398,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)"
@@ -1241,6 +1416,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)"
@@ -1305,6 +1481,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)"
@@ -1322,6 +1499,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)"
@@ -1388,7 +1649,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: [{
@@ -1445,10 +1706,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);
@@ -1459,7 +1722,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: [{
@@ -1479,6 +1742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], filtersMergeStrategy: [{
                 type: Input
+            }], includeDashboardFilters: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
@@ -1487,33 +1752,553 @@ 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() {
+        var _a, _b;
+        const props = {
+            drilldownDimensions: this.drilldownDimensions,
+            initialDimension: this.initialDimension,
+            config: Object.assign(Object.assign(Object.assign({}, this.config), (((_a = this.config) === null || _a === void 0 ? void 0 : _a.breadcrumbsComponent) && {
+                breadcrumbsComponent: createWrapperElementHandler(this.config.breadcrumbsComponent),
+            })), (((_b = this.config) === null || _b === void 0 ? void 0 : _b.contextMenuComponent) && {
+                contextMenuComponent: (contextMenuProps) => createWrapperElement(this.config.contextMenuComponent(contextMenuProps)),
+            })),
+        };
+        return createElement(DrilldownWidget, props, (customDrilldownResult) => {
+            const { breadcrumbsComponent } = customDrilldownResult;
+            this.drilldownResultChange.emit(Object.assign(Object.assign({}, 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],
  * })
  * ```
  */
@@ -1534,8 +2319,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,
@@ -1549,9 +2340,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: [{
@@ -1570,10 +2367,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,
@@ -1589,53 +2392,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
-     */
-    executeQuery(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { dataSource, dimensions, measures, filters, highlights, count, offset, onBeforeQuery } = params;
-            const app = yield this.sisenseContextService.getApp();
-            const data = yield 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
-     */
-    executeQueryByWidgetId(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const app = yield this.sisenseContextService.getApp();
-            return executeQueryByWidgetId(Object.assign(Object.assign({}, 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
  */
@@ -1644,5 +2413,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