@sisense/sdk-ui-angular 1.34.0 → 2.1.0

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Inject, NgModule, Optional, EventEmitter, Component, ViewChild, Input, Output } from '@angular/core';
-import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomPluginsProvider, createClientApplication, getDashboardModel, getDashboardModels, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, HookAdapter, useExecuteCsvQueryInternal, getWidgetModel, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, createWrapperElement, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DashboardWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
+import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomPluginsProvider, createClientApplication, getDashboardModel, getDashboardModels, HookAdapter, useComposedDashboardInternal, createHookApiFacade, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, useExecuteCsvQueryInternal, getWidgetModel, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, createWrapperElement, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, FilterTile, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, Widget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
 export { boxWhiskerProcessResult } from '@sisense/sdk-ui-preact';
 import { __decorate } from 'tslib';
 import { BehaviorSubject } from 'rxjs';
@@ -173,7 +173,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [SISENSE_CONTEXT_CONFIG_TOKEN]
                 }] }]; } });
 
-var packageVersion = '1.34.0';
+var packageVersion = '2.1.0';
+
+function translateToPreactWidgetProps(widgetProps) {
+    const { beforeRender, dataReady, beforeMenuOpen, dataPointClick, dataPointContextMenu, dataPointsSelect, ...commonWidgetProps } = widgetProps;
+    return {
+        ...commonWidgetProps,
+        onBeforeRender: beforeRender,
+        onDataReady: dataReady,
+        onBeforeMenuOpen: beforeMenuOpen,
+        onDataPointClick: dataPointClick
+            ? (...[point, nativeEvent]) => dataPointClick({ point, nativeEvent })
+            : undefined,
+        onDataPointContextMenu: dataPointContextMenu
+            ? (...[point, nativeEvent]) => dataPointContextMenu({ point, nativeEvent })
+            : undefined,
+        onDataPointsSelected: dataPointsSelect
+            ? (...[points, nativeEvent]) => dataPointsSelect({ points, nativeEvent })
+            : undefined,
+    };
+}
+function translateFromPreactWidgetProps(widgetProps) {
+    const { onBeforeRender, onDataReady, onBeforeMenuOpen, onDataPointClick, onDataPointContextMenu, onDataPointsSelected, ...commonWidgetProps } = widgetProps;
+    return {
+        ...commonWidgetProps,
+        beforeRender: onBeforeRender,
+        dataReady: onDataReady,
+        beforeMenuOpen: onBeforeMenuOpen,
+        dataPointClick: onDataPointClick
+            ? ({ point, nativeEvent }) => onDataPointClick(point, nativeEvent)
+            : undefined,
+        dataPointContextMenu: onDataPointContextMenu
+            ? ({ point, nativeEvent }) => onDataPointContextMenu(point, nativeEvent)
+            : undefined,
+        dataPointsSelect: onDataPointsSelected
+            ? ({ points, nativeEvent }) => onDataPointsSelected(points, nativeEvent)
+            : undefined,
+    };
+}
+
+function translateToPreactDashboardProps(dashboardProps) {
+    return {
+        ...dashboardProps,
+        widgets: dashboardProps.widgets.map(translateToPreactWidgetProps),
+    };
+}
+function translateFromPreactDashboardProps(dashboardProps) {
+    return {
+        ...dashboardProps,
+        widgets: dashboardProps.widgets.map(translateFromPreactWidgetProps),
+    };
+}
 
 /**
  * Service for working with Sisense Fusion dashboards.
@@ -208,6 +258,87 @@ let DashboardService = class DashboardService {
         const app = await this.sisenseContextService.getApp();
         return getDashboardModels(app.httpClient, options);
     }
+    /**
+     * Сomposes dashboard or separate dashboard elements into a coordinated dashboard
+     * with cross filtering, and change detection.
+     *
+     * @example
+     * An example of using the `createComposedDashboard` to construct a composed dashboard and render it:
+     * ```html
+      <!--Component HTML template in example.component.html-->
+      <div *ngIf="dashboard$ | async as dashboard">
+        <csdk-filter-tile
+          *ngFor="let filter of getDashboardFilters(dashboard); trackBy: trackByIndex"
+          [filter]="filter"
+        />
+        <csdk-widget
+          *ngFor="let widget of dashboard.widgets; trackBy: trackByIndex"
+          [id]="widget.id"
+          [widgetType]="widget.widgetType"
+          [chartType]="widget.chartType"
+          [pluginType]="widget.pluginType"
+          [dataSource]="widget.dataSource"
+          [dataOptions]="widget.dataOptions"
+          [filters]="widget.filters"
+          [highlights]="widget.highlights"
+          [styleOptions]="widget.styleOptions"
+          [drilldownOptions]="widget.drilldownOptions"
+          [title]="widget.title"
+          [description]="widget.description"
+          [beforeMenuOpen]="widget.beforeMenuOpen"
+          (dataPointClick)="widget.dataPointClick?.($event)"
+          (dataPointContextMenu)="widget.dataPointContextMenu?.($event)"
+          (dataPointsSelect)="widget.dataPointsSelect?.($event)"
+        />
+      </div>
+     * ```
+     *
+     * ```ts
+      // Component behavior in example.component.ts
+      import { Component } from '@angular/core';
+      import { BehaviorSubject } from 'rxjs';
+      import { DashboardService, type DashboardProps } from '@sisense/sdk-ui-angular';
+  
+      @Component({
+        selector: 'example',
+        templateUrl: './example.component.html',
+        styleUrls: ['./example.component.scss'],
+      })
+      export class ExampleComponent {
+        dashboard$: BehaviorSubject<DashboardProps> | undefined;
+  
+        constructor(private dashboardService: DashboardService) {}
+  
+        ngOnInit() {
+          const initialDashboard: DashboardProps = { ... };
+          const composedDashboard = this.dashboardService.createComposedDashboard(initialDashboard);
+          this.dashboard$ = composedDashboard.dashboard$;
+        }
+  
+        trackByIndex = (index: number) => index;
+  
+        getDashboardFilters = ({ filters }: DashboardProps) => Array.isArray(filters) ? filters : [];
+      }
+     * ```
+     * @param initialDashboard - Initial dashboard
+     * @param options - Configuration options
+     * @returns Reactive composed dashboard object and API methods for interacting with it
+     */
+    createComposedDashboard(initialDashboard, options = {}) {
+        const hookAdapter = new HookAdapter((useComposedDashboardInternal), [createSisenseContextConnector(this.sisenseContextService)]);
+        const dashboard$ = new BehaviorSubject(initialDashboard);
+        hookAdapter.subscribe(({ dashboard }) => {
+            dashboard$.next(translateFromPreactDashboardProps(dashboard));
+        });
+        hookAdapter.run(translateToPreactDashboardProps(initialDashboard), options);
+        const setFilters = createHookApiFacade(hookAdapter, 'setFilters', true);
+        const setWidgetsLayout = createHookApiFacade(hookAdapter, 'setWidgetsLayout', true);
+        return {
+            dashboard$,
+            setFilters,
+            setWidgetsLayout,
+        };
+    }
 };
 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' });
@@ -326,7 +457,7 @@ let QueryService = class QueryService {
      * @return Query result
      */
     async executeQuery(params) {
-        const { dataSource, dimensions, measures, filters, highlights, count, offset, beforeQuery, onBeforeQuery, } = params;
+        const { dataSource, dimensions, measures, filters, highlights, count, offset, ungroup, beforeQuery, } = params;
         const app = await this.sisenseContextService.getApp();
         const { filters: filterList, relations: filterRelations } = getFilterListAndRelationsJaql(filters);
         const data = await executeQuery({
@@ -338,7 +469,8 @@ let QueryService = class QueryService {
             highlights,
             count,
             offset,
-        }, app, { onBeforeQuery: beforeQuery ?? onBeforeQuery });
+            ungroup,
+        }, app, { onBeforeQuery: beforeQuery });
         return { data };
     }
     /**
@@ -352,7 +484,7 @@ let QueryService = class QueryService {
         return executeQueryByWidgetId({
             ...params,
             app,
-            onBeforeQuery: params.beforeQuery ?? params.onBeforeQuery,
+            onBeforeQuery: params.beforeQuery,
         });
     }
     /**
@@ -976,7 +1108,6 @@ export class AnalyticsComponent {
  * ```
  * <img src="media://angular-area-range-chart-example.png" width="800px" />
  * @group Charts
- * @beta
  */
 class AreaRangeChartComponent {
     constructor() {
@@ -3107,7 +3238,7 @@ class DashboardComponent {
         }
     }
     getPreactComponentProps() {
-        return {
+        return translateToPreactDashboardProps({
             title: this.title,
             layoutOptions: this.layoutOptions,
             config: this.config,
@@ -3116,7 +3247,7 @@ class DashboardComponent {
             defaultDataSource: this.defaultDataSource,
             widgetsOptions: this.widgetsOptions,
             styleOptions: this.styleOptions,
-        };
+        });
     }
     /**
      * @internal
@@ -3608,6 +3739,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
+/**
+ * An extended version of Angular's `EventEmitter` that tracks
+ * whether any listeners (subscribers) are attached.
+ *
+ * Useful when you need to know if an `@Output()` is being observed
+ * in the template (i.e., bound with `(event)="..."`).
+ *
+ * @template T - The type of values emitted by the EventEmitter.
+ */
+class EventEmitterWithHasListeners extends EventEmitter {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates whether the EventEmitter has at least one active subscriber.
+         */
+        this.hasListeners = false;
+    }
+    /**
+     * Overrides the default `subscribe()` method to set `hasListeners` to true
+     * when a new subscriber is added.
+     *
+     * @param args - The arguments passed to the `subscribe()` method.
+     * @returns A subscription object used to unsubscribe from the event.
+     */
+    subscribe(...args) {
+        this.hasListeners = true;
+        return super.subscribe(...args);
+    }
+}
+
+/**
+ * UI component that renders a filter tile based on filter type
+ *
+ * @example
+ * Here’s how to render a filter model as a filter tile.
+ *
+ * ```html
+<!--Component HTML template in example.component.html-->
+<csdk-filter-tile
+  [filter]="filterTileProps.filter"
+  (filterChange)="filterTileProps.filterChange($event)"
+/>
+ * ```
+ *
+ * ```ts
+// Component behavior in example.component.ts
+import { Component } from '@angular/core';
+import { type FilterTileProps } from '@sisense/sdk-ui-angular';
+import { filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@Component({
+  selector: 'example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.scss'],
+})
+export class ExampleComponent {
+  filterTileProps: FilterTileProps = {
+    filter: filterFactory.members(DM.ER.Date.Years, ['2013-01-01T00:00:00']),
+    filterChange({ filter }) {
+      if (filter) {
+        this.filter = filter;
+      }
+    },
+  };
+}
+ * ```
+ * <img src="media://angular-member-filter-tile-example.png" width="225px" />
+ * @group Filter Tiles
+ * @shortDescription Facade component rendering a filter tile based on filter type
+ */
+class FilterTileComponent {
+    /**
+     * Constructor for the `FilterTileComponent`.
+     *
+     * @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 FilterTileProps.filterChange}
+         */
+        this.filterChange = new EventEmitter();
+        /**
+         * {@inheritDoc FilterTileProps.filterEdit}
+         */
+        this.filterEdit = new EventEmitterWithHasListeners();
+        /**
+         * {@inheritDoc FilterTileProps.filterDelete}
+         */
+        this.filterDelete = new EventEmitterWithHasListeners();
+        this.componentAdapter = new ComponentAdapter(FilterTile, [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /**
+     * @internal
+     */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+        }
+    }
+    getPreactComponentProps() {
+        const hasFilterEditListeners = this.filterEdit
+            .hasListeners;
+        const hasFilterDeleteListeners = this.filterDelete
+            .hasListeners;
+        return {
+            filter: this.filter,
+            defaultDataSource: this.defaultDataSource,
+            onChange: (...[filter]) => this.filterChange.emit({ filter }),
+            ...(hasFilterEditListeners && {
+                onEdit: (...[levelIndex]) => this.filterEdit.emit({ levelIndex }),
+            }),
+            ...(hasFilterDeleteListeners && { onDelete: () => this.filterDelete.emit() }),
+        };
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
+    }
+}
+FilterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterTileComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+FilterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FilterTileComponent, selector: "csdk-filter-tile", inputs: { filter: "filter", defaultDataSource: "defaultDataSource" }, outputs: { filterChange: "filterChange", filterEdit: "filterEdit", filterDelete: "filterDelete" }, 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: FilterTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-filter-tile',
+                    template,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], filter: [{
+                type: Input
+            }], defaultDataSource: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], filterEdit: [{
+                type: Output
+            }], filterDelete: [{
+                type: Output
+            }] } });
+
 /**
  * Member Filter Tile Component
  *
@@ -3642,7 +3942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *   };
  * }
  * ```
- * <img src="media://angular-member-filter-tile-example.png" width="400px" />
+ * <img src="media://angular-member-filter-tile-example.png" width="225px" />
  * @group Filter Tiles
  */
 class MemberFilterTileComponent {
@@ -3908,7 +4208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *
  * }
  * ```
- * <img src="media://angular-chart-widget-example.png" width="800px" />
+ * <img src="media://angular-chart-widget-example.png" width="500px" />
  * @group Dashboards
  */
 class ChartWidgetComponent {
@@ -4015,116 +4315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-/**
- * The Dashboard Widget component, which is a thin wrapper on {@link ChartWidgetComponent},
- * is used to render a widget created in a Sisense Fusion instance.
- *
- * To learn more about using Sisense Fusion Widgets in Compose SDK, see
- * [Sisense Fusion Widgets](https://sisense.dev/guides/sdk/guides/charts/guide-fusion-widgets.html).
- *
- * @example
- * ```html
- * <csdk-dashboard-widget
- *    [widgetOid]="widgetOid"
- *    [dashboardOid]="dashboardOid"
- *    [includeDashboardFilters]="true"
- * />
- * ```
- * ```ts
- * import { Component } from '@angular/core';
- * import { ChartType } from '@sisense/sdk-ui-angular';
- * import { filterFactory, measureFactory } from '@sisense/sdk-data';
- * import * as DM from '../../assets/sample-healthcare-model';
- *
- * @Component({
- *  selector: 'app-widgets',
- *  templateUrl: './widgets.component.html',
- *  styleUrls: ['./widgets.component.scss'],
- * })
- * export class WidgetsComponent {
- *  widgetOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
- *  dashboardOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
- * }
- * ```
- * @group Fusion Assets
- * @deprecated Use the `widget-by-id` component instead.
- * @fusionEmbed
- */
-class DashboardWidgetComponent {
-    constructor(sisenseContextService, themeService) {
-        this.sisenseContextService = sisenseContextService;
-        this.themeService = themeService;
-        this.componentAdapter = new ComponentAdapter(DashboardWidget, [
-            createSisenseContextConnector(this.sisenseContextService),
-            createThemeContextConnector(this.themeService),
-        ]);
-    }
-    /** @internal */
-    ngAfterViewInit() {
-        this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
-    }
-    /** @internal */
-    ngOnChanges() {
-        if (this.preactRef) {
-            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
-        }
-    }
-    /** @internal */
-    getPreactComponentProps() {
-        return {
-            widgetOid: this.widgetOid,
-            dashboardOid: this.dashboardOid,
-            filters: this.filters,
-            highlights: this.highlights,
-            filtersMergeStrategy: this.filtersMergeStrategy,
-            includeDashboardFilters: this.includeDashboardFilters,
-            title: this.title,
-            description: this.description,
-            styleOptions: this.styleOptions,
-            highlightSelectionDisabled: this.highlightSelectionDisabled,
-            drilldownOptions: this.drilldownOptions,
-        };
-    }
-    /** @internal */
-    ngOnDestroy() {
-        this.componentAdapter.destroy();
-    }
-}
-DashboardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardWidgetComponent, selector: "csdk-dashboard-widget", inputs: { widgetOid: "widgetOid", dashboardOid: "dashboardOid", filters: "filters", highlights: "highlights", filtersMergeStrategy: "filtersMergeStrategy", includeDashboardFilters: "includeDashboardFilters", title: "title", description: "description", styleOptions: "styleOptions", highlightSelectionDisabled: "highlightSelectionDisabled", drilldownOptions: "drilldownOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact style=\"width: 100%; height: 100%\"></div>\n", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardWidgetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'csdk-dashboard-widget',
-                    template,
-                }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
-                type: ViewChild,
-                args: [rootId]
-            }], widgetOid: [{
-                type: Input
-            }], dashboardOid: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], highlights: [{
-                type: Input
-            }], filtersMergeStrategy: [{
-                type: Input
-            }], includeDashboardFilters: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], styleOptions: [{
-                type: Input
-            }], highlightSelectionDisabled: [{
-                type: Input
-            }], drilldownOptions: [{
-                type: Input
-            }] } });
-
 /**
  * An Angular component designed to add drilldown functionality to any type of chart.
  *
@@ -4242,7 +4432,6 @@ class DrilldownWidgetComponent {
     }
     getPreactComponentProps() {
         return {
-            drilldownDimensions: this.drilldownDimensions,
             drilldownPaths: this.drilldownPaths,
             initialDimension: this.initialDimension,
             config: {
@@ -4274,7 +4463,7 @@ class DrilldownWidgetComponent {
     }
 }
 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", drilldownPaths: "drilldownPaths", 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 });
+DrilldownWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrilldownWidgetComponent, selector: "csdk-drilldown-widget", inputs: { drilldownPaths: "drilldownPaths", 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: [{
@@ -4287,8 +4476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], preactContentRef: [{
                 type: ViewChild,
                 args: [rootContentId]
-            }], drilldownDimensions: [{
-                type: Input
             }], drilldownPaths: [{
                 type: Input
             }], initialDimension: [{
@@ -4515,6 +4702,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Facade component that renders a widget within a dashboard based on the widget type.
+ *
+ * @example
+ * ```html
+<!--Component HTML template in example.component.html-->
+<csdk-widget
+  [id]="widgetProps.id"
+  [title]="widgetProps.title"
+  [widgetType]="widgetProps.widgetType"
+  [chartType]="widgetProps.chartType"
+  [dataSource]="widgetProps.dataSource"
+  [dataOptions]="widgetProps.dataOptions"
+/>
+ * ```
+ *
+ * ```ts
+// Component behavior in example.component.ts
+import { Component } from '@angular/core';
+import { type WidgetProps } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.scss'],
+})
+export class ExampleComponent {
+  widgetProps: WidgetProps = {
+    id: 'widget-id',
+    widgetType: 'chart',
+    chartType: 'column',
+    title: 'Widget Title',
+    dataSource: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+}
+ * ```
+ * <img src="media://angular-chart-widget-example.png" width="500px" />
+ * @group Dashboards
+ */
+class WidgetComponent {
+    constructor(sisenseContextService, themeService) {
+        this.sisenseContextService = sisenseContextService;
+        this.themeService = themeService;
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.onDataPointClick}
+         *
+         * @category Callbacks
+         */
+        this.dataPointClick = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.onDataPointContextMenu}
+         *
+         * @category Callbacks
+         */
+        this.dataPointContextMenu = new EventEmitter();
+        /**
+         * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.onDataPointsSelected}
+         *
+         * @category Callbacks
+         */
+        this.dataPointsSelect = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(Widget, [
+            createSisenseContextConnector(this.sisenseContextService),
+            createThemeContextConnector(this.themeService),
+        ]);
+    }
+    /** @internal */
+    ngAfterViewInit() {
+        this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+    }
+    /** @internal */
+    ngOnChanges() {
+        if (this.preactRef) {
+            this.componentAdapter.render(this.preactRef.nativeElement, this.getPreactComponentProps());
+        }
+    }
+    getPreactComponentProps() {
+        return translateToPreactWidgetProps({
+            id: this.id,
+            widgetType: this.widgetType,
+            chartType: this.chartType,
+            pluginType: this.pluginType,
+            dataSource: this.dataSource,
+            dataOptions: this.dataOptions,
+            filters: this.filters,
+            highlights: this.highlights,
+            styleOptions: this.styleOptions,
+            drilldownOptions: this.drilldownOptions,
+            title: this.title,
+            description: this.description,
+            highlightSelectionDisabled: this.highlightSelectionDisabled,
+            beforeRender: this.beforeRender?.bind(this),
+            dataReady: this.dataReady?.bind(this),
+            beforeMenuOpen: this.beforeMenuOpen?.bind(this),
+            dataPointClick: this.dataPointClick.emit.bind(this.dataPointClick),
+            dataPointContextMenu: this.dataPointContextMenu.emit.bind(this.dataPointContextMenu),
+            dataPointsSelect: this.dataPointsSelect.emit.bind(this.dataPointsSelect),
+        });
+    }
+    /** @internal */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
+    }
+}
+WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetComponent, selector: "csdk-widget", inputs: { id: "id", widgetType: "widgetType", chartType: "chartType", pluginType: "pluginType", dataSource: "dataSource", dataOptions: "dataOptions", filters: "filters", highlights: "highlights", styleOptions: "styleOptions", drilldownOptions: "drilldownOptions", title: "title", description: "description", highlightSelectionDisabled: "highlightSelectionDisabled", beforeRender: "beforeRender", dataReady: "dataReady", beforeMenuOpen: "beforeMenuOpen" }, 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: WidgetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csdk-widget',
+                    template,
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], id: [{
+                type: Input
+            }], widgetType: [{
+                type: Input
+            }], chartType: [{
+                type: Input
+            }], pluginType: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], dataOptions: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], highlights: [{
+                type: Input
+            }], styleOptions: [{
+                type: Input
+            }], drilldownOptions: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], highlightSelectionDisabled: [{
+                type: Input
+            }], beforeRender: [{
+                type: Input
+            }], dataReady: [{
+                type: Input
+            }], beforeMenuOpen: [{
+                type: Input
+            }], dataPointClick: [{
+                type: Output
+            }], dataPointContextMenu: [{
+                type: Output
+            }], dataPointsSelect: [{
+                type: Output
+            }] } });
+
 /**
  * The `WidgetById` component, which is a thin wrapper on {@link ChartWidgetComponent},
  * is used to render a widget created in a Sisense Fusion instance.
@@ -4670,7 +5017,6 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         TreemapChartComponent,
         SunburstChartComponent,
         TableWidgetComponent,
-        DashboardWidgetComponent,
         WidgetByIdComponent,
         MemberFilterTileComponent,
         DrilldownWidgetComponent,
@@ -4685,7 +5031,9 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         PivotTableComponent,
         DashboardByIdComponent,
         DashboardComponent,
-        PivotTableWidgetComponent], imports: [CommonModule, DecoratorsModule], exports: [ChartComponent,
+        PivotTableWidgetComponent,
+        FilterTileComponent,
+        WidgetComponent], imports: [CommonModule, DecoratorsModule], exports: [ChartComponent,
         TableComponent,
         ChartWidgetComponent,
         ColumnChartComponent,
@@ -4701,7 +5049,6 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         TreemapChartComponent,
         SunburstChartComponent,
         TableWidgetComponent,
-        DashboardWidgetComponent,
         WidgetByIdComponent,
         MemberFilterTileComponent,
         DrilldownWidgetComponent,
@@ -4716,7 +5063,9 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         PivotTableComponent,
         DashboardByIdComponent,
         DashboardComponent,
-        PivotTableWidgetComponent] });
+        PivotTableWidgetComponent,
+        FilterTileComponent,
+        WidgetComponent] });
 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,
@@ -4738,7 +5087,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         TreemapChartComponent,
                         SunburstChartComponent,
                         TableWidgetComponent,
-                        DashboardWidgetComponent,
                         WidgetByIdComponent,
                         MemberFilterTileComponent,
                         DrilldownWidgetComponent,
@@ -4754,6 +5102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DashboardByIdComponent,
                         DashboardComponent,
                         PivotTableWidgetComponent,
+                        FilterTileComponent,
+                        WidgetComponent,
                     ],
                     imports: [CommonModule, DecoratorsModule],
                     exports: [
@@ -4773,7 +5123,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         TreemapChartComponent,
                         SunburstChartComponent,
                         TableWidgetComponent,
-                        DashboardWidgetComponent,
                         WidgetByIdComponent,
                         MemberFilterTileComponent,
                         DrilldownWidgetComponent,
@@ -4789,6 +5138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DashboardByIdComponent,
                         DashboardComponent,
                         PivotTableWidgetComponent,
+                        FilterTileComponent,
+                        WidgetComponent,
                     ],
                     providers: [],
                 }]
@@ -4920,18 +5271,6 @@ const addFilters = (dashboard, newFilters) => {
 const replaceFilter = (dashboard, filterToReplace, newFilter) => {
     return dashboardHelpers$1.replaceFilter(dashboard, filterToReplace, newFilter);
 };
-/**
- * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.modifyFilter}
- *
- * @deprecated Use {@link replaceFilter} instead
- * @param dashboard - The original dashboard (`DashboardProps`) containing the filter to modify.
- * @param filterToModify - The existing filter to be modified.
- * @param newFilter - The new filter to replace the existing one.
- * @returns A new dashboard instance with the specified filter modified.
- */
-const modifyFilter = (dashboard, filterToModify, newFilter) => {
-    return dashboardHelpers$1.modifyFilter(dashboard, filterToModify, newFilter);
-};
 /**
  * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.removeFilter}
  *
@@ -4971,7 +5310,6 @@ var dashboardHelpers = /*#__PURE__*/Object.freeze({
     __proto__: null,
     addFilter: addFilter,
     addFilters: addFilters,
-    modifyFilter: modifyFilter,
     removeFilter: removeFilter,
     removeFilters: removeFilters,
     replaceFilter: replaceFilter,
@@ -5301,5 +5639,5 @@ var widgetModelTranslator = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, AreaRangeChartComponent, AreamapChartComponent, BarChartComponent, BoxplotChartComponent, ChartComponent, ChartWidgetComponent, ColumnChartComponent, ContextMenuComponent, CriteriaFilterTileComponent, DashboardByIdComponent, DashboardComponent, DashboardService, DashboardWidgetComponent, DateRangeFilterTileComponent, DrilldownBreadcrumbsComponent, DrilldownWidgetComponent, FunnelChartComponent, HierarchyService, IndicatorChartComponent, LineChartComponent, MemberFilterTileComponent, PieChartComponent, PivotTableComponent, PivotTableWidgetComponent, PluginsService, PolarChartComponent, QueryService, RelativeDateFilterTileComponent, SISENSE_CONTEXT_CONFIG_TOKEN, ScatterChartComponent, ScattermapChartComponent, SdkUiModule, SisenseContextService, SunburstChartComponent, THEME_CONFIG_TOKEN, TableComponent, TableWidgetComponent, ThemeService, TrackableService, TreemapChartComponent, WidgetByIdComponent, WidgetService, createPluginsContextConnector, createSisenseContextConnector, createThemeContextConnector, dashboardHelpers, dashboardModelTranslator, widgetModelTranslator };
+export { AreaChartComponent, AreaRangeChartComponent, AreamapChartComponent, BarChartComponent, BoxplotChartComponent, ChartComponent, ChartWidgetComponent, ColumnChartComponent, ContextMenuComponent, CriteriaFilterTileComponent, DashboardByIdComponent, DashboardComponent, DashboardService, DateRangeFilterTileComponent, DrilldownBreadcrumbsComponent, DrilldownWidgetComponent, FilterTileComponent, FunnelChartComponent, HierarchyService, IndicatorChartComponent, LineChartComponent, MemberFilterTileComponent, PieChartComponent, PivotTableComponent, PivotTableWidgetComponent, PluginsService, PolarChartComponent, QueryService, RelativeDateFilterTileComponent, SISENSE_CONTEXT_CONFIG_TOKEN, ScatterChartComponent, ScattermapChartComponent, SdkUiModule, SisenseContextService, SunburstChartComponent, THEME_CONFIG_TOKEN, TableComponent, TableWidgetComponent, ThemeService, TrackableService, TreemapChartComponent, WidgetByIdComponent, WidgetComponent, WidgetService, createPluginsContextConnector, createSisenseContextConnector, createThemeContextConnector, dashboardHelpers, dashboardModelTranslator, widgetModelTranslator };
 //# sourceMappingURL=sisense-sdk-ui-angular.mjs.map