@masterteam/dashboard-builder 0.0.1 → 0.0.3

package/types/masterteam-dashboard-builder.d.ts

@@ -327,6 +327,15 @@ interface DashboardDialogItem {
     chartTypeId?: string;
     loading?: boolean;
 }
+/**
+ * Standalone dashboard builder data payload
+ */
+interface DashboardBuilderData {
+    page?: DashboardPage | null;
+    charts?: DashboardChartItem[];
+    dialogs?: DashboardDialogItem[];
+    filters?: any[];
+}
 /**
  * Dashboard page configuration
  * Alias for Report with Dashboard type - used for backwards compatibility
@@ -650,6 +659,10 @@ declare class DashboardBuilder implements OnInit, OnDestroy {
     readonly backButton: _angular_core.InputSignal<boolean>;
     /** Dashboard/Page ID to load */
     readonly pageId: _angular_core.InputSignal<string | number | null>;
+    /** Standalone mode (when true, builder runs without API calls) */
+    readonly standalone: _angular_core.InputSignal<boolean>;
+    /** Standalone dashboard data model */
+    readonly dashboardData: _angular_core.ModelSignal<DashboardBuilderData | null>;
     /** Read-only mode */
     readonly readonly: _angular_core.InputSignal<boolean>;
     /** Emit when page config changes */
@@ -690,13 +703,15 @@ declare class DashboardBuilder implements OnInit, OnDestroy {
     /** Reference to chart settings drawer */
     private chartSettingsRef;
     readonly languageCode: _angular_core.Signal<string>;
-    readonly direction: _angular_core.Signal<"rtl" | "ltr">;
+    readonly direction: _angular_core.Signal<"ltr" | "rtl">;
     readonly chartActionsContext: ChartActionsContext;
     readonly options: GridsterConfig;
     private subscription;
     private isDragging;
     private scrollInterval;
     private dragStartY;
+    private applyingDashboardData;
+    private emittingDashboardData;
     readonly menuItems: _angular_core.Signal<MenuItem[]>;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -760,8 +775,11 @@ declare class DashboardBuilder implements OnInit, OnDestroy {
     private handleDragEnd;
     private startAutoScroll;
     private stopAutoScroll;
+    constructor();
+    private applyDashboardData;
+    private emitDashboardDataChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardBuilder, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardBuilder, "mt-dashboard-builder", never, { "isPage": { "alias": "isPage"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "backButton": { "alias": "backButton"; "required": false; "isSignal": true; }; "pageId": { "alias": "pageId"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "chartsChange": "chartsChange"; "onSave": "onSave"; "onBack": "onBack"; "onAddChart": "onAddChart"; "onEditChart": "onEditChart"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardBuilder, "mt-dashboard-builder", never, { "isPage": { "alias": "isPage"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "backButton": { "alias": "backButton"; "required": false; "isSignal": true; }; "pageId": { "alias": "pageId"; "required": false; "isSignal": true; }; "standalone": { "alias": "standalone"; "required": false; "isSignal": true; }; "dashboardData": { "alias": "dashboardData"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "dashboardData": "dashboardDataChange"; "pageChange": "pageChange"; "chartsChange": "chartsChange"; "onSave": "onSave"; "onBack": "onBack"; "onAddChart": "onAddChart"; "onEditChart": "onEditChart"; }, never, never, true, never>;
 }
 
 /**
@@ -813,16 +831,16 @@ declare class DashboardViewer implements OnInit, OnDestroy {
     readonly dialogs: _angular_core.WritableSignal<DashboardDialogItem[]>;
     readonly filters: _angular_core.WritableSignal<any[]>;
     readonly languageCode: _angular_core.Signal<string>;
-    readonly direction: _angular_core.Signal<"rtl" | "ltr">;
+    readonly direction: _angular_core.Signal<"ltr" | "rtl">;
     readonly options: GridsterConfig;
     private subscription;
     private chartsDataEffect;
     private dialogsDataEffect;
     private filtersDataEffect;
+    private pageIdEffect;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setupSubscriptions;
-    private loadPageIfNeeded;
     loadPage(id: string | number): void;
     reloadPage(): void;
     /**
@@ -1135,8 +1153,31 @@ interface FilterConfig {
  * Filter option
  */
 interface FilterOption {
-    label: string;
+    key?: string;
+    label: string | Record<string, string>;
+    value: any;
+    icon?: string;
+    color?: string;
+}
+/**
+ * Static filter configuration for button-group style filtering
+ */
+interface StaticFilterConfig {
+    show: boolean;
+    filters: StaticFilterItem[];
+    defaultIndex?: number;
+    style?: 'buttons' | 'pills' | 'tabs';
+}
+/**
+ * Static filter item
+ */
+interface StaticFilterItem {
+    key: string;
     value: any;
+    label: {
+        en: string;
+        ar: string;
+    };
     icon?: string;
     color?: string;
 }
@@ -1239,6 +1280,9 @@ interface HeaderCardConfig$1 {
     showHeader?: boolean;
     isHeaderHidden?: boolean;
     headerClickable?: boolean;
+    isHeaderCentered?: boolean;
+    headerFontSize?: number;
+    headerColor?: string;
     icon?: string;
     iconColor?: string;
     titleColor?: string;
@@ -1256,6 +1300,10 @@ interface CardBorderStyleConfig {
     'background-color'?: string;
     'box-shadow'?: string;
     'border-radius'?: number;
+    color?: string;
+    'font-size'?: string;
+    iconColor?: string;
+    iconBgColor?: string;
 }
 interface CardStyleConfig$1 {
     backgroundColor?: string;
@@ -1280,9 +1328,9 @@ declare class CardContentComponent {
     /** Card style configuration (background, shadows, border radius) */
     readonly cardStyleConfig: _angular_core.InputSignal<CardStyleConfig$1 | null>;
     /** Whether to show header */
-    readonly showHeaderInput: _angular_core.InputSignal<boolean>;
+    readonly showHeader: _angular_core.InputSignal<boolean>;
     /** Whether header is clickable */
-    readonly headerClickableInput: _angular_core.InputSignal<boolean>;
+    readonly headerClickable: _angular_core.InputSignal<boolean>;
     /** No top end content flag */
     readonly isNoTopEnd: _angular_core.InputSignal<boolean>;
     /** Whether this card contains a chart (disables horizontal scroll) */
@@ -1290,16 +1338,18 @@ declare class CardContentComponent {
     /** Header click event */
     readonly headerClick: _angular_core.OutputEmitterRef<void>;
     /** Computed show header */
-    readonly showHeader: _angular_core.Signal<boolean>;
+    readonly showHeaderState: _angular_core.Signal<boolean>;
     /** Computed header clickable */
-    readonly headerClickable: _angular_core.Signal<boolean>;
+    readonly headerClickableState: _angular_core.Signal<boolean>;
+    /** Computed header row styles from StyleConfig (color, font-size passed through) */
+    readonly headerRowStyles: _angular_core.Signal<Record<string, string> | null>;
     /** Computed card styles from StyleConfig and cardStyleConfig */
     readonly cardStyles: _angular_core.Signal<Record<string, string>>;
     /** Computed border radius style */
     readonly borderRadiusStyle: _angular_core.Signal<string>;
     onHeaderClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardContentComponent, "db-card-content", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "headerConfig": { "alias": "headerConfig"; "required": false; "isSignal": true; }; "styleConfig": { "alias": "styleConfig"; "required": false; "isSignal": true; }; "cardStyleConfig": { "alias": "cardStyleConfig"; "required": false; "isSignal": true; }; "showHeaderInput": { "alias": "showHeader"; "required": false; "isSignal": true; }; "headerClickableInput": { "alias": "headerClickable"; "required": false; "isSignal": true; }; "isNoTopEnd": { "alias": "isNoTopEnd"; "required": false; "isSignal": true; }; "isChart": { "alias": "isChart"; "required": false; "isSignal": true; }; }, { "headerClick": "headerClick"; }, never, ["[topEnd]", "[body]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardContentComponent, "mt-card-content", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "headerConfig": { "alias": "headerConfig"; "required": false; "isSignal": true; }; "styleConfig": { "alias": "styleConfig"; "required": false; "isSignal": true; }; "cardStyleConfig": { "alias": "cardStyleConfig"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "headerClickable": { "alias": "headerClickable"; "required": false; "isSignal": true; }; "isNoTopEnd": { "alias": "isNoTopEnd"; "required": false; "isSignal": true; }; "isChart": { "alias": "isChart"; "required": false; "isSignal": true; }; }, { "headerClick": "headerClick"; }, never, ["[topEnd]", "[body]", "[footer]"], true, never>;
 }
 
 declare class CardFilterComponent implements OnInit {
@@ -1323,7 +1373,7 @@ declare class CardFilterComponent implements OnInit {
     /** Filter type */
     readonly filterType: _angular_core.Signal<"date" | "text" | "select" | "multiselect" | "multiSelect" | "daterange">;
     /** Filter options */
-    readonly options: _angular_core.Signal<FilterOption[]>;
+    readonly options: _angular_core.Signal<_masterteam_dashboard_builder.FilterOption[]>;
     /** Placeholder text */
     readonly placeholder: _angular_core.Signal<string>;
     ngOnInit(): void;
@@ -1331,7 +1381,207 @@ declare class CardFilterComponent implements OnInit {
     onMultiFilterChange(values: any[]): void;
     onDateChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFilterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFilterComponent, "db-card-filter", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFilterComponent, "mt-card-filter", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+}
+
+declare class StaticFiltersComponent implements OnInit {
+    private readonly storeService;
+    private readonly transloco;
+    /** Static filter configuration */
+    readonly config: _angular_core.InputSignal<StaticFilterConfig | null>;
+    /** Dashboard ID for store updates */
+    readonly dashboardId: _angular_core.InputSignal<string | number | undefined>;
+    /** Filter change event */
+    readonly filterChange: _angular_core.OutputEmitterRef<{
+        key: string;
+        value: any;
+    }>;
+    /** Currently active filter index */
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** Language code */
+    readonly langCode: _angular_core.Signal<string>;
+    /** Filter items */
+    readonly filters: _angular_core.Signal<StaticFilterItem[]>;
+    /**
+     * Get localized label for filter
+     */
+    getLabel(filter: StaticFilterItem): string;
+    /**
+     * Handle filter button click
+     */
+    onFilterClick(filter: StaticFilterItem, index: number): void;
+    /**
+     * Initialize with default filter if configured
+     */
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StaticFiltersComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StaticFiltersComponent, "mt-static-filters", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+}
+
+/**
+ * Filter Field Models
+ *
+ * Defines the structure for dynamic filter fields configuration
+ * used in dashboard page filtering.
+ */
+/** Localized text with English and Arabic translations */
+interface LocalizedText {
+    en: string;
+    ar: string;
+}
+/** Filter field types supported by the system */
+type FilterFieldType = 'dropdownTVService' | 'lookup' | 'status' | 'phaseGate' | 'user' | 'date' | 'section' | 'separator' | 'year' | 'month' | 'quarter' | 'checkbox' | 'schemaSettings' | 'schemaSettingsLeafs';
+/** Selection item for dropdown configuration */
+interface FilterSelectionItem {
+    id: number;
+    moduleType?: string;
+    moduleId?: number;
+    filters?: any[];
+    modules?: any[];
+    properties?: any[];
+}
+/** Filter field configuration details */
+interface FilterFieldConfiguration {
+    payload?: {
+        dashboardId: number;
+        selection: FilterSelectionItem[];
+        chartType: string;
+        query: {
+            selectedProperties: string[];
+        };
+    };
+    lookupId?: number;
+    schemaLevelId?: number;
+    logId?: number;
+    isRequird?: boolean;
+    isMultiple?: boolean;
+    checked?: boolean;
+    minYear?: number;
+    maxYear?: number;
+}
+/** Filter field definition */
+interface FilterField {
+    key?: string;
+    name?: LocalizedText;
+    type: FilterFieldType;
+    configuration?: FilterFieldConfiguration;
+}
+/** Filter field type option for dropdown */
+interface FilterFieldTypeOption {
+    value: FilterFieldType;
+    label: string;
+    products: string[];
+}
+/**
+ * Dynamic Filter Field
+ *
+ * An extended filter definition with options and loading state
+ * for chart-level dynamic filtering.
+ */
+interface DynamicFilterField extends FilterField {
+    /** Options loaded from API */
+    options?: DynamicFilterOption[];
+    /** Loading state for async options */
+    loading?: boolean;
+    /** Currently selected value(s) */
+    selectedValue?: any;
+}
+/**
+ * Dynamic Filter Option
+ *
+ * A single option in a dynamic filter dropdown.
+ */
+interface DynamicFilterOption {
+    id: number | string;
+    name: string | LocalizedText;
+    value?: any;
+    color?: string;
+    icon?: string;
+}
+
+declare class DynamicFiltersComponent implements OnInit {
+    private readonly storeService;
+    private readonly transloco;
+    /** Dynamic filter fields configuration */
+    readonly fields: _angular_core.InputSignal<DynamicFilterField[]>;
+    /** Dashboard ID for store updates */
+    readonly dashboardId: _angular_core.InputSignal<string | number | undefined>;
+    /** Whether to show labels above filters */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Filter change event */
+    readonly filterChange: _angular_core.OutputEmitterRef<{
+        key: string;
+        value: any;
+    }>;
+    /** All filters change event - emitted with all current values */
+    readonly filtersChange: _angular_core.OutputEmitterRef<Record<string, any>>;
+    /** Current filter values */
+    private currentValues;
+    /** Language code */
+    readonly langCode: _angular_core.Signal<string>;
+    /** Month options */
+    readonly months: {
+        value: number;
+        labelEn: string;
+        labelAr: string;
+    }[];
+    /** Quarter options */
+    readonly quarters: {
+        value: number;
+        labelEn: string;
+        labelAr: string;
+    }[];
+    ngOnInit(): void;
+    /**
+     * Get localized field label
+     */
+    getFieldLabel(field: DynamicFilterField): string;
+    /**
+     * Get localized option label
+     */
+    getOptionLabel(option: any): string;
+    /**
+     * Get selected value for a field
+     */
+    getSelectedValue(field: DynamicFilterField): any;
+    /**
+     * Get year options based on configuration
+     */
+    getYearOptions(field: DynamicFilterField): number[];
+    /**
+     * Handle field value change
+     */
+    onFieldChange(field: DynamicFilterField, value: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicFiltersComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicFiltersComponent, "mt-dynamic-filters", never, { "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; "filtersChange": "filtersChange"; }, never, never, true, never>;
+}
+
+interface CardInfoConfig$1 {
+    show?: boolean;
+    type?: 'text' | 'html';
+    value?: string | {
+        html?: string;
+        keys?: Array<{
+            key: string;
+            en?: string;
+            ar?: string;
+        }>;
+    };
+}
+declare class CardInfoComponent {
+    private readonly transloco;
+    readonly cardInfo: _angular_core.InputSignal<CardInfoConfig$1 | null>;
+    readonly showInfo: _angular_core.Signal<string | false | {
+        html?: string;
+        keys?: Array<{
+            key: string;
+            en?: string;
+            ar?: string;
+        }>;
+    } | undefined>;
+    readonly tooltipContent: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardInfoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardInfoComponent, "mt-card-info", never, { "cardInfo": { "alias": "cardInfo"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ChartCardComponent implements OnInit, OnDestroy {
@@ -1358,19 +1608,29 @@ declare class ChartCardComponent implements OnInit, OnDestroy {
     readonly title: _angular_core.Signal<string>;
     /** Show filter flag */
     readonly showFilter: _angular_core.Signal<any>;
-    /** Show top end section (filter or extra filters) */
+    /** Show top end section (filter or extra filters or cardInfo or static/dynamic filters) */
     readonly showTopEnd: _angular_core.Signal<any>;
+    /** Card info configuration */
+    readonly cardInfoConfig: _angular_core.Signal<any>;
     /** Filter configuration */
     readonly filterConfig: _angular_core.Signal<{
         [key: string]: any;
         configs?: any[];
     } | undefined>;
+    /** Static filter configuration */
+    readonly staticFilterConfig: _angular_core.Signal<StaticFilterConfig | null>;
+    /** Dynamic filter fields */
+    readonly dynamicFilterFields: _angular_core.Signal<DynamicFilterField[]>;
+    /** Show static filters */
+    readonly showStaticFilters: _angular_core.Signal<boolean | undefined>;
+    /** Show dynamic filters */
+    readonly showDynamicFilters: _angular_core.Signal<boolean>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onChartClick(event: any): void;
     onHeaderClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartCardComponent, "db-chart-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "isConfigMode": { "alias": "isConfigMode"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartCardComponent, "mt-chart-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "isConfigMode": { "alias": "isConfigMode"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 type EChartsType = any;
@@ -1472,7 +1732,7 @@ declare class EChartComponent implements OnInit, AfterViewInit, OnChanges, OnDes
      */
     getChartInstance(): EChartsType | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EChartComponent, "db-echart", never, { "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; "chartConfig": { "alias": "chartConfig"; "required": false; "isSignal": true; }; "configurationItem": { "alias": "configurationItem"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "headerHidden": { "alias": "headerHidden"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EChartComponent, "mt-echart", never, { "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; "chartConfig": { "alias": "chartConfig"; "required": false; "isSignal": true; }; "configurationItem": { "alias": "configurationItem"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "headerHidden": { "alias": "headerHidden"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; }, never, never, true, never>;
 }
 
 interface EntityData {
@@ -1573,7 +1833,11 @@ declare class EntityPreviewCardComponent implements OnInit, OnDestroy {
 interface StatusItem {
     label: string;
     color: string;
-    shape?: 'circle' | 'square';
+    shape?: 'circle' | 'square' | 'rectangul' | 'rhombic' | 'rect';
+    borderColor?: string;
+    borderBottomColor?: string;
+    iconClass?: string;
+    iconSize?: number;
 }
 declare class HeaderCardComponent implements OnInit, OnDestroy {
     private readonly storeService;
@@ -1631,7 +1895,7 @@ declare class HeaderCardComponent implements OnInit, OnDestroy {
     onArrowClick(): void;
     onClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderCardComponent, "db-header-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderCardComponent, "mt-header-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 interface LevelCardData$1 {
@@ -1729,7 +1993,7 @@ declare class ListStatisticCardComponent implements OnInit, OnDestroy {
      */
     doActions(event: any, type: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListStatisticCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListStatisticCardComponent, "db-list-statistic-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListStatisticCardComponent, "mt-list-statistic-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface SkeletonConfig {
@@ -1749,7 +2013,7 @@ declare class SkeletonCardComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private getSkeletonsForComponent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCardComponent, "db-skeleton-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCardComponent, "mt-skeleton-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class StatisticCardComponent implements OnInit {
@@ -1900,7 +2164,7 @@ declare class TableCardComponent implements OnInit, OnDestroy {
      */
     onHeaderClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCardComponent, "db-table-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCardComponent, "mt-table-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 declare class DashboardItemStoreService {
@@ -2112,15 +2376,16 @@ declare class ChartDataService {
 }
 
 declare class BarChartHandler {
+    private readonly storeService;
     /**
      * handleBarChart - matches functionName from CHART_TYPES
      * Returns ECharts option directly (exactly like old BarChartService.handleBarChart)
      */
     handleBarChart(dataResponse: any, config: ItemConfig): any;
     /**
-     * Format X axis value
+     * Format X axis value using the formatXAxis utility
      */
-    private formatXAxis;
+    private formatXAxisValue;
     /**
      * Apply bar override configurations
      */
@@ -2129,6 +2394,11 @@ declare class BarChartHandler {
      * Build grouped bar chart
      */
     private buildGroupedBarChart;
+    /**
+     * handleEntityPreviewWithFormula - matches old entityPreviewWithFormula component
+     * Transforms bar chart data into entity preview format (flat array of properties)
+     */
+    handleEntityPreviewWithFormula(dataResponse: any, config: ItemConfig): any;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChartHandler, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<BarChartHandler>;
 }
@@ -2152,6 +2422,7 @@ declare class PieChartHandler {
 }
 
 declare class StackBarChartHandler {
+    private readonly storeService;
     /**
      * Helper method to convert legend position based on language
      */
@@ -2226,7 +2497,7 @@ declare class OverviewCardHandler {
      * handleHeader - for header component
      * Extracts title from first value (same as old PropertiesService.handleHeader)
      */
-    handleHeader(data: any, config: ItemConfig): any;
+    handleHeader(data: any, _config: ItemConfig): any;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OverviewCardHandler, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<OverviewCardHandler>;
 }
@@ -2394,18 +2665,18 @@ declare class LevelCardHandler {
      * Returns data directly like old LevelCardService:
      * result?.map(data => data?.details?.map(...).sort(...))
      */
-    handlelevelCards(result: any, config: ItemConfig): any;
+    handlelevelCards(result: any, _config: ItemConfig): any;
     /**
      * handlelevelCardsWithFilter - matches functionName from CHART_TYPES
      * Returns data directly like old LevelCardService:
      * [[{ data: levelProps }]]
      */
-    handlelevelCardsWithFilter(result: any, config: ItemConfig): any;
+    handlelevelCardsWithFilter(result: any, _config: ItemConfig): any;
     /**
      * Handle grouped level cards (multiple selections)
      * Returns data directly
      */
-    handleGrouped(dataResponse: any[], config: ItemConfig): any;
+    handleGrouped(dataResponse: any[], _config: ItemConfig): any;
     /**
      * Parse level cards from details array (standard API response)
      */
@@ -2642,10 +2913,32 @@ declare function createTooltipFormatter(config?: {
 }): (value: number) => string;
 /**
  * Format words with underscores for display
+ * Matches old formatterWordsUnderBar from Formatters.ts
  * @param text - Text to format
- * @param maxLength - Optional max length to truncate to
+ * @param maxCharsPerLine - Max characters per line before wrapping
+ * @param insideReport - When true, return full text with line breaks (no truncation)
+ */
+declare function formatWordsUnderBar(text: string, maxCharsPerLine?: number, insideReport?: boolean): string;
+/**
+ * Format X Axis Configuration
+ */
+interface FormatXAxisConfig$1 {
+    /** Format type: dateToMonth, month, date, custom */
+    type?: 'dateToMonth' | 'month' | 'date' | 'custom';
+    /** Use short month format (Jan vs January) */
+    shortFormate?: boolean;
+    /** Custom date format string (for 'date' type) */
+    customDateFormat?: string;
+    /** Custom text suffix (for 'custom' type) */
+    customText?: string;
+}
+/**
+ * Format X-axis value based on configuration
+ * Matches old FormaterXAxis function from dashboardBuilder
+ * @param value - The X-axis category value (typically a date string)
+ * @param configFormat - Configuration object with type and format options
  */
-declare function formatWordsUnderBar(text: string, maxLength?: number): string;
+declare function formatXAxis(value: string | Date, configFormat?: FormatXAxisConfig$1): string;
 
 /**
  * Chart Helpers
@@ -3022,7 +3315,10 @@ declare class DashboardStoreService {
     /** Language code */
     readonly languageCode: _angular_core.WritableSignal<string>;
     /** Direction */
-    readonly direction: _angular_core.WritableSignal<"rtl" | "ltr">;
+    readonly direction: _angular_core.WritableSignal<"ltr" | "rtl">;
+    /** Inside Report Viewer flag - controls text truncation in charts */
+    private insideReportViewerSignal;
+    readonly insideReportViewer: _angular_core.Signal<boolean>;
     /** Reload current page subject */
     private reloadCurrentPageSubject;
     readonly reloadCurrentPage$: rxjs.Observable<void>;
@@ -3038,6 +3334,11 @@ declare class DashboardStoreService {
      * Update stop actions flag
      */
     updateStopActions(value: boolean): void;
+    /**
+     * Set inside report viewer mode
+     * When true, axis labels won't be truncated and custom legends may be skipped
+     */
+    setInsideReportViewer(value: boolean): void;
     /**
      * Update dynamic key in store
      */
@@ -3119,61 +3420,6 @@ declare class ManageBreadcrumb implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ManageBreadcrumb, "mt-manage-breadcrumb", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Filter Field Models
- *
- * Defines the structure for dynamic filter fields configuration
- * used in dashboard page filtering.
- */
-/** Localized text with English and Arabic translations */
-interface LocalizedText {
-    en: string;
-    ar: string;
-}
-/** Filter field types supported by the system */
-type FilterFieldType = 'dropdownTVService' | 'lookup' | 'status' | 'phaseGate' | 'user' | 'date' | 'section' | 'separator' | 'year' | 'month' | 'quarter' | 'checkbox' | 'schemaSettings' | 'schemaSettingsLeafs';
-/** Selection item for dropdown configuration */
-interface FilterSelectionItem {
-    id: number;
-    moduleType?: string;
-    moduleId?: number;
-    filters?: any[];
-    modules?: any[];
-    properties?: any[];
-}
-/** Filter field configuration details */
-interface FilterFieldConfiguration {
-    payload?: {
-        dashboardId: number;
-        selection: FilterSelectionItem[];
-        chartType: string;
-        query: {
-            selectedProperties: string[];
-        };
-    };
-    lookupId?: number;
-    schemaLevelId?: number;
-    logId?: number;
-    isRequird?: boolean;
-    isMultiple?: boolean;
-    checked?: boolean;
-    minYear?: number;
-    maxYear?: number;
-}
-/** Filter field definition */
-interface FilterField {
-    key?: string;
-    name?: LocalizedText;
-    type: FilterFieldType;
-    configuration?: FilterFieldConfiguration;
-}
-/** Filter field type option for dropdown */
-interface FilterFieldTypeOption {
-    value: FilterFieldType;
-    label: string;
-    products: string[];
-}
-
 /**
  * Manage Filter On Page Component
  *
@@ -3274,6 +3520,18 @@ declare class ChartSettingsDrawer {
     /** The chart item signal - reactive for proper change detection */
     readonly item: _angular_core.WritableSignal<DashboardChartItem | null>;
     constructor();
+    /** Active tab: 'display' or 'chartControls' */
+    readonly activeTab: _angular_core.WritableSignal<string>;
+    /** Tab options - always show Display, show Chart Controls only when a chart control UI exists */
+    readonly tabOptions: _angular_core.Signal<{
+        label: string;
+        value: string;
+        icon: string;
+    }[]>;
+    /** Resolve ChartTypeConfig from CHART_TYPES based on item config */
+    readonly resolvedChartType: _angular_core.Signal<ChartTypeConfig | null>;
+    /** ItemConfig computed for DisplaySettings input */
+    readonly itemConfig: _angular_core.Signal<ItemConfig | null>;
     /** Determine the type of manage UI to show */
     readonly manageType: _angular_core.Signal<QuickManageType>;
     /** Default config (full config for DefaultControlUi) */
@@ -3296,6 +3554,8 @@ declare class ChartSettingsDrawer {
     onStackBarConfigChange(config: any): void;
     /** Update snapshot bar chart config */
     onSnapshotBarConfigChange(config: any): void;
+    /** Update client config from DisplaySettings */
+    onClientConfigUpdate(partialClientConfig: Partial<ClientConfig>): void;
     /** Apply changes and close drawer */
     apply(): void;
     /** Close without changes */
@@ -3304,130 +3564,605 @@ declare class ChartSettingsDrawer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartSettingsDrawer, "mt-chart-settings-drawer", never, {}, {}, never, never, true, never>;
 }
 
-interface DefaultControlConfig {
-    title: string;
-    titleFontSize: number;
-    titleColor: string;
-    showSubtitle: boolean;
-    subtitle: string;
-    subtitleFontSize: number;
-    subtitleColor: string;
-    backgroundColor: string;
-    borderColor: string;
-    borderRadius: number;
-    padding: number;
+/** Shadow configuration */
+interface ShadowConfig {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
 }
-declare class DefaultControlUi implements ControlValueAccessor {
-    readonly config: _angular_core.WritableSignal<DefaultControlConfig>;
-    readonly fontSizeOptions: {
-        label: string;
-        value: number;
-    }[];
-    private onChange;
-    private onTouched;
-    writeValue(value: DefaultControlConfig): void;
-    registerOnChange(fn: (value: DefaultControlConfig) => void): void;
-    registerOnTouched(fn: () => void): void;
-    updateConfig(partial: Partial<DefaultControlConfig>): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DefaultControlUi, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DefaultControlUi, "mt-default-control-ui", never, {}, {}, never, never, true, never>;
+/** Override label configuration */
+interface OverrideLabel {
+    en: string;
+    ar: string;
 }
-
-/**
- * Pie Chart Configuration - Matches old implementation exactly
- */
-interface PieControlConfig {
-    radius?: number;
-    thickness?: number;
-    padAngle?: number;
+/** Card style configuration */
+interface CardStyleConfig {
     borderRadius?: number;
-    centerX?: number;
-    centerY?: number;
-    startAngle?: number;
-    endAngle?: number;
-    roseType?: boolean | 'radius' | 'area';
-    useEnhancedLegend?: boolean;
-    legendPosition?: 'left' | 'right' | 'top' | 'bottom';
-    legendVerticalAlign?: 'top' | 'middle' | 'bottom';
-    legendOrientation?: 'horizontal' | 'vertical';
-    legendType?: 'scroll' | 'plain';
-    legendFontSize?: number;
-    legendFontColor?: string;
-    legendIcon?: string;
-    labelFontSize?: number;
-    totalValueFontSize?: number;
-    labelFontColor?: string;
-    labelFormatter?: string;
-    tooltipTrigger?: 'item' | 'axis' | 'none';
-    labelPosition?: string;
-    showLabelLine?: boolean;
-    explode?: number;
-    animation?: boolean;
-    animationDuration?: number;
-    tooltipBackgroundColor?: string;
-    tooltipBorderColor?: string;
-    tooltipBorderWidth?: number;
+    backgroundColor?: string;
+    shadows?: ShadowConfig[];
 }
-declare class PieControlUi implements ControlValueAccessor {
-    readonly config: _angular_core.WritableSignal<PieControlConfig>;
-    readonly roseTypeOptions: ({
-        label: string;
-        value: boolean;
-    } | {
-        label: string;
-        value: string;
-    })[];
-    readonly labelPositionOptions: {
+/** Header card configuration */
+interface HeaderCardConfig {
+    isHeaderCentered?: boolean;
+    isHeaderHidden?: boolean;
+    headerColor?: string;
+    headerFontSize?: number;
+}
+/** Label center configuration */
+interface LabelCenterConfig {
+    hide?: boolean;
+    text?: {
+        en?: string;
+        ar?: string;
+    };
+}
+/** Sort data bars configuration */
+interface SortDataBarsConfig {
+    enable?: boolean;
+    sortBy?: string;
+    order?: 'asc' | 'desc' | string;
+    direction?: 'asc' | 'desc' | string;
+}
+/** Card info configuration */
+interface CardInfoConfig {
+    show?: boolean;
+    value?: any;
+    type?: string;
+}
+/** Format configuration */
+interface FormatConfig {
+    type?: string | null;
+    showCurrency?: boolean;
+    handleLang?: boolean;
+    customText?: string | null;
+    customDateFormat?: string | null;
+    showCurrencyTooltip?: boolean;
+    hideSuffixes?: boolean;
+}
+/** Table format configuration */
+interface TableFormatConfig {
+    thTextColor?: string | null;
+    thBackgroundColor?: string | null;
+    tdTextColor?: string | null;
+    groupBackgroundColor?: string | null;
+    groupTextColor?: string | null;
+    thFontBold?: boolean;
+    tdFontBold?: boolean;
+    thFontSize?: number | null;
+    tdFontSize?: number | null;
+    hideTableSubheader?: boolean;
+    disableCurrencyFormat?: boolean;
+    showPercentageAsProgressBar?: boolean;
+    showPercentageStatus?: boolean;
+    hiddenColumns?: string[];
+    sortConfig?: {
+        column: string;
+        direction: 'asc' | 'desc';
+    };
+}
+/** Color condition configuration */
+interface ColorCondition {
+    color: string;
+    type: 'equal' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'between';
+    value1?: number;
+    value2?: number;
+    labelEn?: string;
+    labelAr?: string;
+}
+/** Color conditions by bar index */
+interface ColorConditionsByIndex {
+    [key: number]: ColorCondition[];
+}
+/** Ring gauge configuration */
+interface RingGaugeConfig {
+    centerProperty?: string;
+    statusProperty?: string;
+    hiddenProperties?: string[];
+}
+/** Order configuration */
+interface OrderConfig {
+    order?: string[];
+    operation?: string;
+    orderBy?: string;
+}
+/** Card list configuration */
+interface CardListConfig {
+    hideProperties?: string[];
+}
+/** Property translation entry */
+interface PropertyTranslation {
+    ar: string;
+    en: string;
+}
+/** Property translations map */
+interface PropertyTranslationsMap {
+    [key: string]: PropertyTranslation;
+}
+/** Property color entry */
+interface PropertyColorEntry {
+    selectedKey: string;
+}
+/** Property colors map */
+interface PropertyColorsMap {
+    [key: string]: PropertyColorEntry;
+}
+/** Props config as index item */
+interface PropsConfigAsIndexItem {
+    width?: string;
+    colorAsProperty?: string;
+    hidden?: boolean;
+    border?: string[];
+}
+/** Format X-Axis configuration */
+interface FormatXAxisConfig {
+    type?: string | null;
+    shortFormate?: boolean;
+}
+/** Extra column from lookup configuration */
+interface ExtraColumnFromLookupConfig {
+    extraCoulmnFromLookup?: boolean;
+    lookupId?: number | null;
+    groupedBy?: string | null;
+    propKey?: string | null;
+}
+/** Timeline header colors config (single) */
+interface TimelineHeaderSingleConfig {
+    bgColor?: string;
+    color?: string;
+}
+/**
+ * Display Settings Component
+ *
+ * Comprehensive visual/display configuration with chart-type-aware field visibility.
+ * Shows only relevant settings based on the selected chart type.
+ */
+declare class DisplaySettings {
+    /** Current configuration */
+    readonly config: _angular_core.InputSignal<ItemConfig | null>;
+    /** Selected chart type */
+    readonly chartType: _angular_core.InputSignal<ChartTypeConfig | null>;
+    /** Available properties (for property-based configs) */
+    readonly availableProperties: _angular_core.InputSignal<any[]>;
+    /** Selected properties from query */
+    readonly selectedProperties: _angular_core.InputSignal<string[]>;
+    /** Available lookups for extra column from lookup */
+    readonly lookups: _angular_core.InputSignal<any[]>;
+    /** Emit client config changes */
+    readonly clientConfigChange: _angular_core.OutputEmitterRef<Partial<ClientConfig>>;
+    /** Color condition expansion state */
+    readonly colorConditionExpanded: _angular_core.WritableSignal<Record<number, boolean>>;
+    /** Property translations paste state */
+    readonly showPropertyTranslationsPaste: _angular_core.WritableSignal<boolean>;
+    readonly propertyTranslationsPasteText: _angular_core.WritableSignal<string>;
+    readonly propertyTranslationsPasteError: _angular_core.WritableSignal<string>;
+    /** Property colors paste state */
+    readonly showPropertyColorsPaste: _angular_core.WritableSignal<boolean>;
+    readonly propertyColorsPasteText: _angular_core.WritableSignal<string>;
+    readonly propertyColorsPasteError: _angular_core.WritableSignal<string>;
+    /**
+     * Chart type to fields mapping
+     * Each chart type maps to comma-separated list of visible fields
+     */
+    private readonly chartTypeFieldsMap;
+    /** Computed fields to show based on chart type */
+    readonly fieldsToShow: _angular_core.Signal<string>;
+    /** Check if a field should be shown */
+    shouldShowField(fieldName: string): boolean;
+    /** Position options */
+    readonly positionOptions: {
         label: string;
         value: string;
     }[];
+    /** Legend position options */
     readonly legendPositionOptions: {
         label: string;
         value: string;
     }[];
-    readonly legendVerticalAlignOptions: {
+    /** Legend icon type options */
+    readonly legendIconOptions: {
         label: string;
         value: string;
     }[];
-    readonly legendOrientationOptions: {
+    /** Label position options */
+    readonly labelPositionOptions: {
         label: string;
         value: string;
     }[];
-    readonly legendTypeOptions: {
+    /** Map options */
+    readonly mapOptions: {
         label: string;
         value: string;
     }[];
-    readonly legendIconOptions: {
+    /** Order type options */
+    readonly orderTypeOptions: {
         label: string;
         value: string;
     }[];
-    readonly labelFormatterOptions: {
+    /** Order operation options */
+    readonly orderOperationOptions: {
         label: string;
         value: string;
     }[];
-    readonly tooltipTriggerOptions: {
+    /** Border options for props config */
+    readonly borderOptions: {
         label: string;
         value: string;
     }[];
-    readonly fontSizeOptions: {
+    /** Color condition type options */
+    readonly colorConditionTypeOptions: {
         label: string;
-        value: number;
+        value: string;
     }[];
-    private onChange;
-    private onTouched;
-    writeValue(value: PieControlConfig): void;
-    registerOnChange(fn: (value: PieControlConfig) => void): void;
-    registerOnTouched(fn: () => void): void;
-    updateConfig(partial: Partial<PieControlConfig>): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PieControlUi, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PieControlUi, "mt-pie-control-ui", never, {}, {}, never, never, true, never>;
-}
-
-interface BarControlConfig {
-    barWidth?: number;
-    barGap?: number;
-    barCategoryGap?: number;
-    barType?: 'bar' | 'line';
+    /** Format type options */
+    readonly formatTypeOptions: ({
+        label: string;
+        value: null;
+    } | {
+        label: string;
+        value: string;
+    })[];
+    /** Format X-Axis type options */
+    readonly formatXAxisTypeOptions: ({
+        label: string;
+        value: null;
+    } | {
+        label: string;
+        value: string;
+    })[];
+    /** Default color palette */
+    readonly defaultColorPalette: string[];
+    /** Current style config */
+    readonly styleConfig: _angular_core.Signal<StyleConfig>;
+    /** Current config as type */
+    readonly configAsType: _angular_core.Signal<{
+        [key: string]: any;
+        icon?: string;
+        breadcrumb?: any[];
+    }>;
+    /** Current card info */
+    readonly cardInfo: _angular_core.Signal<CardInfoConfig>;
+    /** Current header card config */
+    readonly headerCardConfig: _angular_core.Signal<HeaderCardConfig>;
+    /** Current card style config */
+    readonly cardStyleConfig: _angular_core.Signal<CardStyleConfig>;
+    /** Current label config */
+    readonly labelConfig: _angular_core.Signal<{
+        show?: boolean;
+        showTotalInTop?: boolean;
+        position?: string;
+    }>;
+    /** Current legend config */
+    readonly legendConfig: _angular_core.Signal<{
+        show?: boolean;
+        position?: string;
+        iconType?: string;
+    }>;
+    /** Current label center config */
+    readonly labelCenterConfig: _angular_core.Signal<LabelCenterConfig>;
+    /** Current sort data bars config */
+    readonly sortDataBarsConfig: _angular_core.Signal<SortDataBarsConfig>;
+    /** Current override labels */
+    readonly overrideLabels: _angular_core.Signal<OverrideLabel[]>;
+    /** Current default colors */
+    readonly defaultColors: _angular_core.Signal<string[]>;
+    /** Current order config */
+    readonly orderConfig: _angular_core.Signal<any>;
+    /** Current format config */
+    readonly formatConfig: _angular_core.Signal<FormatConfig>;
+    /** Current table format config */
+    readonly tableFormatConfig: _angular_core.Signal<TableFormatConfig>;
+    /** Current color by condition */
+    readonly colorByCondition: _angular_core.Signal<ColorConditionsByIndex>;
+    /** Current ring gauge config */
+    readonly ringGaugeConfig: _angular_core.Signal<RingGaugeConfig>;
+    /** Current card list config */
+    readonly cardListConfig: _angular_core.Signal<CardListConfig>;
+    /** Props config as index */
+    readonly propsConfigAsIndex: _angular_core.Signal<PropsConfigAsIndexItem[]>;
+    /** Property translations map */
+    readonly propertyTranslations: _angular_core.Signal<PropertyTranslationsMap>;
+    /** Property colors map */
+    readonly propertyColors: _angular_core.Signal<PropertyColorsMap>;
+    /** Format X-Axis config */
+    readonly formatXAxisConfig: _angular_core.Signal<FormatXAxisConfig>;
+    /** Table columns config (extra column from lookup) */
+    readonly tableColumnsConfig: _angular_core.Signal<ExtraColumnFromLookupConfig>;
+    /** Timeline header colors config (single object for old format) */
+    readonly timelineHeaderColorsSingle: _angular_core.Signal<TimelineHeaderSingleConfig>;
+    /** Toggle association */
+    readonly toggleAssociation: _angular_core.Signal<boolean>;
+    /** Selected properties resolved from input or config */
+    readonly resolvedSelectedProperties: _angular_core.Signal<any[]>;
+    /** Available properties resolved from input or selected properties */
+    readonly resolvedAvailableProperties: _angular_core.Signal<any[]>;
+    /** Available properties as options */
+    readonly propertyOptions: _angular_core.Signal<{
+        label: any;
+        value: any;
+    }[]>;
+    /** Available translation options (exclude used) */
+    readonly availableTranslationOptions: _angular_core.Signal<{
+        label: any;
+        value: any;
+    }[]>;
+    /** Available color options (exclude used) */
+    readonly availableColorOptions: _angular_core.Signal<{
+        label: any;
+        value: any;
+    }[]>;
+    /** All property options (full list) */
+    readonly allPropertyKeyOptions: _angular_core.Signal<{
+        label: any;
+        value: any;
+    }[]>;
+    /** Ring gauge hidden properties options */
+    readonly ringGaugeHiddenOptions: _angular_core.Signal<{
+        label: any;
+        value: any;
+    }[]>;
+    /** Update style config property */
+    updateStyleConfig(key: keyof StyleConfig | string, value: any): void;
+    /** Update configAsType property */
+    updateConfigAsType(key: string, value: any): void;
+    /** Update nested configAsType property */
+    updateNestedConfigAsType(parentKey: string, key: string, value: any): void;
+    /** Update header card config */
+    updateHeaderCardConfig(key: keyof HeaderCardConfig, value: any): void;
+    /** Update legend settings */
+    updateLegend(key: string, value: unknown): void;
+    /** Update label settings */
+    updateLabel(key: string, value: unknown): void;
+    /** Update label center config */
+    updateLabelCenterConfig(key: string, value: any): void;
+    /** Update label center text */
+    updateLabelCenterText(lang: 'en' | 'ar', value: string): void;
+    /** Update card style config */
+    updateCardStyleConfig(key: keyof CardStyleConfig, value: any): void;
+    /** Update sort data bars config */
+    updateSortDataBarsConfig(key: string, value: any): void;
+    /** Update card info config */
+    updateCardInfoConfig(key: string, value: any): void;
+    /** Update border top visibility */
+    updateBorderTopShow(show: boolean): void;
+    /** Update border top color */
+    updateBorderTopColor(color: string): void;
+    /** Update map type */
+    updateMapType(value: string): void;
+    /** Add a new shadow */
+    addShadow(): void;
+    /** Remove a shadow */
+    removeShadow(index: number): void;
+    /** Update a shadow property */
+    updateShadow(index: number, key: keyof ShadowConfig, value: any): void;
+    /** Add override label */
+    addOverrideLabel(): void;
+    /** Remove override label */
+    removeOverrideLabel(index: number): void;
+    /** Update override label */
+    updateOverrideLabel(index: number, lang: 'en' | 'ar', value: string): void;
+    /** Add a default color */
+    addDefaultColor(color: string): void;
+    /** Remove a default color */
+    removeDefaultColor(index: number): void;
+    /** Update a default color */
+    updateDefaultColor(index: number, color: string): void;
+    trackByIndex(index: number): number;
+    /** Update format config */
+    updateFormatConfig(key: keyof FormatConfig, value: any): void;
+    /** Update table format config */
+    updateTableFormatConfig(key: keyof TableFormatConfig, value: any): void;
+    /** Update table format sort config */
+    updateTableFormatSortConfig(key: 'column' | 'direction', value: string): void;
+    /** Reset table format to default */
+    resetTableFormat(): void;
+    /** Get color condition indexes */
+    getColorConditionIndexes(): number[];
+    /** Check if a bar index is expanded */
+    isColorConditionExpanded(index: number): boolean;
+    /** Toggle bar index expansion */
+    toggleColorConditionExpanded(index: number): void;
+    /** Add bar index for color conditions */
+    addColorConditionIndex(): void;
+    /** Remove bar index */
+    removeColorConditionIndex(index: number): void;
+    /** Add condition to bar index */
+    addColorCondition(index: number): void;
+    /** Remove condition from bar index */
+    removeColorCondition(index: number, conditionIndex: number): void;
+    /** Update color condition */
+    updateColorCondition(index: number, conditionIndex: number, key: keyof ColorCondition, value: any): void;
+    /** Update ring gauge config */
+    updateRingGaugeConfig(key: keyof RingGaugeConfig, value: any): void;
+    /** Update card list hide properties */
+    updateCardListHideProperties(properties: string[]): void;
+    /** Add props config item */
+    addPropsConfigItem(): void;
+    /** Remove props config item */
+    removePropsConfigItem(index: number): void;
+    /** Update props config item */
+    updatePropsConfigItem(index: number, key: keyof PropsConfigAsIndexItem, value: any): void;
+    /** Update order config field */
+    updateOrderConfig(key: keyof OrderConfig, value: any): void;
+    /** Add order item */
+    addOrderItem(): void;
+    /** Remove order item */
+    removeOrderItem(index: number): void;
+    /** Update order item */
+    updateOrderItem(index: number, value: string): void;
+    /** Move order item up */
+    moveOrderItemUp(index: number): void;
+    /** Move order item down */
+    moveOrderItemDown(index: number): void;
+    /** Get property translation keys */
+    getPropertyTranslationKeys(): string[];
+    /** Add property translation */
+    addPropertyTranslation(propertyKey: string): void;
+    /** Remove property translation */
+    removePropertyTranslation(propertyKey: string): void;
+    /** Update property translation */
+    updatePropertyTranslation(propertyKey: string, lang: 'ar' | 'en', value: string): void;
+    /** Get property color keys */
+    getPropertyColorKeys(): string[];
+    /** Add property color */
+    addPropertyColor(propertyKey: string): void;
+    /** Copy property translations */
+    copyPropertyTranslations(): void;
+    /** Toggle property translations paste area */
+    togglePropertyTranslationsPaste(): void;
+    /** Apply pasted property translations */
+    applyPropertyTranslationsPaste(): void;
+    /** Remove property color */
+    removePropertyColor(propertyKey: string): void;
+    /** Update property color */
+    updatePropertyColor(propertyKey: string, selectedKey: string): void;
+    /** Copy property colors */
+    copyPropertyColors(): void;
+    /** Toggle property colors paste area */
+    togglePropertyColorsPaste(): void;
+    /** Apply pasted property colors */
+    applyPropertyColorsPaste(): void;
+    /** Update format X-Axis config */
+    updateFormatXAxisConfig(key: keyof FormatXAxisConfig, value: any): void;
+    /** Update table columns config */
+    updateTableColumnsConfig(key: keyof ExtraColumnFromLookupConfig, value: any): void;
+    /** Update timeline header colors (single config) */
+    updateTimelineHeaderColorSingle(key: 'bgColor' | 'color', value: string): void;
+    /** Update toggle association */
+    updateToggleAssociation(value: boolean): void;
+    /** Selected property for adding translations */
+    readonly selectedPropertyForTranslation: _angular_core.WritableSignal<string>;
+    /** Selected property for adding colors */
+    readonly selectedPropertyForColor: _angular_core.WritableSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DisplaySettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DisplaySettings, "mt-display-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartType": { "alias": "chartType"; "required": false; "isSignal": true; }; "availableProperties": { "alias": "availableProperties"; "required": false; "isSignal": true; }; "selectedProperties": { "alias": "selectedProperties"; "required": false; "isSignal": true; }; "lookups": { "alias": "lookups"; "required": false; "isSignal": true; }; }, { "clientConfigChange": "clientConfigChange"; }, never, never, true, never>;
+}
+
+interface DefaultControlConfig {
+    title: string;
+    titleFontSize: number;
+    titleColor: string;
+    showSubtitle: boolean;
+    subtitle: string;
+    subtitleFontSize: number;
+    subtitleColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    padding: number;
+}
+declare class DefaultControlUi implements ControlValueAccessor {
+    readonly config: _angular_core.WritableSignal<DefaultControlConfig>;
+    readonly fontSizeOptions: {
+        label: string;
+        value: number;
+    }[];
+    private onChange;
+    private onTouched;
+    writeValue(value: DefaultControlConfig): void;
+    registerOnChange(fn: (value: DefaultControlConfig) => void): void;
+    registerOnTouched(fn: () => void): void;
+    updateConfig(partial: Partial<DefaultControlConfig>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DefaultControlUi, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DefaultControlUi, "mt-default-control-ui", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Pie Chart Configuration - Matches old implementation exactly
+ */
+interface PieControlConfig {
+    radius?: number;
+    thickness?: number;
+    padAngle?: number;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+    startAngle?: number;
+    endAngle?: number;
+    roseType?: boolean | 'radius' | 'area';
+    useEnhancedLegend?: boolean;
+    legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+    legendVerticalAlign?: 'top' | 'middle' | 'bottom';
+    legendOrientation?: 'horizontal' | 'vertical';
+    legendType?: 'scroll' | 'plain';
+    legendFontSize?: number;
+    legendFontColor?: string;
+    legendIcon?: string;
+    labelFontSize?: number;
+    totalValueFontSize?: number;
+    labelFontColor?: string;
+    labelFormatter?: string;
+    tooltipTrigger?: 'item' | 'axis' | 'none';
+    labelPosition?: string;
+    showLabelLine?: boolean;
+    explode?: number;
+    animation?: boolean;
+    animationDuration?: number;
+    tooltipBackgroundColor?: string;
+    tooltipBorderColor?: string;
+    tooltipBorderWidth?: number;
+}
+declare class PieControlUi implements ControlValueAccessor {
+    readonly config: _angular_core.WritableSignal<PieControlConfig>;
+    readonly roseTypeOptions: ({
+        label: string;
+        value: boolean;
+    } | {
+        label: string;
+        value: string;
+    })[];
+    readonly labelPositionOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly legendPositionOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly legendVerticalAlignOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly legendOrientationOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly legendTypeOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly legendIconOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly labelFormatterOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly tooltipTriggerOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly fontSizeOptions: {
+        label: string;
+        value: number;
+    }[];
+    private onChange;
+    private onTouched;
+    writeValue(value: PieControlConfig): void;
+    registerOnChange(fn: (value: PieControlConfig) => void): void;
+    registerOnTouched(fn: () => void): void;
+    updateConfig(partial: Partial<PieControlConfig>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PieControlUi, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PieControlUi, "mt-pie-control-ui", never, {}, {}, never, never, true, never>;
+}
+
+interface BarControlConfig {
+    barWidth?: number;
+    barGap?: number;
+    barCategoryGap?: number;
+    barType?: 'bar' | 'line';
     xAxisShow?: boolean;
     yAxisShow?: boolean;
     yAxisFormat?: string;
@@ -3522,926 +4257,449 @@ interface StackBarControlConfig {
     isStacked?: boolean;
     borderRadius?: string | number;
 }
-declare class StackBarControlUi implements ControlValueAccessor {
-    readonly config: _angular_core.WritableSignal<StackBarControlConfig>;
-    readonly legendPositionYOptions: {
-        label: string;
-        value: string;
-    }[];
-    readonly legendPositionXOptions: {
-        label: string;
-        value: string;
-    }[];
-    readonly barTypeOptions: {
-        label: string;
-        value: string;
-    }[];
-    readonly yAxisFormatOptions: ({
-        label: string;
-        value: null;
-    } | {
-        label: string;
-        value: string;
-    })[];
-    readonly fontSizeOptions: {
-        label: string;
-        value: number;
-    }[];
-    private onChange;
-    private onTouched;
-    writeValue(value: StackBarControlConfig): void;
-    registerOnChange(fn: (value: StackBarControlConfig) => void): void;
-    registerOnTouched(fn: () => void): void;
-    updateConfig(partial: Partial<StackBarControlConfig>): void;
-    onYAxisFormatChange(formatType: string | null): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StackBarControlUi, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StackBarControlUi, "mt-stack-bar-control-ui", never, {}, {}, never, never, true, never>;
-}
-
-/**
- * Manage Item Component (Drawer)
- *
- * Main drawer component for configuring chart/widget items.
- * Uses tabs to organize different configuration sections.
- * Provides ManageItemService for state sharing between child components.
- */
-declare class ManageItem implements OnInit {
-    private _dashboardService;
-    private _manageItemService;
-    private _dialogConfig;
-    readonly modal: ModalService;
-    ref: ModalRef<any> | null;
-    /** Input data from drawer - supports both input() and dialog data */
-    readonly data: _angular_core.InputSignal<{
-        chart?: DashboardChartItem;
-        isDialog?: boolean;
-        isNew?: boolean;
-        chartType?: ChartTypeConfig;
-        defaultSize?: {
-            cols: number;
-            rows: number;
-        };
-    } | null>;
-    /** Whether chart type is pre-selected (hides type selection) */
-    readonly hasPreselectedType: _angular_core.Signal<boolean>;
-    /** Tab options with translation keys */
-    readonly tabOptions: _angular_core.WritableSignal<{
-        label: string;
-        value: string;
-        icon: string;
-    }[]>;
-    /** Active tab */
-    readonly activeTab: _angular_core.WritableSignal<string>;
-    /** Chart configuration being edited - from service */
-    readonly config: _angular_core.Signal<ItemConfig | null>;
-    /** Chart type ID - from service */
-    readonly chartTypeId: _angular_core.Signal<string>;
-    /** Selected chart type info */
-    readonly selectedChartType: _angular_core.WritableSignal<ChartTypeConfig | null>;
-    /** Is this a dialog item */
-    readonly isDialog: _angular_core.Signal<any>;
-    /** Is this a new item */
-    readonly isNew: _angular_core.Signal<any>;
-    /** Saving state */
-    readonly saving: _angular_core.WritableSignal<boolean>;
-    /** Validation state */
-    readonly isValid: _angular_core.Signal<boolean>;
-    /** Initialize from dialog data effect */
-    private _initEffect;
-    ngOnInit(): void;
-    save(): void;
-    cancel(): void;
-    /** Update config from child components */
-    onConfigUpdate(partialConfig: Partial<ItemConfig>): void;
-    /** Update service config */
-    onServiceConfigUpdate(partialConfig: Partial<ItemConfig['serviceConfig']>): void;
-    /** Update client config */
-    onClientConfigUpdate(partialConfig: Partial<ItemConfig['clientConfig']>): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ManageItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ManageItem, "mt-manage-item", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/**
- * General Settings Component
- *
- * Handles general chart configuration:
- * - Chart type selection (visual grid)
- * - Title (English & Arabic)
- * - Component name
- */
-declare class GeneralSettings {
-    private transloco;
-    /** Current configuration */
-    readonly config: _angular_core.InputSignal<ItemConfig | null>;
-    /** Is dialog item (hides chart type selection) */
-    readonly isDialog: _angular_core.InputSignal<boolean>;
-    /** Whether chart type is pre-selected (hides chart type selection) */
-    readonly hasPreselectedType: _angular_core.InputSignal<boolean>;
-    /** Emit config changes */
-    readonly configChange: _angular_core.OutputEmitterRef<Partial<ItemConfig>>;
-    /** Emit chart type selection */
-    readonly chartTypeChange: _angular_core.OutputEmitterRef<ChartTypeConfig>;
-    /** All available chart types */
-    readonly chartTypes: _angular_core.WritableSignal<ChartTypeConfig[]>;
-    /** Chart types filtered (not hidden) */
-    readonly chartTypesFiltered: _angular_core.Signal<ChartTypeConfig[]>;
-    /** Grouped chart types by category */
-    readonly chartTypesByCategory: _angular_core.Signal<{
-        card: ChartTypeConfig[];
-        chart: ChartTypeConfig[];
-        table: ChartTypeConfig[];
-        special: ChartTypeConfig[];
-        layout: ChartTypeConfig[];
-    }>;
-    /** Currently selected chart type */
-    readonly selectedChartType: _angular_core.Signal<ChartTypeConfig | null | undefined>;
-    /**
-     * Select a chart type
-     */
-    selectChartType(type: ChartTypeConfig): void;
-    /**
-     * Check if a chart type is selected
-     */
-    isTypeSelected(type: ChartTypeConfig): boolean;
-    /**
-     * Update title field
-     */
-    updateTitle(lang: 'en' | 'ar', value: string): void;
-    /**
-     * Update component name
-     */
-    updateComponentName(value: string): void;
-    /**
-     * Get category label
-     */
-    getCategoryLabel(category: string): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GeneralSettings, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GeneralSettings, "mt-general-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "isDialog": { "alias": "isDialog"; "required": false; "isSignal": true; }; "hasPreselectedType": { "alias": "hasPreselectedType"; "required": false; "isSignal": true; }; }, { "configChange": "configChange"; "chartTypeChange": "chartTypeChange"; }, never, never, true, never>;
-}
-
-/**
- * Selection module info for linking - includes properties for each selection
- */
-interface SelectionModule {
-    selectionId: number;
-    selector: string;
-    moduleType: string;
-    moduleTypeName: string;
-    moduleName: string;
-    properties: IProperty[];
-}
-
-/**
- * Chart Query Series
- */
-interface ChartQuerySeries {
-    key: string;
-    color: string;
-    valueProperty: string | null;
-    aggregateFunction: string;
-    groupByProperties: string[];
-    autoStack: boolean;
-    stackProperties: string[];
-    autoStackByProperty: string | null;
-    filters: ChartQuerySeriesFilter[];
-    extraProperties: string[];
-    formula?: string;
-    showAdvancedSettings?: boolean;
-    barType?: 'bar' | 'line' | 'lineAccumulated';
-}
-/**
- * Chart Query Series Filter
- */
-interface ChartQuerySeriesFilter {
-    propertyKey: string | null;
-    value: any;
-    operator: string;
-}
-/**
- * Chart Query Configuration
- */
-interface ChartQuery {
-    categoryProperty: string;
-    series: ChartQuerySeries[];
-}
-
-/** Properties grouped by module for select with [group]="true" */
-interface PropertyGroup {
-    label: string;
-    items: IProperty[];
-}
-/**
- * Aggregation Property Configuration
- */
-interface AggregationProperty {
-    propertyKey: string | null;
-    aggregateFunction: string;
-    alias?: string;
-}
-/**
- * Table Query Configuration Value
- */
-interface TableQueryValue {
-    selectedProperties: string[];
-    AggregationProperties: AggregationProperty[];
-    lookupProperty: string;
-    PivotProperties: string[];
-}
-/**
- * Table Query Component
- *
- * Handles query configuration for table/dialog chart types.
- * Implements ControlValueAccessor for form integration.
- */
-declare class TableQuery implements ControlValueAccessor {
-    private fb;
-    /** Available properties (flat) */
-    readonly propertiesFlat: _angular_core.InputSignal<IProperty[]>;
-    /** Properties grouped by module for grouped select */
-    readonly propertiesGrouped: _angular_core.InputSignal<PropertyGroup[]>;
-    /** Whether to use grouped select (when multiple modules) */
-    readonly useGroupedSelect: _angular_core.Signal<boolean>;
-    /** Options config for multi-select */
-    readonly optionsConfig: _angular_core.Signal<{
-        optionValue: string;
-        optionLabel: string;
-        items: IProperty[];
-    }>;
-    /** Aggregate function options */
-    readonly aggregateFunctions: {
+declare class StackBarControlUi implements ControlValueAccessor {
+    readonly config: _angular_core.WritableSignal<StackBarControlConfig>;
+    readonly legendPositionYOptions: {
+        label: string;
         value: string;
+    }[];
+    readonly legendPositionXOptions: {
         label: string;
+        value: string;
+    }[];
+    readonly barTypeOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly yAxisFormatOptions: ({
+        label: string;
+        value: null;
+    } | {
+        label: string;
+        value: string;
+    })[];
+    readonly fontSizeOptions: {
+        label: string;
+        value: number;
     }[];
-    /** Main form */
-    readonly queryForm: FormGroup<{
-        selectedProperties: _angular_forms.FormControl<string[] | null>;
-        AggregationProperties: FormArray<FormGroup<any>>;
-        lookupProperty: _angular_forms.FormControl<string | null>;
-        PivotProperties: _angular_forms.FormControl<string[] | null>;
-    }>;
-    /** Disabled state */
-    disabled: boolean;
-    /** ControlValueAccessor callbacks */
     private onChange;
     private onTouched;
-    constructor();
-    writeValue(value: TableQueryValue): void;
-    registerOnChange(fn: (value: TableQueryValue) => void): void;
+    writeValue(value: StackBarControlConfig): void;
+    registerOnChange(fn: (value: StackBarControlConfig) => void): void;
     registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    validate(): ValidationErrors | null;
-    get aggregationArray(): FormArray;
-    createAggregationFormGroup(agg?: Partial<AggregationProperty>): FormGroup;
-    addAggregation(): void;
-    removeAggregation(index: number): void;
-    trackByIndex(index: number): number;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableQuery, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableQuery, "mt-table-query", never, { "propertiesFlat": { "alias": "propertiesFlat"; "required": false; "isSignal": true; }; "propertiesGrouped": { "alias": "propertiesGrouped"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    updateConfig(partial: Partial<StackBarControlConfig>): void;
+    onYAxisFormatChange(formatType: string | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StackBarControlUi, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StackBarControlUi, "mt-stack-bar-control-ui", never, {}, {}, never, never, true, never>;
 }
 
-/** Module properties response */
-interface ModuleProperties {
-    /** Module type (e.g., "Level") */
-    moduleName: string;
-    /** Display name for the specific selector (e.g., "Projects" for "Level:7") */
-    selectorName: string | null;
-    /** Full selector (e.g., "Level:7") */
-    selector: string;
-    moduleId?: number;
-    properties: IProperty[];
-}
-/**
- * Query component type based on chart type and component name
- */
-type QueryComponentType = 'general' | 'table' | 'timeline' | 'timelineMultiLevel' | 'map' | 'splitter' | 'properties' | 'snapshot' | 'phaseGate' | 'repeater' | 'none';
 /**
- * Data Source Settings Component
+ * Manage Item Component (Drawer)
  *
- * Comprehensive data source configuration:
- * - Module/Data source selection via SelectionConfiguration
- * - Source links for multiple selections via SourceLinkConfiguration
- * - Query configuration based on chart type (GeneralQuery, TableQuery, etc.)
+ * Main drawer component for configuring chart/widget items.
+ * Uses tabs to organize different configuration sections.
+ * Provides ManageItemService for state sharing between child components.
  */
-declare class DataSourceSettings {
-    private dashboardService;
-    /** Current configuration */
-    readonly config: _angular_core.InputSignal<ItemConfig | null>;
-    /** Selected chart type */
-    readonly chartType: _angular_core.InputSignal<ChartTypeConfig | null>;
-    /** Emit service config changes */
-    readonly serviceConfigChange: _angular_core.OutputEmitterRef<Partial<ServiceConfig>>;
-    /** Properties grouped by module */
-    readonly modulesProperties: _angular_core.WritableSignal<ModuleProperties[]>;
-    /** Flattened properties list with grouping info */
-    readonly propertiesFlat: _angular_core.Signal<IPropertyWithGroup[]>;
-    /**
-     * Properties grouped for select field with [group]="true"
-     * Structure: [{ label: 'Projects', items: [{ name, key }, ...] }, ...]
-     * Uses selectorName for display (e.g., "Projects" instead of "Level")
-     */
-    readonly propertiesGrouped: _angular_core.Signal<{
-        label: string;
-        items: IProperty[];
-    }[]>;
-    /**
-     * Selection modules for source link configuration
-     * Built from selections with their loaded module info
-     */
-    readonly selectionModules: _angular_core.Signal<SelectionModule[]>;
-    /** Query component type based on chart type and component name */
-    readonly queryComponentType: _angular_core.Signal<QueryComponentType>;
-    /** Loading states */
-    readonly loadingProperties: _angular_core.WritableSignal<boolean>;
-    /** Tab state: 'selection' or 'customApi' */
-    readonly activeTab: _angular_core.WritableSignal<"selection" | "customApi">;
-    /** Tab options for display */
-    readonly tabOptions: {
-        id: string;
+declare class ManageItem implements OnInit {
+    private _dashboardService;
+    private _manageItemService;
+    private _dialogConfig;
+    readonly modal: ModalService;
+    ref: ModalRef<any> | null;
+    /** Input data from drawer - supports both input() and dialog data */
+    readonly data: _angular_core.InputSignal<{
+        chart?: DashboardChartItem;
+        isDialog?: boolean;
+        isNew?: boolean;
+        chartType?: ChartTypeConfig;
+        defaultSize?: {
+            cols: number;
+            rows: number;
+        };
+    } | null>;
+    /** Whether chart type is pre-selected (hides type selection) */
+    readonly hasPreselectedType: _angular_core.Signal<boolean>;
+    /** Tab options with translation keys */
+    readonly tabOptions: _angular_core.WritableSignal<{
         label: string;
-    }[];
-    /** Custom API configuration */
-    readonly customApi: _angular_core.WritableSignal<CustomApi | null>;
-    /** Internal selections state */
-    readonly selections: _angular_core.WritableSignal<ISelection[]>;
-    readonly sourceLinks: _angular_core.WritableSignal<SourceLink[]>;
-    readonly query: _angular_core.WritableSignal<any>;
-    readonly isNormalized: _angular_core.WritableSignal<boolean>;
-    readonly groupByMultiple: _angular_core.WritableSignal<string[]>;
-    /** Repeater dashboard selection */
-    readonly repeaterDashboardId: _angular_core.WritableSignal<number | null>;
-    readonly availableDashboards: _angular_core.WritableSignal<{
-        id: number;
-        name: string;
+        value: string;
+        icon: string;
     }[]>;
-    /** Show source links when multiple selections exist */
-    readonly showSourceLinks: _angular_core.Signal<boolean>;
-    /** Hide selection config for layout, snapshot, phaseGate types (they don't need data source selection) */
-    readonly hideSelectionConfig: _angular_core.Signal<boolean>;
-    /** Show groupByMultiple for table queries (non-report mode) */
-    readonly showGroupByMultiple: _angular_core.Signal<boolean>;
-    /**
-     * Derived signal: Extract module keys from selections for change detection
-     * Only changes when actual selectors change, not on every selection update
-     */
-    private readonly moduleKeysSignature;
-    /** Track last loaded module signature to prevent duplicate requests */
-    private lastLoadedSignature;
-    constructor();
-    /**
-     * Load properties for all selections using bulk API
-     * Single POST request to /metadata/modules/properties
-     * Enriches response with selectorName from tree data
-     */
-    loadPropertiesForSelections(selections: ISelection[]): void;
-    /**
-     * Handle selection changes
-     */
-    onSelectionsChange(selections: ISelection[]): void;
-    /**
-     * Handle module change - update selections, effect handles property loading
-     */
-    onModuleChange(event: {
-        selectionId: number;
-        selector: string;
-        selectorName?: string | null;
-    }): void;
-    /**
-     * Extract module type from selector (e.g., "Level:7" -> "Level")
-     */
-    private extractModuleTypeFromSelector;
-    /**
-     * Handle source links change
-     */
-    onSourceLinksChange(links: SourceLink[]): void;
-    /**
-     * Handle query change (general query)
-     */
-    onQueryChange(query: ChartQuery): void;
-    /**
-     * Handle table query change
-     */
-    onTableQueryChange(query: TableQuery): void;
-    /**
-     * Handle timeline query change
-     */
-    onTimelineQueryChange(query: any): void;
-    /**
-     * Handle map query change
-     */
-    onMapQueryChange(query: any): void;
-    /**
-     * Handle splitter query change
-     */
-    onSplitterQueryChange(query: any): void;
-    /**
-     * Handle properties query change
-     */
-    onPropertiesQueryChange(query: any): void;
-    /**
-     * Handle snapshot query change
-     */
-    onSnapshotQueryChange(query: any): void;
-    /**
-     * Handle groupByMultiple change
-     */
-    onGroupByMultipleChange(values: string[]): void;
+    /** Active tab */
+    readonly activeTab: _angular_core.WritableSignal<string>;
+    /** Chart configuration being edited - from service */
+    readonly config: _angular_core.Signal<ItemConfig | null>;
+    /** Chart type ID - from service */
+    readonly chartTypeId: _angular_core.Signal<string>;
+    /** Selected chart type info */
+    readonly selectedChartType: _angular_core.WritableSignal<ChartTypeConfig | null>;
+    /** Is this a dialog item */
+    readonly isDialog: _angular_core.Signal<any>;
+    /** Is this a new item */
+    readonly isNew: _angular_core.Signal<any>;
+    /** Saving state */
+    readonly saving: _angular_core.WritableSignal<boolean>;
+    /** Validation state */
+    readonly isValid: _angular_core.Signal<boolean>;
+    ngOnInit(): void;
+    save(): void;
+    cancel(): void;
+    /** Update config from child components */
+    onConfigUpdate(partialConfig: Partial<ItemConfig>): void;
+    /** Update service config */
+    onServiceConfigUpdate(partialConfig: Partial<ItemConfig['serviceConfig']>): void;
+    /** Update client config */
+    onClientConfigUpdate(partialConfig: Partial<ItemConfig['clientConfig']>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ManageItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ManageItem, "mt-manage-item", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * General Settings Component
+ *
+ * Handles general chart configuration:
+ * - Chart type selection (visual grid)
+ * - Title (English & Arabic)
+ * - Component name
+ */
+declare class GeneralSettings {
+    private transloco;
+    /** Current configuration */
+    readonly config: _angular_core.InputSignal<ItemConfig | null>;
+    /** Is dialog item (hides chart type selection) */
+    readonly isDialog: _angular_core.InputSignal<boolean>;
+    /** Whether chart type is pre-selected (hides chart type selection) */
+    readonly hasPreselectedType: _angular_core.InputSignal<boolean>;
+    /** Emit config changes */
+    readonly configChange: _angular_core.OutputEmitterRef<Partial<ItemConfig>>;
+    /** Emit chart type selection */
+    readonly chartTypeChange: _angular_core.OutputEmitterRef<ChartTypeConfig>;
+    /** All available chart types */
+    readonly chartTypes: _angular_core.WritableSignal<ChartTypeConfig[]>;
+    /** Chart types filtered (not hidden) */
+    readonly chartTypesFiltered: _angular_core.Signal<ChartTypeConfig[]>;
+    /** Grouped chart types by category */
+    readonly chartTypesByCategory: _angular_core.Signal<{
+        card: ChartTypeConfig[];
+        chart: ChartTypeConfig[];
+        table: ChartTypeConfig[];
+        special: ChartTypeConfig[];
+        layout: ChartTypeConfig[];
+    }>;
+    /** Currently selected chart type */
+    readonly selectedChartType: _angular_core.Signal<ChartTypeConfig | null | undefined>;
     /**
-     * Handle repeater dashboard selection
+     * Select a chart type
      */
-    onRepeaterDashboardChange(dashboardId: number): void;
+    selectChartType(type: ChartTypeConfig): void;
     /**
-     * Handle isNormalized change
+     * Check if a chart type is selected
      */
-    onIsNormalizedChange(value: boolean): void;
+    isTypeSelected(type: ChartTypeConfig): boolean;
     /**
-     * Handle tab change
+     * Update title field
      */
-    onTabChange(tabId: string): void;
+    updateTitle(lang: 'en' | 'ar', value: string): void;
     /**
-     * Handle custom API change
+     * Update component name
      */
-    onCustomApiChange(customApi: CustomApi | null): void;
+    updateComponentName(value: string): void;
     /**
-     * Get chart type id for query component
+     * Get category label
      */
-    getChartTypeId(): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataSourceSettings, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataSourceSettings, "mt-data-source-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartType": { "alias": "chartType"; "required": false; "isSignal": true; }; }, { "serviceConfigChange": "serviceConfigChange"; }, never, never, true, never>;
+    getCategoryLabel(category: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GeneralSettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GeneralSettings, "mt-general-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "isDialog": { "alias": "isDialog"; "required": false; "isSignal": true; }; "hasPreselectedType": { "alias": "hasPreselectedType"; "required": false; "isSignal": true; }; }, { "configChange": "configChange"; "chartTypeChange": "chartTypeChange"; }, never, never, true, never>;
 }
 
-/** Shadow configuration */
-interface ShadowConfig {
-    x: number;
-    y: number;
-    blur: number;
-    spread: number;
-    color: string;
-}
-/** Override label configuration */
-interface OverrideLabel {
-    en: string;
-    ar: string;
-}
-/** Card style configuration */
-interface CardStyleConfig {
-    borderRadius?: number;
-    backgroundColor?: string;
-    shadows?: ShadowConfig[];
-}
-/** Header card configuration */
-interface HeaderCardConfig {
-    isHeaderCentered?: boolean;
-    isHeaderHidden?: boolean;
-    headerColor?: string;
-    headerFontSize?: number;
-}
-/** Label center configuration */
-interface LabelCenterConfig {
-    hide?: boolean;
-    text?: {
-        en?: string;
-        ar?: string;
-    };
-}
-/** Sort data bars configuration */
-interface SortDataBarsConfig {
-    enable?: boolean;
-    sortBy?: string;
-    order?: 'asc' | 'desc' | string;
-    direction?: 'asc' | 'desc' | string;
-}
-/** Card info configuration */
-interface CardInfoConfig {
-    show?: boolean;
-    value?: any;
-    type?: string;
-}
-/** Format configuration */
-interface FormatConfig {
-    type?: string | null;
-    showCurrency?: boolean;
-    handleLang?: boolean;
-    customText?: string | null;
-    customDateFormat?: string | null;
-    showCurrencyTooltip?: boolean;
-    hideSuffixes?: boolean;
-}
-/** Table format configuration */
-interface TableFormatConfig {
-    thTextColor?: string | null;
-    thBackgroundColor?: string | null;
-    tdTextColor?: string | null;
-    groupBackgroundColor?: string | null;
-    groupTextColor?: string | null;
-    thFontBold?: boolean;
-    tdFontBold?: boolean;
-    thFontSize?: number | null;
-    tdFontSize?: number | null;
-    hideTableSubheader?: boolean;
-    disableCurrencyFormat?: boolean;
-    showPercentageAsProgressBar?: boolean;
-    showPercentageStatus?: boolean;
-    hiddenColumns?: string[];
-    sortConfig?: {
-        column: string;
-        direction: 'asc' | 'desc';
-    };
+/**
+ * Selection module info for linking - includes properties for each selection
+ */
+interface SelectionModule {
+    selectionId: number;
+    selector: string;
+    moduleType: string;
+    moduleTypeName: string;
+    moduleName: string;
+    properties: IProperty[];
 }
-/** Color condition configuration */
-interface ColorCondition {
+
+/**
+ * Chart Query Series
+ */
+interface ChartQuerySeries {
+    key: string;
     color: string;
-    type: 'equal' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'between';
-    value1?: number;
-    value2?: number;
-    labelEn?: string;
-    labelAr?: string;
-}
-/** Color conditions by bar index */
-interface ColorConditionsByIndex {
-    [key: number]: ColorCondition[];
-}
-/** Ring gauge configuration */
-interface RingGaugeConfig {
-    centerProperty?: string;
-    statusProperty?: string;
-    hiddenProperties?: string[];
-}
-/** Order configuration */
-interface OrderConfig {
-    order?: string[];
-    operation?: string;
-    orderBy?: string;
-}
-/** Card list configuration */
-interface CardListConfig {
-    hideProperties?: string[];
-}
-/** Property translation entry */
-interface PropertyTranslation {
-    ar: string;
-    en: string;
+    valueProperty: string | null;
+    aggregateFunction: string;
+    groupByProperties: string[];
+    autoStack: boolean;
+    stackProperties: string[];
+    autoStackByProperty: string | null;
+    filters: ChartQuerySeriesFilter[];
+    extraProperties: string[];
+    formula?: string;
+    showAdvancedSettings?: boolean;
+    barType?: 'bar' | 'line' | 'lineAccumulated';
 }
-/** Property translations map */
-interface PropertyTranslationsMap {
-    [key: string]: PropertyTranslation;
+/**
+ * Chart Query Series Filter
+ */
+interface ChartQuerySeriesFilter {
+    propertyKey: string | null;
+    value: any;
+    operator: string;
 }
-/** Property color entry */
-interface PropertyColorEntry {
-    selectedKey: string;
+/**
+ * Chart Query Configuration
+ */
+interface ChartQuery {
+    categoryProperty: string;
+    series: ChartQuerySeries[];
 }
-/** Property colors map */
-interface PropertyColorsMap {
-    [key: string]: PropertyColorEntry;
+
+/** Properties grouped by module for select with [group]="true" */
+interface PropertyGroup {
+    label: string;
+    items: IProperty[];
 }
-/** Props config as index item */
-interface PropsConfigAsIndexItem {
-    width?: string;
-    colorAsProperty?: string;
-    hidden?: boolean;
-    border?: string[];
+/**
+ * Aggregation Property Configuration
+ */
+interface AggregationProperty {
+    propertyKey: string | null;
+    aggregateFunction: string;
+    alias?: string;
 }
-/** Format X-Axis configuration */
-interface FormatXAxisConfig {
-    type?: string | null;
-    shortFormate?: boolean;
+/**
+ * Table Query Configuration Value
+ */
+interface TableQueryValue {
+    selectedProperties: string[];
+    AggregationProperties: AggregationProperty[];
+    lookupProperty: string;
+    PivotProperties: string[];
 }
-/** Extra column from lookup configuration */
-interface ExtraColumnFromLookupConfig {
-    extraCoulmnFromLookup?: boolean;
-    lookupId?: number | null;
-    groupedBy?: string | null;
-    propKey?: string | null;
+/**
+ * Table Query Component
+ *
+ * Handles query configuration for table/dialog chart types.
+ * Implements ControlValueAccessor for form integration.
+ */
+declare class TableQuery implements ControlValueAccessor {
+    private fb;
+    /** Available properties (flat) */
+    readonly propertiesFlat: _angular_core.InputSignal<IProperty[]>;
+    /** Properties grouped by module for grouped select */
+    readonly propertiesGrouped: _angular_core.InputSignal<PropertyGroup[]>;
+    /** Whether to use grouped select (when multiple modules) */
+    readonly useGroupedSelect: _angular_core.Signal<boolean>;
+    /** Options config for multi-select */
+    readonly optionsConfig: _angular_core.Signal<{
+        optionValue: string;
+        optionLabel: string;
+        items: IProperty[];
+    }>;
+    /** Aggregate function options */
+    readonly aggregateFunctions: {
+        value: string;
+        label: string;
+    }[];
+    /** Main form */
+    readonly queryForm: FormGroup<{
+        selectedProperties: _angular_forms.FormControl<string[] | null>;
+        AggregationProperties: FormArray<FormGroup<any>>;
+        lookupProperty: _angular_forms.FormControl<string | null>;
+        PivotProperties: _angular_forms.FormControl<string[] | null>;
+    }>;
+    /** Disabled state */
+    disabled: boolean;
+    /** ControlValueAccessor callbacks */
+    private onChange;
+    private onTouched;
+    constructor();
+    writeValue(value: TableQueryValue): void;
+    registerOnChange(fn: (value: TableQueryValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(): ValidationErrors | null;
+    get aggregationArray(): FormArray;
+    createAggregationFormGroup(agg?: Partial<AggregationProperty>): FormGroup;
+    addAggregation(): void;
+    removeAggregation(index: number): void;
+    trackByIndex(index: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableQuery, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableQuery, "mt-table-query", never, { "propertiesFlat": { "alias": "propertiesFlat"; "required": false; "isSignal": true; }; "propertiesGrouped": { "alias": "propertiesGrouped"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-/** Timeline header colors config (single) */
-interface TimelineHeaderSingleConfig {
-    bgColor?: string;
-    color?: string;
+
+/** Module properties response */
+interface ModuleProperties {
+    /** Module type (e.g., "Level") */
+    moduleName: string;
+    /** Display name for the specific selector (e.g., "Projects" for "Level:7") */
+    selectorName: string | null;
+    /** Full selector (e.g., "Level:7") */
+    selector: string;
+    moduleId?: number;
+    properties: IProperty[];
 }
 /**
- * Display Settings Component
+ * Query component type based on chart type and component name
+ */
+type QueryComponentType = 'general' | 'table' | 'timeline' | 'timelineMultiLevel' | 'map' | 'splitter' | 'properties' | 'snapshot' | 'phaseGate' | 'repeater' | 'none';
+/**
+ * Data Source Settings Component
  *
- * Comprehensive visual/display configuration with chart-type-aware field visibility.
- * Shows only relevant settings based on the selected chart type.
+ * Comprehensive data source configuration:
+ * - Module/Data source selection via SelectionConfiguration
+ * - Source links for multiple selections via SourceLinkConfiguration
+ * - Query configuration based on chart type (GeneralQuery, TableQuery, etc.)
  */
-declare class DisplaySettings {
+declare class DataSourceSettings {
+    private dashboardService;
     /** Current configuration */
     readonly config: _angular_core.InputSignal<ItemConfig | null>;
     /** Selected chart type */
     readonly chartType: _angular_core.InputSignal<ChartTypeConfig | null>;
-    /** Available properties (for property-based configs) */
-    readonly availableProperties: _angular_core.InputSignal<any[]>;
-    /** Selected properties from query */
-    readonly selectedProperties: _angular_core.InputSignal<string[]>;
-    /** Available lookups for extra column from lookup */
-    readonly lookups: _angular_core.InputSignal<any[]>;
-    /** Emit client config changes */
-    readonly clientConfigChange: _angular_core.OutputEmitterRef<Partial<ClientConfig>>;
-    /** Color condition expansion state */
-    readonly colorConditionExpanded: _angular_core.WritableSignal<Record<number, boolean>>;
-    /** Property translations paste state */
-    readonly showPropertyTranslationsPaste: _angular_core.WritableSignal<boolean>;
-    readonly propertyTranslationsPasteText: _angular_core.WritableSignal<string>;
-    readonly propertyTranslationsPasteError: _angular_core.WritableSignal<string>;
-    /** Property colors paste state */
-    readonly showPropertyColorsPaste: _angular_core.WritableSignal<boolean>;
-    readonly propertyColorsPasteText: _angular_core.WritableSignal<string>;
-    readonly propertyColorsPasteError: _angular_core.WritableSignal<string>;
+    /** Emit service config changes */
+    readonly serviceConfigChange: _angular_core.OutputEmitterRef<Partial<ServiceConfig>>;
+    /** Properties grouped by module */
+    readonly modulesProperties: _angular_core.WritableSignal<ModuleProperties[]>;
+    /** Flattened properties list with grouping info */
+    readonly propertiesFlat: _angular_core.Signal<IPropertyWithGroup[]>;
     /**
-     * Chart type to fields mapping
-     * Each chart type maps to comma-separated list of visible fields
+     * Properties grouped for select field with [group]="true"
+     * Structure: [{ label: 'Projects', items: [{ name, key }, ...] }, ...]
+     * Uses selectorName for display (e.g., "Projects" instead of "Level")
      */
-    private readonly chartTypeFieldsMap;
-    /** Computed fields to show based on chart type */
-    readonly fieldsToShow: _angular_core.Signal<string>;
-    /** Check if a field should be shown */
-    shouldShowField(fieldName: string): boolean;
-    /** Position options */
-    readonly positionOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Legend position options */
-    readonly legendPositionOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Legend icon type options */
-    readonly legendIconOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Label position options */
-    readonly labelPositionOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Map options */
-    readonly mapOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Order type options */
-    readonly orderTypeOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Order operation options */
-    readonly orderOperationOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Border options for props config */
-    readonly borderOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Color condition type options */
-    readonly colorConditionTypeOptions: {
-        label: string;
-        value: string;
-    }[];
-    /** Format type options */
-    readonly formatTypeOptions: ({
-        label: string;
-        value: null;
-    } | {
-        label: string;
-        value: string;
-    })[];
-    /** Format X-Axis type options */
-    readonly formatXAxisTypeOptions: ({
-        label: string;
-        value: null;
-    } | {
+    readonly propertiesGrouped: _angular_core.Signal<{
         label: string;
-        value: string;
-    })[];
-    /** Default color palette */
-    readonly defaultColorPalette: string[];
-    /** Current style config */
-    readonly styleConfig: _angular_core.Signal<StyleConfig>;
-    /** Current config as type */
-    readonly configAsType: _angular_core.Signal<{
-        [key: string]: any;
-        icon?: string;
-        breadcrumb?: any[];
-    }>;
-    /** Current card info */
-    readonly cardInfo: _angular_core.Signal<CardInfoConfig>;
-    /** Current header card config */
-    readonly headerCardConfig: _angular_core.Signal<HeaderCardConfig>;
-    /** Current card style config */
-    readonly cardStyleConfig: _angular_core.Signal<CardStyleConfig>;
-    /** Current label config */
-    readonly labelConfig: _angular_core.Signal<{
-        show?: boolean;
-        showTotalInTop?: boolean;
-        position?: string;
-    }>;
-    /** Current legend config */
-    readonly legendConfig: _angular_core.Signal<{
-        show?: boolean;
-        position?: string;
-        iconType?: string;
-    }>;
-    /** Current label center config */
-    readonly labelCenterConfig: _angular_core.Signal<LabelCenterConfig>;
-    /** Current sort data bars config */
-    readonly sortDataBarsConfig: _angular_core.Signal<SortDataBarsConfig>;
-    /** Current override labels */
-    readonly overrideLabels: _angular_core.Signal<OverrideLabel[]>;
-    /** Current default colors */
-    readonly defaultColors: _angular_core.Signal<string[]>;
-    /** Current order config */
-    readonly orderConfig: _angular_core.Signal<any>;
-    /** Current format config */
-    readonly formatConfig: _angular_core.Signal<FormatConfig>;
-    /** Current table format config */
-    readonly tableFormatConfig: _angular_core.Signal<TableFormatConfig>;
-    /** Current color by condition */
-    readonly colorByCondition: _angular_core.Signal<ColorConditionsByIndex>;
-    /** Current ring gauge config */
-    readonly ringGaugeConfig: _angular_core.Signal<RingGaugeConfig>;
-    /** Current card list config */
-    readonly cardListConfig: _angular_core.Signal<CardListConfig>;
-    /** Props config as index */
-    readonly propsConfigAsIndex: _angular_core.Signal<PropsConfigAsIndexItem[]>;
-    /** Property translations map */
-    readonly propertyTranslations: _angular_core.Signal<PropertyTranslationsMap>;
-    /** Property colors map */
-    readonly propertyColors: _angular_core.Signal<PropertyColorsMap>;
-    /** Format X-Axis config */
-    readonly formatXAxisConfig: _angular_core.Signal<FormatXAxisConfig>;
-    /** Table columns config (extra column from lookup) */
-    readonly tableColumnsConfig: _angular_core.Signal<ExtraColumnFromLookupConfig>;
-    /** Timeline header colors config (single object for old format) */
-    readonly timelineHeaderColorsSingle: _angular_core.Signal<TimelineHeaderSingleConfig>;
-    /** Toggle association */
-    readonly toggleAssociation: _angular_core.Signal<boolean>;
-    /** Selected properties resolved from input or config */
-    readonly resolvedSelectedProperties: _angular_core.Signal<any[]>;
-    /** Available properties resolved from input or selected properties */
-    readonly resolvedAvailableProperties: _angular_core.Signal<any[]>;
-    /** Available properties as options */
-    readonly propertyOptions: _angular_core.Signal<{
-        label: any;
-        value: any;
-    }[]>;
-    /** Available translation options (exclude used) */
-    readonly availableTranslationOptions: _angular_core.Signal<{
-        label: any;
-        value: any;
-    }[]>;
-    /** Available color options (exclude used) */
-    readonly availableColorOptions: _angular_core.Signal<{
-        label: any;
-        value: any;
-    }[]>;
-    /** All property options (full list) */
-    readonly allPropertyKeyOptions: _angular_core.Signal<{
-        label: any;
-        value: any;
+        items: IProperty[];
     }[]>;
-    /** Ring gauge hidden properties options */
-    readonly ringGaugeHiddenOptions: _angular_core.Signal<{
-        label: any;
-        value: any;
+    /**
+     * Selection modules for source link configuration
+     * Built from selections with their loaded module info
+     */
+    readonly selectionModules: _angular_core.Signal<SelectionModule[]>;
+    /** Query component type based on chart type and component name */
+    readonly queryComponentType: _angular_core.Signal<QueryComponentType>;
+    /** Loading states */
+    readonly loadingProperties: _angular_core.WritableSignal<boolean>;
+    /** Tab state: 'selection' or 'customApi' */
+    readonly activeTab: _angular_core.WritableSignal<"selection" | "customApi">;
+    /** Tab options for display */
+    readonly tabOptions: {
+        id: string;
+        label: string;
+    }[];
+    /** Custom API configuration */
+    readonly customApi: _angular_core.WritableSignal<CustomApi | null>;
+    /** Internal selections state */
+    readonly selections: _angular_core.WritableSignal<ISelection[]>;
+    readonly sourceLinks: _angular_core.WritableSignal<SourceLink[]>;
+    readonly query: _angular_core.WritableSignal<any>;
+    readonly isNormalized: _angular_core.WritableSignal<boolean>;
+    readonly groupByMultiple: _angular_core.WritableSignal<string[]>;
+    /** Repeater dashboard selection */
+    readonly repeaterDashboardId: _angular_core.WritableSignal<number | null>;
+    readonly availableDashboards: _angular_core.WritableSignal<{
+        id: number;
+        name: string;
     }[]>;
-    /** Update style config property */
-    updateStyleConfig(key: keyof StyleConfig | string, value: any): void;
-    /** Update configAsType property */
-    updateConfigAsType(key: string, value: any): void;
-    /** Update nested configAsType property */
-    updateNestedConfigAsType(parentKey: string, key: string, value: any): void;
-    /** Update header card config */
-    updateHeaderCardConfig(key: keyof HeaderCardConfig, value: any): void;
-    /** Update legend settings */
-    updateLegend(key: string, value: unknown): void;
-    /** Update label settings */
-    updateLabel(key: string, value: unknown): void;
-    /** Update label center config */
-    updateLabelCenterConfig(key: string, value: any): void;
-    /** Update label center text */
-    updateLabelCenterText(lang: 'en' | 'ar', value: string): void;
-    /** Update card style config */
-    updateCardStyleConfig(key: keyof CardStyleConfig, value: any): void;
-    /** Update sort data bars config */
-    updateSortDataBarsConfig(key: string, value: any): void;
-    /** Update card info config */
-    updateCardInfoConfig(key: string, value: any): void;
-    /** Update border top visibility */
-    updateBorderTopShow(show: boolean): void;
-    /** Update border top color */
-    updateBorderTopColor(color: string): void;
-    /** Update map type */
-    updateMapType(value: string): void;
-    /** Add a new shadow */
-    addShadow(): void;
-    /** Remove a shadow */
-    removeShadow(index: number): void;
-    /** Update a shadow property */
-    updateShadow(index: number, key: keyof ShadowConfig, value: any): void;
-    /** Add override label */
-    addOverrideLabel(): void;
-    /** Remove override label */
-    removeOverrideLabel(index: number): void;
-    /** Update override label */
-    updateOverrideLabel(index: number, lang: 'en' | 'ar', value: string): void;
-    /** Add a default color */
-    addDefaultColor(color: string): void;
-    /** Remove a default color */
-    removeDefaultColor(index: number): void;
-    /** Update a default color */
-    updateDefaultColor(index: number, color: string): void;
-    trackByIndex(index: number): number;
-    /** Update format config */
-    updateFormatConfig(key: keyof FormatConfig, value: any): void;
-    /** Update table format config */
-    updateTableFormatConfig(key: keyof TableFormatConfig, value: any): void;
-    /** Update table format sort config */
-    updateTableFormatSortConfig(key: 'column' | 'direction', value: string): void;
-    /** Reset table format to default */
-    resetTableFormat(): void;
-    /** Get color condition indexes */
-    getColorConditionIndexes(): number[];
-    /** Check if a bar index is expanded */
-    isColorConditionExpanded(index: number): boolean;
-    /** Toggle bar index expansion */
-    toggleColorConditionExpanded(index: number): void;
-    /** Add bar index for color conditions */
-    addColorConditionIndex(): void;
-    /** Remove bar index */
-    removeColorConditionIndex(index: number): void;
-    /** Add condition to bar index */
-    addColorCondition(index: number): void;
-    /** Remove condition from bar index */
-    removeColorCondition(index: number, conditionIndex: number): void;
-    /** Update color condition */
-    updateColorCondition(index: number, conditionIndex: number, key: keyof ColorCondition, value: any): void;
-    /** Update ring gauge config */
-    updateRingGaugeConfig(key: keyof RingGaugeConfig, value: any): void;
-    /** Update card list hide properties */
-    updateCardListHideProperties(properties: string[]): void;
-    /** Add props config item */
-    addPropsConfigItem(): void;
-    /** Remove props config item */
-    removePropsConfigItem(index: number): void;
-    /** Update props config item */
-    updatePropsConfigItem(index: number, key: keyof PropsConfigAsIndexItem, value: any): void;
-    /** Update order config field */
-    updateOrderConfig(key: keyof OrderConfig, value: any): void;
-    /** Add order item */
-    addOrderItem(): void;
-    /** Remove order item */
-    removeOrderItem(index: number): void;
-    /** Update order item */
-    updateOrderItem(index: number, value: string): void;
-    /** Move order item up */
-    moveOrderItemUp(index: number): void;
-    /** Move order item down */
-    moveOrderItemDown(index: number): void;
-    /** Get property translation keys */
-    getPropertyTranslationKeys(): string[];
-    /** Add property translation */
-    addPropertyTranslation(propertyKey: string): void;
-    /** Remove property translation */
-    removePropertyTranslation(propertyKey: string): void;
-    /** Update property translation */
-    updatePropertyTranslation(propertyKey: string, lang: 'ar' | 'en', value: string): void;
-    /** Get property color keys */
-    getPropertyColorKeys(): string[];
-    /** Add property color */
-    addPropertyColor(propertyKey: string): void;
-    /** Copy property translations */
-    copyPropertyTranslations(): void;
-    /** Toggle property translations paste area */
-    togglePropertyTranslationsPaste(): void;
-    /** Apply pasted property translations */
-    applyPropertyTranslationsPaste(): void;
-    /** Remove property color */
-    removePropertyColor(propertyKey: string): void;
-    /** Update property color */
-    updatePropertyColor(propertyKey: string, selectedKey: string): void;
-    /** Copy property colors */
-    copyPropertyColors(): void;
-    /** Toggle property colors paste area */
-    togglePropertyColorsPaste(): void;
-    /** Apply pasted property colors */
-    applyPropertyColorsPaste(): void;
-    /** Update format X-Axis config */
-    updateFormatXAxisConfig(key: keyof FormatXAxisConfig, value: any): void;
-    /** Update table columns config */
-    updateTableColumnsConfig(key: keyof ExtraColumnFromLookupConfig, value: any): void;
-    /** Update timeline header colors (single config) */
-    updateTimelineHeaderColorSingle(key: 'bgColor' | 'color', value: string): void;
-    /** Update toggle association */
-    updateToggleAssociation(value: boolean): void;
-    /** Selected property for adding translations */
-    readonly selectedPropertyForTranslation: _angular_core.WritableSignal<string>;
-    /** Selected property for adding colors */
-    readonly selectedPropertyForColor: _angular_core.WritableSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DisplaySettings, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DisplaySettings, "mt-display-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartType": { "alias": "chartType"; "required": false; "isSignal": true; }; "availableProperties": { "alias": "availableProperties"; "required": false; "isSignal": true; }; "selectedProperties": { "alias": "selectedProperties"; "required": false; "isSignal": true; }; "lookups": { "alias": "lookups"; "required": false; "isSignal": true; }; }, { "clientConfigChange": "clientConfigChange"; }, never, never, true, never>;
+    /** Show source links when multiple selections exist */
+    readonly showSourceLinks: _angular_core.Signal<boolean>;
+    /** Hide selection config for layout, snapshot, phaseGate types (they don't need data source selection) */
+    readonly hideSelectionConfig: _angular_core.Signal<boolean>;
+    /** Show groupByMultiple for table queries (non-report mode) */
+    readonly showGroupByMultiple: _angular_core.Signal<boolean>;
+    /**
+     * Derived signal: Extract module keys from selections for change detection
+     * Only changes when actual selectors change, not on every selection update
+     */
+    private readonly moduleKeysSignature;
+    /** Track last loaded module signature to prevent duplicate requests */
+    private lastLoadedSignature;
+    constructor();
+    /**
+     * Load properties for all selections using bulk API
+     * Single POST request to /metadata/modules/properties
+     * Enriches response with selectorName from tree data
+     */
+    loadPropertiesForSelections(selections: ISelection[]): void;
+    /**
+     * Handle selection changes
+     */
+    onSelectionsChange(selections: ISelection[]): void;
+    /**
+     * Handle module change - update selections, effect handles property loading
+     */
+    onModuleChange(event: {
+        selectionId: number;
+        selector: string;
+        selectorName?: string | null;
+    }): void;
+    /**
+     * Extract module type from selector (e.g., "Level:7" -> "Level")
+     */
+    private extractModuleTypeFromSelector;
+    /**
+     * Handle source links change
+     */
+    onSourceLinksChange(links: SourceLink[]): void;
+    /**
+     * Handle query change (general query)
+     */
+    onQueryChange(query: ChartQuery): void;
+    /**
+     * Handle table query change
+     */
+    onTableQueryChange(query: TableQuery): void;
+    /**
+     * Handle timeline query change
+     */
+    onTimelineQueryChange(query: any): void;
+    /**
+     * Handle map query change
+     */
+    onMapQueryChange(query: any): void;
+    /**
+     * Handle splitter query change
+     */
+    onSplitterQueryChange(query: any): void;
+    /**
+     * Handle properties query change
+     */
+    onPropertiesQueryChange(query: any): void;
+    /**
+     * Handle snapshot query change
+     */
+    onSnapshotQueryChange(query: any): void;
+    /**
+     * Handle groupByMultiple change
+     */
+    onGroupByMultipleChange(values: string[]): void;
+    /**
+     * Handle repeater dashboard selection
+     */
+    onRepeaterDashboardChange(dashboardId: number): void;
+    /**
+     * Handle isNormalized change
+     */
+    onIsNormalizedChange(value: boolean): void;
+    /**
+     * Handle tab change
+     */
+    onTabChange(tabId: string): void;
+    /**
+     * Handle custom API change
+     */
+    onCustomApiChange(customApi: CustomApi | null): void;
+    /**
+     * Get chart type id for query component
+     */
+    getChartTypeId(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataSourceSettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataSourceSettings, "mt-data-source-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartType": { "alias": "chartType"; "required": false; "isSignal": true; }; }, { "serviceConfigChange": "serviceConfigChange"; }, never, never, true, never>;
 }
 
 /** Action type option */
@@ -4555,10 +4813,6 @@ declare class ActionsSettings {
     /**
      * Track by action id for ngFor
      */
-    trackByActionId(_index: number, action: ActionConfig): string;
-    /**
-     * Track by index helper
-     */
     trackByIndex(index: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionsSettings, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionsSettings, "mt-actions-settings", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "clientConfigChange": "clientConfigChange"; }, never, never, true, never>;
@@ -4612,5 +4866,5 @@ declare class GetChartActionsPipe implements PipeTransform {
  */
 declare function cloneDeep<T>(obj: T): T;
 
-export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersConfig, EChartComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LevelCardListComponent, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, addCommasToNumber, axisFormatters, cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, generalConfiguration, getColorFromConditions, getLanguageCode, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall, switchAllKeysToLower };
-export type { ActionConfig, ApiResponse, BarChartData, BreadcrumbItem, BulkLinkChartRequest, BulkLinkChartResponse, BulkPropertiesRequest, BulkPropertiesResponse, BulkPropertiesResponseItem, BulkPropertyRequestItem, CardBorderStyleConfig, CardStyleConfig$1 as CardStyleConfig, ChartActionEvent, ChartActionsContext, ChartData, ChartDataHandled, ChartLabel, ChartLinkConfiguration, ChartTypeConfig, ClientConfig, ComponentType, CustomApi, DashboardChartItem, DashboardDialogItem, DashboardItemStore, DashboardListEvent, DashboardPage, DisplayConfig, EChartSeriesItem, ExcelSheet, FilterConfig, FilterOption, GroupedModuleOption, HandleAction, HeaderCardConfig$1 as HeaderCardConfig, IModule, IModuleType, IProperty, IPropertyWithGroup, ISelection, ItemConfig, LevelCardData, LevelCardProperty, LinkChartRequest, LocalizedName, ModuleItem, ModuleSelectOption, ModuleType, ModuleValue, ModulesTreeRequest, ModulesTreeResponse, PhaseGateProperty, PhaseGateStep, PieChartData, PropertiesResponse, PropertyItem$1 as PropertyItem, PropertyItemOption, PropertyItemsResponse, QuickManageType, Report, ReportChartLink, ReportDashboardConfig, ReportExcelConfig, ReportType, ReportUrl, RequestType, SelectionFilter, ServiceConfig, ServiceItem, SourceLink, StatisticCardData, StyleConfig, TableColumn$1 as TableColumn, TableViewData, TimelineData, TimelineItem, UnlinkChartRequest };
+export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, CardInfoComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersComponent, DynamicFiltersConfig, EChartComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LevelCardListComponent, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, addCommasToNumber, axisFormatters, cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, formatXAxis, generalConfiguration, getColorFromConditions, getLanguageCode, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall, switchAllKeysToLower };
+export type { ActionConfig, ApiResponse, BarChartData, BreadcrumbItem, BulkLinkChartRequest, BulkLinkChartResponse, BulkPropertiesRequest, BulkPropertiesResponse, BulkPropertiesResponseItem, BulkPropertyRequestItem, CardBorderStyleConfig, CardInfoConfig$1 as CardInfoConfig, CardStyleConfig$1 as CardStyleConfig, ChartActionEvent, ChartActionsContext, ChartData, ChartDataHandled, ChartLabel, ChartLinkConfiguration, ChartTypeConfig, ClientConfig, ComponentType, CustomApi, DashboardBuilderData, DashboardChartItem, DashboardDialogItem, DashboardItemStore, DashboardListEvent, DashboardPage, DisplayConfig, EChartSeriesItem, ExcelSheet, FilterConfig, FilterOption, FormatXAxisConfig$1 as FormatXAxisConfig, GroupedModuleOption, HandleAction, HeaderCardConfig$1 as HeaderCardConfig, IModule, IModuleType, IProperty, IPropertyWithGroup, ISelection, ItemConfig, LevelCardData, LevelCardProperty, LinkChartRequest, LocalizedName, ModuleItem, ModuleSelectOption, ModuleType, ModuleValue, ModulesTreeRequest, ModulesTreeResponse, PhaseGateProperty, PhaseGateStep, PieChartData, PropertiesResponse, PropertyItem$1 as PropertyItem, PropertyItemOption, PropertyItemsResponse, QuickManageType, Report, ReportChartLink, ReportDashboardConfig, ReportExcelConfig, ReportType, ReportUrl, RequestType, SelectionFilter, ServiceConfig, ServiceItem, SourceLink, StaticFilterConfig, StaticFilterItem, StatisticCardData, StyleConfig, TableColumn$1 as TableColumn, TableViewData, TimelineData, TimelineItem, UnlinkChartRequest };