@sisense/sdk-ui-angular 2.3.0 → 2.4.0

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

@@ -1,7 +1,7 @@
 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, 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 { InjectionToken, Injectable, Inject, createComponent, NgModule, Optional, EventEmitter, Component, ViewChild, Input, Output } from '@angular/core';
+import { DataObserver, CustomThemeProvider, CustomSisenseContextProvider, CustomWidgetsProviderAdapter, createClientApplication, createWrapperElement, getDashboardModel, getDashboardModels, HookAdapter, useComposedDashboardInternal, createHookApiFacade, useGetFilterMembers, getHierarchyModels, executeQuery, executeQueryByWidgetId, executePivotQuery, useExecuteCsvQueryInternal, useExecuteCustomWidgetQueryInternal, getWidgetModel, getDefaultThemeSettings, getThemeSettingsByOid, ComponentAdapter, Chart, PivotTable, Table, ContextMenu, Dashboard, DashboardById, DrilldownBreadcrumbs, CriteriaFilterTile, DateRangeFilterTile, FilterTile, FiltersPanel, MemberFilterTile, RelativeDateFilterTile, ChartWidget, DrilldownWidget, createWrapperElementHandler, createComponentRenderer, PivotTableWidget, TableWidget, Widget, WidgetById, dashboardModelTranslator as dashboardModelTranslator$1, dashboardHelpers as dashboardHelpers$1, widgetModelTranslator as widgetModelTranslator$1 } from '@sisense/sdk-ui-preact';
+export { boxWhiskerProcessResult, extractDimensionsAndMeasures } from '@sisense/sdk-ui-preact';
 import { __rest, __awaiter, __decorate } from 'tslib';
 import { BehaviorSubject } from 'rxjs';
 import merge from 'ts-deepmerge';
@@ -76,23 +76,31 @@ const createSisenseContextConnector = (sisenseContextService) => {
     };
 };
 /**
- * Creates plugins context connector
+ * Creates custom widgets context connector
  *
- * @param pluginsService - The plugin service
+ * @param customWidgetsService - The custom widgets service
  * @internal
  */
-const createPluginsContextConnector = (pluginsService) => {
-    const pluginsContext = {
-        pluginMap: pluginsService.getPlugins().value,
-        registerPlugin: pluginsService.registerPlugin.bind(pluginsService),
-        getPlugin: pluginsService.getPlugin.bind(pluginsService),
-    };
-    const propsObserver = new DataObserver({
-        context: pluginsContext,
+const createCustomWidgetsContextConnector = (customWidgetsService) => {
+    const { customWidgetsMap$ } = customWidgetsService;
+    const propsObserver = new DataObserver();
+    customWidgetsMap$.subscribe({
+        next: (customWidgetsMap) => {
+            propsObserver.setValue({
+                context: {
+                    customWidgetsMap: customWidgetsMap,
+                },
+            });
+        },
+        error: (error) => {
+            propsObserver.setValue({
+                error,
+            });
+        },
     });
     return {
         propsObserver,
-        providerComponent: CustomPluginsProvider,
+        providerComponent: CustomWidgetsProviderAdapter,
     };
 };
 
@@ -176,12 +184,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }] }];
     } });
 
-var packageVersion = '2.3.0';
+var packageVersion = '2.4.0';
+
+/**
+ * Service for rendering components dynamically.
+ *
+ * @internal
+ */
+class DynamicRenderer {
+    constructor(appRef, injector, envInjector) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.envInjector = envInjector;
+    }
+    renderComponent(component, props) {
+        const componentRef = createComponent(component, {
+            environmentInjector: this.envInjector,
+            elementInjector: this.injector,
+        });
+        // Apply props to the component instance
+        Object.assign(componentRef.instance, props);
+        // Attach the component to the application
+        this.appRef.attachView(componentRef.hostView);
+        // Get the DOM element
+        const domElem = componentRef.hostView.rootNodes[0];
+        // Create destroy function
+        const destroy = () => {
+            // Detach from application
+            this.appRef.detachView(componentRef.hostView);
+            // Destroy the component
+            componentRef.destroy();
+        };
+        return {
+            element: domElem,
+            componentRef,
+            destroy,
+        };
+    }
+}
+DynamicRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicRenderer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicRenderer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }]; } });
+
+/**
+ * Service for working with custom widgets.
+ *
+ * @group Dashboards
+ */
+class CustomWidgetsService {
+    constructor(
+    /** @internal */
+    dynamicRenderer) {
+        this.dynamicRenderer = dynamicRenderer;
+        this.customWidgetsMap$ = new BehaviorSubject(new Map());
+    }
+    /**
+     * Registers a new custom widget.
+     *
+     * @param customWidgetType - The unique identifier for the custom widget type.
+     * @param customWidget - The custom widget component class to register.
+     */
+    registerCustomWidget(customWidgetType, customWidget) {
+        const customWidgetPreactComponent = (props) => {
+            const renderedComponent = this.dynamicRenderer.renderComponent(customWidget, props);
+            return createWrapperElement(renderedComponent.element, () => renderedComponent.destroy());
+        };
+        const customWidgetsMap = this.customWidgetsMap$.value;
+        if (!customWidgetsMap.has(customWidgetType)) {
+            customWidgetsMap.set(customWidgetType, customWidgetPreactComponent);
+            this.customWidgetsMap$.next(customWidgetsMap);
+        }
+    }
+    /**
+     * Checks if a custom widget is registered.
+     *
+     * @param customWidgetType - The type of the custom widget.
+     * @returns True if the custom widget is registered, false otherwise.
+     */
+    hasCustomWidget(customWidgetType) {
+        return this.customWidgetsMap$.value.has(customWidgetType);
+    }
+}
+CustomWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, deps: [{ token: DynamicRenderer }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: DynamicRenderer }]; } });
 
 function translateToPreactWidgetProps(widgetProps) {
     const { beforeRender, dataReady, beforeMenuOpen, dataPointClick, dataPointContextMenu, dataPointsSelect } = widgetProps, commonWidgetProps = __rest(widgetProps, ["beforeRender", "dataReady", "beforeMenuOpen", "dataPointClick", "dataPointContextMenu", "dataPointsSelect"]);
     return Object.assign(Object.assign({}, commonWidgetProps), { onBeforeRender: beforeRender, onDataReady: dataReady, onBeforeMenuOpen: beforeMenuOpen, onDataPointClick: dataPointClick
-            ? (...[point, nativeEvent]) => dataPointClick({ point, nativeEvent })
+            ? (...[point, nativeEvent]) => dataPointClick({
+                point,
+                nativeEvent,
+            })
             : undefined, onDataPointContextMenu: dataPointContextMenu
             ? (...[point, nativeEvent]) => dataPointContextMenu({ point, nativeEvent })
             : undefined, onDataPointsSelected: dataPointsSelect
@@ -261,7 +363,7 @@ let DashboardService = class DashboardService {
           [id]="widget.id"
           [widgetType]="widget.widgetType"
           [chartType]="widget.chartType"
-          [pluginType]="widget.pluginType"
+          [customWidgetType]="widget.customWidgetType"
           [dataSource]="widget.dataSource"
           [dataOptions]="widget.dataOptions"
           [filters]="widget.filters"
@@ -337,6 +439,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
+/**
+ * Service for working with filter.
+ *
+ * @group Filters
+ */
+let FilterService = class FilterService {
+    constructor(sisenseContextService) {
+        this.sisenseContextService = sisenseContextService;
+    }
+    /**
+     * Retrieves members of the provided filter.
+     *
+     * Those members can be used to display a list of members in a third-party filter component such as Material UI Select.
+     *
+     * ## Example
+     *
+     * Retrieve selected members from a Filter on Country of the Sample ECommerce data model.
+     *
+     * ```ts
+     * try {
+     *   const data = await filterService.getFilterMembers({
+     *     filter: filterFactory.members(DM.Country.Country, ['United States', 'Canada'])
+     *   });
+     *
+     *   const { selectedMembers, allMembers, excludeMembers, enableMultiSelection } = data;
+     *   console.log('selectedMembers', selectedMembers);
+     * } catch (error) {
+     *   console.error('Error:', error);
+     * }
+     * ```
+     *
+     * @param params - Parameters for retrieving filter members
+     * @returns Promise that resolves to the filter members data
+     */
+    getFilterMembers(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hookAdapter = new HookAdapter(useGetFilterMembers, [
+                createSisenseContextConnector(this.sisenseContextService),
+            ]);
+            const resultPromise = new Promise((resolve, reject) => {
+                hookAdapter.subscribe((res) => {
+                    const { isError, isSuccess, error } = res;
+                    if (isError) {
+                        reject(error);
+                    }
+                    else if (isSuccess) {
+                        resolve(res.data);
+                    }
+                });
+            });
+            hookAdapter.run(params);
+            return resultPromise.finally(() => {
+                hookAdapter.destroy();
+            });
+        });
+    }
+};
+FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, providedIn: 'root' });
+FilterService = __decorate([
+    TrackableService(['getFilterMembers'])
+], FilterService);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
+
 /**
  * Service for working with Sisense Fusion hierarchies.
  *
@@ -372,58 +543,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SisenseContextService }]; } });
 
-/**
- * Service for working with plugins fetched from an external environment.
- *
- * Provides methods for registering, retrieving, and interacting with plugins.
- *
- * @internal
- * @group Contexts
- */
-class PluginsService {
-    constructor() {
-        this.pluginMap$ = new BehaviorSubject(new Map());
-    }
-    /**
-     * Registers a new plugin into the plugin map.
-     *
-     * @param pluginType - The unique identifier for the plugin type.
-     * @param plugin - The plugin instance to register.
-     */
-    registerPlugin(pluginType, plugin) {
-        const pluginMap = this.pluginMap$.value;
-        if (!pluginMap.has(pluginType)) {
-            pluginMap.set(pluginType, plugin);
-            this.pluginMap$.next(pluginMap);
-        }
-    }
-    /**
-     * Retrieves a plugin by its type.
-     *
-     * @param pluginType - The unique identifier for the plugin type.
-     * @returns The plugin instance if found, otherwise undefined.
-     */
-    getPlugin(pluginType) {
-        return this.pluginMap$.value.get(pluginType);
-    }
-    /**
-     * Retrieves a complete plugin map.
-     *
-     * @returns A plugin map.
-     */
-    getPlugins() {
-        return this.pluginMap$;
-    }
-}
-PluginsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PluginsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
 /**
  * Service for executing data queries.
  *
@@ -530,11 +649,47 @@ let QueryService = class QueryService {
             });
         });
     }
+    /**
+     * Executes a data query from custom widget component props.
+     *
+     * This method takes custom widget props (dataSource, dataOptions, filters, etc.)
+     * and executes the appropriate data query
+     *
+     * @param params - Custom widget component props containing data source, data options, filters, etc.
+     * @returns Promise resolving to query result with formatted data
+     */
+    executeCustomWidgetQuery(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hookAdapter = new HookAdapter(useExecuteCustomWidgetQueryInternal, [
+                createSisenseContextConnector(this.sisenseContextService),
+            ]);
+            const resultPromise = new Promise((resolve, reject) => {
+                hookAdapter.subscribe((res) => {
+                    const { data, isSuccess, isError, error } = res;
+                    if (isSuccess) {
+                        resolve({ data });
+                    }
+                    else if (isError) {
+                        reject(error);
+                    }
+                });
+            });
+            hookAdapter.run(params);
+            return resultPromise.finally(() => {
+                hookAdapter.destroy();
+            });
+        });
+    }
 };
 QueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, deps: [{ token: SisenseContextService }], target: i0.ɵɵFactoryTarget.Injectable });
 QueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, providedIn: 'root' });
 QueryService = __decorate([
-    TrackableService(['executeQuery', 'executeQueryByWidgetId', 'executePivotQuery'])
+    TrackableService([
+        'executeQuery',
+        'executeQueryByWidgetId',
+        'executePivotQuery',
+        'executeCustomWidgetQuery',
+    ])
 ], QueryService);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QueryService, decorators: [{
             type: Injectable,
@@ -3210,19 +3365,19 @@ class DashboardComponent {
      */
     themeService, 
     /**
-     * Plugin service
+     * Custom widgets service
      *
      * @internal
      * @category Constructor
      */
-    pluginService) {
+    customWidgetsService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        this.pluginService = pluginService;
+        this.customWidgetsService = customWidgetsService;
         this.componentAdapter = new ComponentAdapter(Dashboard, [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
-            createPluginsContextConnector(this.pluginService),
+            createCustomWidgetsContextConnector(this.customWidgetsService),
         ]);
     }
     /**
@@ -3259,12 +3414,12 @@ class DashboardComponent {
         this.componentAdapter.destroy();
     }
 }
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }, { token: PluginsService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }, { token: CustomWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
 DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "csdk-dashboard", inputs: { title: "title", layoutOptions: "layoutOptions", config: "config", widgets: "widgets", filters: "filters", defaultDataSource: "defaultDataSource", widgetsOptions: "widgetsOptions", styleOptions: "styleOptions", tabbersOptions: "tabbersOptions" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'csdk-dashboard', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }, { type: PluginsService }]; }, propDecorators: { preactRef: [{
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }, { type: CustomWidgetsService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
             }], title: [{
@@ -3334,19 +3489,19 @@ class DashboardByIdComponent {
      */
     themeService, 
     /**
-     * Plugin service
+     * Custom widgets service
      *
      * @internal
      * @category Constructor
      */
-    pluginService) {
+    customWidgetsService) {
         this.sisenseContextService = sisenseContextService;
         this.themeService = themeService;
-        this.pluginService = pluginService;
+        this.customWidgetsService = customWidgetsService;
         this.componentAdapter = new ComponentAdapter(DashboardById, [
             createSisenseContextConnector(this.sisenseContextService),
             createThemeContextConnector(this.themeService),
-            createPluginsContextConnector(this.pluginService),
+            createCustomWidgetsContextConnector(this.customWidgetsService),
         ]);
     }
     /**
@@ -3376,12 +3531,12 @@ class DashboardByIdComponent {
         this.componentAdapter.destroy();
     }
 }
-DashboardByIdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardByIdComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }, { token: PluginsService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardByIdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardByIdComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }, { token: CustomWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
 DashboardByIdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardByIdComponent, selector: "csdk-dashboard-by-id", inputs: { dashboardOid: "dashboardOid", config: "config" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardByIdComponent, decorators: [{
             type: Component,
             args: [{ selector: 'csdk-dashboard-by-id', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }, { type: PluginsService }]; }, propDecorators: { preactRef: [{
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }, { type: CustomWidgetsService }]; }, propDecorators: { preactRef: [{
                 type: ViewChild,
                 args: [rootId]
             }], dashboardOid: [{
@@ -3889,6 +4044,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Filters panel component that renders a list of filter tiles
+ *
+ * @example
+ * Here's how to render a filters panel with a set of filters.
+ *
+ * ```html
+<!--Component HTML template in example.component.html-->
+<csdk-filters-panel
+  [filters]="filtersPanelProps.filters"
+  [defaultDataSource]="filtersPanelProps.defaultDataSource"
+  (filtersChange)="filtersPanelProps.filtersChange($event)"
+/>
+ * ```
+ *
+ * ```ts
+// Component behavior in example.component.ts
+import { Component } from '@angular/core';
+import { type FiltersPanelProps } 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 {
+  filtersPanelProps: FiltersPanelProps = {
+    filters: [
+      filterFactory.members(DM.ER.Date.Years, ['2013-01-01T00:00:00']),
+      filterFactory.members(DM.ER.Departments.Department, ['Cardiology']),
+    ],
+    defaultDataSource: DM.DataSource,
+    filtersChange({ filters }) {
+      this.filtersPanelProps.filters = filters;
+    },
+  };
+}
+ * ```
+ * @group Filter Tiles
+ */
+class FiltersPanelComponent {
+    /**
+     * Constructor for the `FiltersPanelComponent`.
+     *
+     * @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 FiltersPanelProps.filtersChange}
+         */
+        this.filtersChange = new EventEmitter();
+        this.componentAdapter = new ComponentAdapter(FiltersPanel, [
+            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 {
+            filters: this.filters,
+            defaultDataSource: this.defaultDataSource,
+            dataSources: this.dataSources,
+            config: this.config,
+            onFiltersChange: (...[filters]) => this.filtersChange.emit({ filters }),
+        };
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.componentAdapter.destroy();
+    }
+}
+FiltersPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersPanelComponent, deps: [{ token: SisenseContextService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+FiltersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FiltersPanelComponent, selector: "csdk-filters-panel", inputs: { filters: "filters", defaultDataSource: "defaultDataSource", dataSources: "dataSources", config: "config" }, outputs: { filtersChange: "filtersChange" }, viewQueries: [{ propertyName: "preactRef", first: true, predicate: ["preact"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n    <div #preact class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'csdk-filters-panel', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: SisenseContextService }, { type: ThemeService }]; }, propDecorators: { preactRef: [{
+                type: ViewChild,
+                args: [rootId]
+            }], filters: [{
+                type: Input
+            }], defaultDataSource: [{
+                type: Input
+            }], dataSources: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], filtersChange: [{
+                type: Output
+            }] } });
+
 /**
  * Member Filter Tile Component
  *
@@ -4747,7 +5025,7 @@ class WidgetComponent {
             id: this.id,
             widgetType: this.widgetType,
             chartType: this.chartType,
-            pluginType: this.pluginType,
+            customWidgetType: this.customWidgetType,
             dataSource: this.dataSource,
             dataOptions: this.dataOptions,
             filters: this.filters,
@@ -4771,7 +5049,7 @@ class WidgetComponent {
     }
 }
 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 class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
+WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetComponent, selector: "csdk-widget", inputs: { id: "id", widgetType: "widgetType", chartType: "chartType", customWidgetType: "customWidgetType", 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 class=\"csdk-full-size-container\"></div>\n", isInline: true, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'csdk-widget', template: template, styles: [".csdk-full-size-container{width:100%;height:100%}\n"] }]
@@ -4784,7 +5062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], chartType: [{
                 type: Input
-            }], pluginType: [{
+            }], customWidgetType: [{
                 type: Input
             }], dataSource: [{
                 type: Input
@@ -4987,6 +5265,7 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         DashboardComponent,
         PivotTableWidgetComponent,
         FilterTileComponent,
+        FiltersPanelComponent,
         WidgetComponent], imports: [CommonModule, DecoratorsModule], exports: [ChartComponent,
         TableComponent,
         ChartWidgetComponent,
@@ -5019,6 +5298,7 @@ SdkUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         DashboardComponent,
         PivotTableWidgetComponent,
         FilterTileComponent,
+        FiltersPanelComponent,
         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: [{
@@ -5057,6 +5337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DashboardComponent,
                         PivotTableWidgetComponent,
                         FilterTileComponent,
+                        FiltersPanelComponent,
                         WidgetComponent,
                     ],
                     imports: [CommonModule, DecoratorsModule],
@@ -5093,6 +5374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DashboardComponent,
                         PivotTableWidgetComponent,
                         FilterTileComponent,
+                        FiltersPanelComponent,
                         WidgetComponent,
                     ],
                     providers: [],
@@ -5593,5 +5875,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, 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 };
+export { AreaChartComponent, AreaRangeChartComponent, AreamapChartComponent, BarChartComponent, BoxplotChartComponent, ChartComponent, ChartWidgetComponent, ColumnChartComponent, ContextMenuComponent, CriteriaFilterTileComponent, CustomWidgetsService, DashboardByIdComponent, DashboardComponent, DashboardService, DateRangeFilterTileComponent, DrilldownBreadcrumbsComponent, DrilldownWidgetComponent, FilterService, FilterTileComponent, FiltersPanelComponent, FunnelChartComponent, HierarchyService, IndicatorChartComponent, LineChartComponent, MemberFilterTileComponent, PieChartComponent, PivotTableComponent, PivotTableWidgetComponent, PolarChartComponent, QueryService, RelativeDateFilterTileComponent, SISENSE_CONTEXT_CONFIG_TOKEN, ScatterChartComponent, ScattermapChartComponent, SdkUiModule, SisenseContextService, SunburstChartComponent, THEME_CONFIG_TOKEN, TableComponent, TableWidgetComponent, ThemeService, TrackableService, TreemapChartComponent, WidgetByIdComponent, WidgetComponent, WidgetService, createCustomWidgetsContextConnector, createSisenseContextConnector, createThemeContextConnector, dashboardHelpers, dashboardModelTranslator, widgetModelTranslator };
 //# sourceMappingURL=sisense-sdk-ui-angular.mjs.map