@masterteam/dashboard-builder 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterteam/dashboard-builder",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "publishConfig": {
     "directory": "../../../dist/masterteam/dashboard-builder",
     "linkDirectory": true,
@@ -21,8 +21,8 @@
     "primeng": "21.0.1",
     "rxjs": "^7.8.2",
     "tailwindcss": "^4.1.17",
-    "@masterteam/components": "^0.0.124",
-    "@masterteam/icons": "^0.0.14"
+    "@masterteam/icons": "^0.0.14",
+    "@masterteam/components": "^0.0.135"
   },
   "dependencies": {
     "tslib": "^2.8.1",

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

@@ -6,6 +6,7 @@ import { ContextMenu } from 'primeng/contextmenu';
 import { MenuItem } from 'primeng/api';
 import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, FormGroup, FormArray, ValidationErrors } from '@angular/forms';
+import { EntityData as EntityData$1 } from '@masterteam/components/entities';
 import { MTIcon } from '@masterteam/icons';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
@@ -736,6 +737,9 @@ declare class DashboardBuilder implements OnInit, OnDestroy {
     private dragStartY;
     private applyingDashboardData;
     private emittingDashboardData;
+    private readonly boundHandleDragOver;
+    private readonly boundHandleDrop;
+    private readonly boundHandleDragEnd;
     readonly menuItems: _angular_core.Signal<MenuItem[]>;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -921,10 +925,6 @@ declare class DashboardViewer implements OnInit, OnDestroy {
      * Get icon from configAsType
      */
     getItemIcon(item: DashboardChartItem): string | null;
-    /**
-     * Get breadcrumb items for topbar
-     */
-    getBreadcrumb(item: DashboardChartItem): any[];
     /**
      * Get chart type
      */
@@ -1094,7 +1094,7 @@ type RequestType = 'level' | 'levellog' | 'log' | 'custom' | 'snapShot' | 'level
 /**
  * Chart type to component mapping
  */
-type ComponentType = 'chart' | 'map' | 'BackgroundTextChart' | 'chartCustomWithCardInfo' | 'listOfcharts' | 'listOfCardsStatistic' | 'cardsStatistic' | 'header' | 'footer' | 'label' | 'listOfLevelCards' | 'dialog' | 'table' | 'phaseGateTable' | 'topbar' | 'timeline' | 'timelineProjectDependencies' | 'lastHistoryLevelCard' | 'entityPreview' | 'clusterStackedChart' | 'listComponentSplusCard' | 'splitterChart' | 'repeater' | 'levelCardsWithStatic' | 'phaseGateStepperCard' | 'Group';
+type ComponentType = 'chart' | 'map' | 'BackgroundTextChart' | 'chartCustomWithCardInfo' | 'listOfcharts' | 'listOfCardsStatistic' | 'cardsStatistic' | 'header' | 'footer' | 'label' | 'listOfLevelCards' | 'dialog' | 'table' | 'phaseGateTable' | 'topbar' | 'timeline' | 'timelineProjectDependencies' | 'lastHistoryLevelCard' | 'entitiesPreview' | 'entityPreview' | 'clusterStackedChart' | 'listComponentSplusCard' | 'splitterChart' | 'repeater' | 'levelCardsWithStatic' | 'phaseGateStepperCard' | 'Group';
 /**
  * EChart series data item
  */
@@ -1255,6 +1255,8 @@ declare class DashboardItem implements OnInit, OnDestroy {
     readonly chartTypeId: _angular_core.InputSignal<string | number | undefined>;
     /** Read-only mode */
     readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Parent page/dashboard name for topbar breadcrumb fallbacks */
+    readonly pageName: _angular_core.InputSignal<string>;
     /** Whether this item is inside a group */
     readonly inGroup: _angular_core.InputSignal<boolean>;
     /** Whether this item is rendered inside a dialog */
@@ -1327,7 +1329,7 @@ declare class DashboardItem implements OnInit, OnDestroy {
     private buildParentFilter;
     private mergeRequestFilters;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardItem, "mt-dashboard-item", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartTypeId": { "alias": "chartTypeId"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "isDialog": { "alias": "isDialog"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "extraFilters": { "alias": "extraFilters"; "required": false; "isSignal": true; }; "ignoreQueryFilter": { "alias": "ignoreQueryFilter"; "required": false; "isSignal": true; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardItem, "mt-dashboard-item", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "chartTypeId": { "alias": "chartTypeId"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "pageName": { "alias": "pageName"; "required": false; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "isDialog": { "alias": "isDialog"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "extraFilters": { "alias": "extraFilters"; "required": false; "isSignal": true; }; "ignoreQueryFilter": { "alias": "ignoreQueryFilter"; "required": false; "isSignal": true; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
 }
 
 interface HeaderCardConfig$1 {
@@ -1840,6 +1842,116 @@ declare class EntityInfoComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityInfoComponent, "mt-entity-info", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "displayType": { "alias": "displayType"; "required": false; "isSignal": true; }; "extraInfoData": { "alias": "extraInfoData"; "required": false; "isSignal": true; }; "limitWords": { "alias": "limitWords"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface DisplayAreaItem {
+    key?: string;
+    order?: number;
+}
+interface DashboardStatusDetails {
+    color?: string;
+    description?: string;
+}
+interface DashboardStatusValue {
+    name?: string;
+    details?: DashboardStatusDetails;
+}
+interface DashboardStatus {
+    value?: DashboardStatusValue;
+    name?: string;
+    color?: string;
+    details?: DashboardStatusDetails;
+}
+interface DashboardCounter {
+    value?: string | number;
+}
+interface DashboardCardProperty extends EntityData$1 {
+    label?: string | Record<string, string>;
+    displayAreas?: DisplayAreaItem[];
+    displayArea?: DisplayAreaItem[];
+}
+interface DashboardCardData {
+    id?: number | string;
+    name?: string;
+    label?: string;
+    title?: string;
+    currentPhase?: string;
+    status?: DashboardStatus;
+    props?: DashboardCardProperty[];
+    properties?: DashboardCardProperty[];
+    issuesCounts?: DashboardCounter;
+    risksCounts?: DashboardCounter;
+    milestonesCounts?: DashboardCounter;
+    [key: string]: unknown;
+}
+interface DashboardCardGroup {
+    name?: string;
+    label?: string;
+    title?: string;
+    data?: DashboardCardData[];
+    [key: string]: unknown;
+}
+type DashboardTabItem = DashboardCardGroup | DashboardCardData;
+interface PropsConfigAsIndexItem$1 {
+    width?: string;
+    hidden?: boolean;
+}
+interface DashboardCardTabOption {
+    label: string;
+    value: number;
+}
+interface DashboardCardViewModel {
+    trackId: string | number;
+    card: DashboardCardData;
+    entities: EntityData$1[];
+    bodyProps: DashboardCardProperty[];
+    attachments: unknown[];
+    hasCounters: boolean;
+}
+declare class PropertiesCardComponent implements OnInit, OnDestroy {
+    private readonly storeService;
+    private readonly transloco;
+    private readonly subscription;
+    readonly dashboardId: _angular_core.InputSignal<string | number>;
+    readonly inGroup: _angular_core.InputSignal<boolean>;
+    readonly onAction: _angular_core.OutputEmitterRef<{
+        type: string;
+        data: unknown;
+    }>;
+    readonly configurationItem: _angular_core.WritableSignal<ItemConfig | null>;
+    readonly cardData: _angular_core.WritableSignal<DashboardTabItem[][]>;
+    readonly tabSelected: _angular_core.WritableSignal<number>;
+    readonly langCode: _angular_core.Signal<string>;
+    readonly isPropertiesCard: _angular_core.Signal<boolean>;
+    readonly galleryMode: _angular_core.Signal<boolean>;
+    readonly currentTabItems: _angular_core.Signal<DashboardTabItem[]>;
+    readonly selectedProperties: _angular_core.Signal<string[]>;
+    readonly propsConfigAsIndex: _angular_core.Signal<PropsConfigAsIndexItem$1[]>;
+    readonly tabOptions: _angular_core.Signal<DashboardCardTabOption[]>;
+    readonly showTabs: _angular_core.Signal<boolean>;
+    readonly currentTabCards: _angular_core.Signal<DashboardCardViewModel[]>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onCardClick(card: DashboardCardData): void;
+    private normalizePropertyKey;
+    private clampEntitySize;
+    private resolveEntitySize;
+    private isCardGroup;
+    private extractCards;
+    private getCardProps;
+    private orderProperties;
+    private buildPropertiesCardEntities;
+    private buildLegacyBodyProps;
+    private getAttachments;
+    private hasCounters;
+    private resolveTabLabel;
+    private readString;
+    private normalizeEntityProperty;
+    private resolveEntityName;
+    private readLocalizedText;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PropertiesCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PropertiesCardComponent, "mt-properties-card, mt-entities-preview-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+}
+
 interface PropertyConfig {
     width?: string;
     border?: string[];
@@ -1847,7 +1959,7 @@ interface PropertyConfig {
     colorAsProperty?: string;
 }
 interface ProcessedProperty {
-    propInfo: any;
+    propInfo: EntityData$1;
     config: PropertyConfig;
 }
 declare class EntityPreviewCardComponent implements OnInit, OnDestroy {
@@ -1872,6 +1984,9 @@ declare class EntityPreviewCardComponent implements OnInit, OnDestroy {
      * Get current language code
      */
     private getLanguageCode;
+    private normalizeEntityProperty;
+    private resolveEntityName;
+    private readLocalizedText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityPreviewCardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityPreviewCardComponent, "mt-entity-preview-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1906,6 +2021,8 @@ declare class HeaderCardComponent implements OnInit, OnDestroy {
     readonly styleConfig: _angular_core.Signal<_masterteam_dashboard_builder.StyleConfig>;
     /** Card style config */
     readonly cardStyleConfig: _angular_core.Signal<any>;
+    /** Config as type */
+    readonly configAsType: _angular_core.Signal<Record<string, any>>;
     /** Cols from dimensions */
     readonly cols: _angular_core.Signal<number>;
     /** Is full width (cols == 36) */
@@ -1922,6 +2039,12 @@ declare class HeaderCardComponent implements OnInit, OnDestroy {
     readonly iconColor: _angular_core.Signal<any>;
     /** Icon background color */
     readonly iconBgColor: _angular_core.Signal<any>;
+    /** Inner card padding */
+    readonly padding: _angular_core.Signal<number>;
+    /** Quick border color */
+    readonly borderColor: _angular_core.Signal<string>;
+    /** Whether explicit side borders are configured */
+    readonly hasExplicitSideBorders: _angular_core.Signal<boolean>;
     /** Font size for title */
     readonly fontSizeTitle: _angular_core.Signal<string>;
     /** Container styles from StyleConfig */
@@ -1944,82 +2067,6 @@ declare class HeaderCardComponent implements OnInit, OnDestroy {
     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 {
-    id: number;
-    name: string;
-    currentPhase?: string;
-    props: PropertyData[];
-    status?: PropertyData;
-    [key: string]: any;
-}
-interface PropertyData {
-    key: string;
-    normalizedKey: string;
-    viewType: string;
-    value: any;
-    displayAreas?: {
-        key: string;
-        order: number;
-    }[];
-    displayArea?: {
-        key: string;
-        order: number;
-    }[];
-}
-declare class LevelCardListComponent implements OnInit, OnDestroy {
-    private readonly storeService;
-    private readonly transloco;
-    private readonly subscription;
-    /** Dashboard ID */
-    readonly dashboardId: _angular_core.InputSignal<string | number>;
-    /** Whether inside a group */
-    readonly inGroup: _angular_core.InputSignal<boolean>;
-    /** Properties to hide */
-    readonly hideProperties: _angular_core.InputSignal<string[]>;
-    /** Action event output */
-    readonly onAction: _angular_core.OutputEmitterRef<{
-        type: string;
-        data: any;
-    }>;
-    /** Configuration item */
-    readonly configurationItem: _angular_core.WritableSignal<ItemConfig | null>;
-    /** Card data from handler */
-    readonly cardData: _angular_core.WritableSignal<any[][]>;
-    /** Currently selected tab index */
-    readonly tabSelected: _angular_core.WritableSignal<number>;
-    /** Language code */
-    readonly langCode: _angular_core.Signal<string>;
-    /** Gallery mode flag */
-    readonly galleryMode: _angular_core.Signal<boolean>;
-    /** Tabs from config */
-    readonly tabs: _angular_core.Signal<{
-        ar: string | undefined;
-        en: string | undefined;
-    }[]>;
-    /** Current tab data */
-    readonly currentTabData: _angular_core.Signal<any[]>;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    /**
-     * Get properties for card body (displayArea: levelCard_body)
-     */
-    getBodyProps(card: LevelCardData$1): PropertyData[];
-    /**
-     * Get attachments for gallery mode
-     */
-    getAttachments(card: LevelCardData$1): any[];
-    /**
-     * Check if card has any counters
-     */
-    hasCounters(card: any): boolean;
-    /**
-     * Handle card click
-     */
-    onCardClick(card: LevelCardData$1): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LevelCardListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LevelCardListComponent, "mt-level-card-list", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "inGroup": { "alias": "inGroup"; "required": false; "isSignal": true; }; "hideProperties": { "alias": "hideProperties"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
-}
-
 declare class ListStatisticCardComponent implements OnInit, OnDestroy {
     private readonly storeService;
     private readonly subscription;
@@ -2218,6 +2265,42 @@ declare class TableCardComponent implements OnInit, OnDestroy {
     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>;
 }
 
+interface TopbarBreadcrumbItem {
+    label: string;
+    link: string;
+}
+declare class TopbarCardComponent implements OnInit, OnDestroy {
+    private readonly storeService;
+    private readonly itemStoreService;
+    private readonly subscription;
+    readonly dashboardId: _angular_core.InputSignal<string | number>;
+    readonly defaultBreadcrumbLabel: _angular_core.InputSignal<string>;
+    readonly configurationItem: _angular_core.WritableSignal<ItemConfig | null>;
+    readonly languageCode: _angular_core.Signal<string>;
+    readonly queryParams: _angular_core.Signal<Record<string, any>>;
+    readonly styleConfig: _angular_core.Signal<Record<string, any>>;
+    readonly configAsType: _angular_core.Signal<Record<string, any>>;
+    readonly cardStyleConfig: _angular_core.Signal<Record<string, any>>;
+    readonly title: _angular_core.Signal<string>;
+    readonly subtitleText: _angular_core.Signal<string>;
+    readonly showSubtitle: _angular_core.Signal<boolean>;
+    readonly icon: _angular_core.Signal<any>;
+    readonly iconColor: _angular_core.Signal<any>;
+    readonly iconBackgroundColor: _angular_core.Signal<any>;
+    readonly borderColor: _angular_core.Signal<any>;
+    readonly borderWidth: _angular_core.Signal<0 | 1>;
+    readonly padding: _angular_core.Signal<number>;
+    readonly titleFontSize: _angular_core.Signal<number>;
+    readonly subtitleFontSize: _angular_core.Signal<number>;
+    readonly subtitleColor: _angular_core.Signal<any>;
+    readonly breadcrumbs: _angular_core.Signal<TopbarBreadcrumbItem[]>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    isExternalLink(link: string): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TopbarCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarCardComponent, "mt-topbar-card", never, { "dashboardId": { "alias": "dashboardId"; "required": true; "isSignal": true; }; "defaultBreadcrumbLabel": { "alias": "defaultBreadcrumbLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class DashboardItemStoreService {
     /** Store for all dashboard items, keyed by dashboardId */
     private itemsStore;
@@ -3577,6 +3660,41 @@ declare class DynamicFiltersConfig implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicFiltersConfig, "mt-dynamic-filters-config", never, { "lookups": { "alias": "lookups"; "required": false; "isSignal": true; }; "levelsSchema": { "alias": "levelsSchema"; "required": false; "isSignal": true; }; "levelLogs": { "alias": "levelLogs"; "required": false; "isSignal": true; }; "productType": { "alias": "productType"; "required": false; "isSignal": true; }; }, { "loadLevelLogs": "loadLevelLogs"; }, never, never, true, never>;
 }
 
+interface DefaultControlConfig {
+    title: string;
+    titleFontSize: number;
+    titleColor: string;
+    showSubtitle: boolean;
+    subtitle: string;
+    subtitleFontSize: number;
+    subtitleColor: string;
+    icon: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    padding: number;
+}
+declare class DefaultControlUi implements ControlValueAccessor {
+    readonly showIconSettings: _angular_core.InputSignal<boolean>;
+    readonly layoutComponent: _angular_core.InputSignal<"header" | "topbar" | null>;
+    readonly config: _angular_core.WritableSignal<DefaultControlConfig>;
+    readonly fontSizeOptions: {
+        label: string;
+        value: number;
+    }[];
+    private onChange;
+    private onTouched;
+    readonly supportsSubtitle: _angular_core.Signal<boolean>;
+    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, { "showIconSettings": { "alias": "showIconSettings"; "required": false; "isSignal": true; }; "layoutComponent": { "alias": "layoutComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class ChartSettingsDrawer {
     private dialogRef;
     private drawerConfig;
@@ -3586,7 +3704,11 @@ declare class ChartSettingsDrawer {
     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 */
+    /** Layout widgets use quick controls only */
+    readonly showDisplayTab: _angular_core.Signal<boolean>;
+    readonly isLayoutItem: _angular_core.Signal<boolean>;
+    readonly layoutComponentName: _angular_core.Signal<"header" | "topbar" | null>;
+    /** Tab options - hide Display for layout widgets, show Chart Controls when a chart control UI exists */
     readonly tabOptions: _angular_core.Signal<{
         label: string;
         value: string;
@@ -3598,8 +3720,8 @@ declare class ChartSettingsDrawer {
     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) */
-    readonly defaultConfig: _angular_core.Signal<{}>;
+    /** Default control config mapped from item config */
+    readonly defaultControlConfig: _angular_core.Signal<DefaultControlConfig>;
     /** Pie chart config - note: typo "Overried" matches old implementation */
     readonly pieConfig: _angular_core.Signal<any>;
     /** Bar chart config */
@@ -3609,7 +3731,7 @@ declare class ChartSettingsDrawer {
     /** Snapshot bar chart config */
     readonly snapshotBarConfig: _angular_core.Signal<any>;
     /** Update default config */
-    onDefaultConfigChange(config: any): void;
+    onDefaultConfigChange(config: DefaultControlConfig): void;
     /** Update pie chart config - note: typo "Overried" matches old implementation */
     onPieConfigChange(config: any): void;
     /** Update bar chart config */
@@ -3624,6 +3746,7 @@ declare class ChartSettingsDrawer {
     apply(): void;
     /** Close without changes */
     close(): void;
+    private isLayoutComponent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartSettingsDrawer, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartSettingsDrawer, "mt-chart-settings-drawer", never, {}, {}, never, never, true, never>;
 }
@@ -3759,6 +3882,16 @@ interface PropsConfigAsIndexItem {
     hidden?: boolean;
     border?: string[];
 }
+interface PropertyOption {
+    label: string;
+    value: string;
+}
+interface PropertiesViewRow {
+    key: string;
+    label: string;
+    index: number;
+    config: PropsConfigAsIndexItem;
+}
 /** Format X-Axis configuration */
 interface FormatXAxisConfig {
     type?: string | null;
@@ -3814,6 +3947,7 @@ declare class DisplaySettings {
     readonly fieldsToShow: _angular_core.Signal<string>;
     /** Check if a field should be shown */
     shouldShowField(fieldName: string): boolean;
+    shouldShowPropertiesViewSettings(): boolean;
     /** Position options */
     readonly positionOptions: {
         label: string;
@@ -3938,14 +4072,24 @@ declare class DisplaySettings {
     /** Toggle association */
     readonly toggleAssociation: _angular_core.Signal<boolean>;
     /** Selected properties resolved from input or config */
-    readonly resolvedSelectedProperties: _angular_core.Signal<any[]>;
+    readonly resolvedSelectedProperties: _angular_core.Signal<string[]>;
     /** Available properties resolved from input or selected properties */
     readonly resolvedAvailableProperties: _angular_core.Signal<any[]>;
+    /** Selected properties as ordered options */
+    readonly selectedPropertyOptions: _angular_core.Signal<PropertyOption[]>;
     /** Available properties as options */
     readonly propertyOptions: _angular_core.Signal<{
         label: any;
         value: any;
     }[]>;
+    /** Properties view rows driven by selected properties order */
+    readonly propertiesViewRows: _angular_core.Signal<PropertiesViewRow[]>;
+    /** Property translations rows driven by selected properties order */
+    readonly propertyTranslationRows: _angular_core.Signal<{
+        key: string;
+        label: string;
+        translation: PropertyTranslation;
+    }[]>;
     /** Available translation options (exclude used) */
     readonly availableTranslationOptions: _angular_core.Signal<{
         label: any;
@@ -4041,10 +4185,6 @@ declare class DisplaySettings {
     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 */
@@ -4099,39 +4239,11 @@ declare class DisplaySettings {
     readonly selectedPropertyForTranslation: _angular_core.WritableSignal<string>;
     /** Selected property for adding colors */
     readonly selectedPropertyForColor: _angular_core.WritableSignal<string>;
+    private resolvePropertyKey;
     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
  */
@@ -4411,6 +4523,7 @@ declare class ManageItem implements OnInit {
     cancel(): void;
     /** Update config from child components */
     onConfigUpdate(partialConfig: Partial<ItemConfig>): void;
+    onChartTypeChange(type: ChartTypeConfig): void;
     /** Update service config */
     onServiceConfigUpdate(partialConfig: Partial<ItemConfig['serviceConfig']>): void;
     /** Update client config */
@@ -4931,5 +5044,5 @@ declare class GetChartActionsPipe implements PipeTransform {
  */
 declare function cloneDeep<T>(obj: T): T;
 
-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 { 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, PropertiesCardComponent as EntitiesPreviewCardComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, PropertiesCardComponent, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, TopbarCardComponent, 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, BulkPropertiesResponseItemDto, BulkPropertyRequestItem, CardBorderStyleConfig, CardInfoConfig$1 as CardInfoConfig, CardStyleConfig$1 as CardStyleConfig, CatalogPropertyDto, 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, 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 };