@acorex/platform 20.3.0-next.2 → 20.3.0-next.21

package/layout/components/index.d.ts

@@ -1,21 +1,24 @@
 import * as _angular_core from '@angular/core';
 import { Signal, InjectionToken, InputSignal, TemplateRef, ElementRef, OnInit, OnDestroy, Type, ViewContainerRef, ModuleWithProviders, WritableSignal, QueryList, EventEmitter } from '@angular/core';
 import * as _acorex_platform_core from '@acorex/platform/core';
-import { AXPActivityLog, AXPSystemActionType, AXPColumnQuery, AXPContextData, AXPOptionsData, AXPActionMenuItem, AXPExecuteCommand, AXPFilterDefinition, AXPFilterQuery, AXPSortDefinition, AXPSortQuery, AXPMetaData, AXPViewQuery } from '@acorex/platform/core';
+import { AXPActivityLog, AXPSystemActionType, AXPCategoryEntity, AXPColumnQuery, AXPContextData, AXPOptionsData, AXPGridLayoutOptions, AXPFilterDefinition, AXPFilterQuery, AXPSortDefinition, AXPSortQuery, AXPMetaData, AXPViewQuery } from '@acorex/platform/core';
 import { AXPMenuItem } from '@acorex/platform/common';
-import { AXValueChangedEvent, AXHtmlEvent, AXEvent } from '@acorex/cdk/common';
+import { AXValueChangedEvent, AXClickEvent, AXDataSource, AXDataSourceFilterOption, AXHtmlEvent, AXEvent } from '@acorex/cdk/common';
+import { AXTreeViewComponent, AXTreeItemClickBaseEvent } from '@acorex/components/tree-view';
+import { AXTranslationService } from '@acorex/core/translation';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { AXPWidgetNode, AXPLayoutContextChangeEvent, AXPWidgetProperty, AXPWidgetConfig } from '@acorex/platform/layout/builder';
+import { AXPWidgetNode, AXPWidgetCoreContextChangeEvent, AXPWidgetProperty, AXPWidgetConfig } from '@acorex/platform/layout/widget-core';
 import * as _ngrx_signals from '@ngrx/signals';
-import { AXPopupSizeType, AXPopupService } from '@acorex/components/popup';
+import { AXDataTableComponent, AXDataTableRowDbClick, AXDataTableRowClick } from '@acorex/components/data-table';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { AXFormComponent } from '@acorex/components/form';
+import { AXPDynamicFormFieldDefinition, AXPDynamicFormGroupDefinition, AXPDynamicFormDefinition } from '@acorex/platform/layout/builder';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXTagBoxComponent } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
-import { AXTranslationService } from '@acorex/core/translation';
+import { AXTabStripChangedEvent, AXTabsComponent } from '@acorex/components/tabs';
+import { AXFormComponent } from '@acorex/components/form';
+import { AXPopupSizeType, AXPopupService } from '@acorex/components/popup';
 import { Observable } from 'rxjs';
-import { AXTabsComponent, AXTabStripChangedEvent } from '@acorex/components/tabs';
 
 declare class AXPActivityLogComponent {
     private readonly translateService;
@@ -203,6 +206,85 @@ declare class AXPThemeLayoutContainerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPThemeLayoutContainerComponent, "axp-layout-container", never, {}, {}, never, ["*"], true, never>;
 }
 
+interface AXPCategoryTreeNode extends AXPCategoryEntity {
+    children?: AXPCategoryTreeNode[];
+    expand?: boolean;
+    hasChild?: boolean;
+    [key: string]: any;
+}
+interface AXPCategoryTreeConfig {
+    textField?: string;
+    valueField?: string;
+    expandedField?: string;
+    showCheckbox?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateIcon?: string;
+}
+interface AXPCategoryTreeEvents {
+    onNodeClick?: (node: AXPCategoryEntity) => void;
+    onNodeSelect?: (node: AXPCategoryEntity) => void;
+    onNodeCreate?: (parentNode?: AXPCategoryEntity) => void;
+    onNodeUpdate?: (node: AXPCategoryEntity) => void;
+    onNodeDelete?: (node: AXPCategoryEntity) => void;
+    onSearchChange?: (searchValue: string) => void;
+    onCollapseChange?: (node: AXPCategoryEntity) => void;
+}
+interface AXPCategoryTreeActions {
+    canCreate?: boolean;
+    canUpdate?: boolean;
+    canDelete?: boolean;
+    canCreateChild?: boolean;
+    createLabel?: string;
+    updateLabel?: string;
+    deleteLabel?: string;
+    createChildLabel?: string;
+}
+interface AXPCategoryTreeDataSource {
+    loadRootNodes: () => Promise<AXPCategoryEntity[]>;
+    loadChildNodes?: (parentId: string) => Promise<AXPCategoryEntity[]>;
+    searchNodes?: (searchValue: string) => Promise<AXPCategoryEntity[]>;
+}
+
+declare class AXPCategoryTreeComponent {
+    protected readonly translationService: AXTranslationService;
+    dataSource: _angular_core.InputSignal<AXPCategoryTreeDataSource>;
+    config: _angular_core.InputSignal<AXPCategoryTreeConfig>;
+    actions: _angular_core.InputSignal<AXPCategoryTreeActions>;
+    events: _angular_core.InputSignal<AXPCategoryTreeEvents>;
+    nodeClick: _angular_core.OutputEmitterRef<AXPCategoryEntity<string>>;
+    nodeSelect: _angular_core.OutputEmitterRef<AXPCategoryEntity<string>>;
+    nodeCreate: _angular_core.OutputEmitterRef<AXPCategoryEntity<string> | undefined>;
+    nodeUpdate: _angular_core.OutputEmitterRef<AXPCategoryEntity<string>>;
+    nodeDelete: _angular_core.OutputEmitterRef<AXPCategoryEntity<string>>;
+    searchChange: _angular_core.OutputEmitterRef<string>;
+    collapseChange: _angular_core.OutputEmitterRef<AXPCategoryEntity<string>>;
+    tree: _angular_core.Signal<AXTreeViewComponent | undefined>;
+    isLoading: _angular_core.WritableSignal<boolean>;
+    searchValue: _angular_core.WritableSignal<string>;
+    protected treeItems: _angular_core.WritableSignal<AXPCategoryTreeNode[]>;
+    protected emptyStateTitle: _angular_core.Signal<string>;
+    protected emptyStateDescription: _angular_core.Signal<string>;
+    ngOnInit(): Promise<void>;
+    loadRootNodes(): Promise<void>;
+    loadChildNodes(parentId: string): Promise<void>;
+    searchNodes(searchValue: string): Promise<void>;
+    handleNodeClick(event: AXTreeItemClickBaseEvent): Promise<void>;
+    handleCollapseChanged(event: AXTreeItemClickBaseEvent): Promise<void>;
+    handleSearchChange(event: AXValueChangedEvent): Promise<void>;
+    handleCreateRootClick(event: AXClickEvent): Promise<void>;
+    handleCreateChildClick(node: AXPCategoryTreeNode, event: AXClickEvent): Promise<void>;
+    handleUpdateNodeClick(node: AXPCategoryTreeNode, event: AXClickEvent): Promise<void>;
+    handleDeleteNodeClick(node: AXPCategoryTreeNode, event: AXClickEvent): Promise<void>;
+    private convertEntitiesToTreeNodes;
+    private updateNodeChildren;
+    refreshTree(parentId?: string): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPCategoryTreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPCategoryTreeComponent, "axp-category-tree", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeSelect": "nodeSelect"; "nodeCreate": "nodeCreate"; "nodeUpdate": "nodeUpdate"; "nodeDelete": "nodeDelete"; "searchChange": "searchChange"; "collapseChange": "collapseChange"; }, never, never, true, never>;
+}
+
 declare class AXPQueryColumnsComponent {
     columns: _angular_core.ModelSignal<AXPColumnQuery[]>;
     handleVisibilityChange(e: AXValueChangedEvent<boolean>, name: string): void;
@@ -357,208 +439,276 @@ declare class AXPComponentSlotModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXPComponentSlotModule>;
 }
 
-/**
- * Form appearance and density styling
- */
-type AXPDynamicFormLook = 'normal' | 'compact' | 'borderless';
-/**
- * Form layout direction and flow
- */
-type AXPDynamicFormDirection = 'vertical' | 'horizontal' | 'grid';
-interface AXPDynamicFormFieldDefinition {
-    path: string;
-    title?: string;
-    description?: string;
-    widget: AXPWidgetNode;
-}
-interface AXPDynamicFormGroupDefinition {
+interface AXPDataSelectorColumn {
     name: string;
-    title?: string;
-    description?: string;
-    parameters: AXPDynamicFormFieldDefinition[];
-}
-interface AXPDynamicFormDefinition {
-    groups: AXPDynamicFormGroupDefinition[];
-}
-interface AXPDynamicFormLayoutConfig {
-    positions: {
-        default: {
-            colSpan: number;
-        };
-        md?: {
-            colSpan: number;
-        };
-        lg?: {
-            colSpan: number;
-        };
-        xl?: {
-            colSpan: number;
-        };
-        xxl?: {
-            colSpan: number;
-        };
+    title: string;
+    visible: boolean;
+    widget: {
+        type: string;
+        options: any;
     };
 }
-
-interface AXPDynamicDialogConfig {
+interface AXPDataSelectorConfig {
     title: string;
-    message?: string;
-    formDefinition: AXPDynamicFormDefinition;
-    context: any;
-    layoutConfig?: AXPDynamicFormLayoutConfig;
-    size?: AXPopupSizeType;
-    actions?: {
-        footer?: {
-            prefix?: AXPActionMenuItem[];
-            suffix?: AXPActionMenuItem[];
-        };
+    dataSource: AXDataSource<any>;
+    columns: AXPDataSelectorColumn[];
+    selectionMode: 'single' | 'multiple';
+    searchFields?: string[];
+    parentField?: string;
+    allowCreate?: boolean;
+    filters?: AXDataSourceFilterOption;
+    categoryFilter?: {
+        enabled: boolean;
+        title: string;
+        dataSource: AXPCategoryTreeDataSource;
+        filterField: string;
+        filterOperator?: 'equal' | 'contains' | 'in';
+        width?: string;
     };
 }
-interface AXPDynamicDialogResult {
-    context: any;
-    action?: string;
-}
-
-declare class AXPDynamicDialogComponent extends AXBasePageComponent {
-    config: AXPDynamicDialogConfig;
-    private readonly dynamicForm;
-    isSubmitting: _angular_core.WritableSignal<boolean>;
-    private previousContext;
-    private formData;
-    /**
-     * Form context for widget container
-     */
-    protected formContext: _angular_core.Signal<Record<string, any>>;
-    protected defaultLayout: () => {
-        positions: {
-            default: {
-                colSpan: number;
-            };
-            md: {
-                colSpan: number;
-            };
-            lg: {
-                colSpan: number;
-            };
-            xl: {
-                colSpan: number;
-            };
-            xxl: {
-                colSpan: number;
-            };
-        };
-    };
-    /**
-     * Footer actions for dynamic button system
-     */
-    protected footerPrefixActions: _angular_core.Signal<AXPActionMenuItem[]>;
-    protected footerSuffixActions: _angular_core.Signal<AXPActionMenuItem[]>;
-    protected hasFooterActions: _angular_core.Signal<boolean>;
-    protected hasVisibleFooterPrefixActions: _angular_core.Signal<boolean>;
-    protected hasVisibleFooterSuffixActions: _angular_core.Signal<boolean>;
-    ngOnInit(): void;
-    protected handleContextInitiated(context: any): void;
-    protected handleContextChanged(context: any): void;
-    /**
-     * Execute a dynamic action
-     */
-    protected executeAction(action: AXPActionMenuItem): Promise<void>;
+declare class AXPDataSelectorComponent extends AXBasePageComponent {
+    protected config: _angular_core.WritableSignal<AXPDataSelectorConfig>;
+    protected searchTerm: string;
+    protected filter: AXDataSourceFilterOption;
+    protected grid: _angular_core.Signal<AXDataTableComponent | undefined>;
+    protected initialSelectedItems: any[];
+    protected selectedItems: _angular_core.WritableSignal<any[]>;
+    protected activeCategoryFilter: _angular_core.WritableSignal<{
+        node: AXPCategoryEntity;
+        filterValue: any;
+    } | null>;
+    protected allowSelect: _angular_core.Signal<boolean>;
+    protected hasSearch: _angular_core.Signal<boolean | undefined>;
+    protected searchPlaceholder: _angular_core.Signal<string>;
+    protected categoryTreeConfig: _angular_core.Signal<{
+        textField: string;
+        valueField: string;
+        showCheckbox: boolean;
+        searchable: boolean;
+        searchPlaceholder: string;
+        emptyStateTitle: string;
+        emptyStateDescription: string;
+        emptyStateIcon: string;
+    }>;
+    protected categoryTreeActions: _angular_core.Signal<{
+        canCreate: boolean;
+        canUpdate: boolean;
+        canDelete: boolean;
+        canCreateChild: boolean;
+    }>;
+    protected ngOnInit(): void;
+    protected ngAfterViewInit(): void;
+    protected handleRowDbClick(e: AXDataTableRowDbClick): void;
+    protected handleRowClick(e: AXDataTableRowClick): void;
+    protected handleSelectedRowsChange(rows: unknown[]): Promise<void>;
+    protected handleChangeSearchValue(e: AXValueChangedEvent): void;
+    protected handleCreateNewClick(): Promise<void>;
+    protected handleCloseClick(): void;
+    protected handleSelectClick(): void;
+    protected handleExpandRow(row: any): Promise<void>;
+    protected handleCategoryFilterClick(node: AXPCategoryEntity): void;
+    protected clearCategoryFilter(): void;
+    private applySearchFilter;
+    private applyFilterAndSort;
+    private applyCategoryFilter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDataSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPDataSelectorComponent, "axp-data-selector", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXPDataSelectorService {
+    private readonly popupService;
+    private readonly expressionService;
     /**
-     * Execute a command
+     * Open data selector popup
      */
-    protected executeCommand(command: AXPExecuteCommand): Promise<void>;
+    open(config: AXPDataSelectorConfig): Promise<{
+        items: any[];
+    } | null>;
     /**
-     * Check if form is valid
+     * Open data selector with category filter
      */
-    protected isFormValid(): Promise<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDynamicDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPDynamicDialogComponent, "axp-dynamic-dialog", never, { "config": { "alias": "config"; "required": true; }; }, {}, never, never, true, never>;
+    openWithCategoryFilter(config: Omit<AXPDataSelectorConfig, 'categoryFilter'>, categoryFilterConfig: {
+        title: string;
+        dataSource: AXPCategoryTreeDataSource;
+        filterField: string;
+        filterOperator?: 'equal' | 'contains' | 'in';
+        width?: string;
+    }): Promise<{
+        items: any[];
+    } | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDataSelectorService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXPDataSelectorService>;
 }
 
-declare class AXPDynamicDialogService {
-    private readonly popupService;
-    /**
-     * Show a dynamic dialog with the given configuration
-     * @param config Dialog configuration including fields, validation, and UI options
-     * @returns Promise resolving to dialog result with form values and cancellation status
-     */
-    showDialog(config: AXPDynamicDialogConfig): Promise<AXPDynamicDialogResult>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDynamicDialogService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXPDynamicDialogService>;
+interface AXPDynamicFormDesignerField {
+    id: string;
+    name: string;
+    title: string;
+    description?: string;
+    widget: AXPWidgetNode;
+    mode?: 'view' | 'edit';
+    layout?: AXPGridLayoutOptions;
+    validations?: Array<{
+        rule: string;
+        options?: Record<string, any>;
+    }>;
+}
+interface AXPDynamicFormDesignerGroup {
+    id: string;
+    name: string;
+    title?: string;
+    description?: string;
+    fields: AXPDynamicFormDesignerField[];
+    mode?: 'view' | 'edit';
+    layout?: AXPGridLayoutOptions;
+}
+interface AXPDynamicFormDesignerState {
+    groups: AXPDynamicFormDesignerGroup[];
+    selectedFieldId?: string;
+    selectedGroupId?: string;
+    mode: 'designer' | 'preview';
+}
+/**
+ * Convert designer field to form field definition
+ */
+declare function convertDesignerFieldToFormField(field: AXPDynamicFormDesignerField): AXPDynamicFormFieldDefinition;
+/**
+ * Convert designer group to form group definition
+ */
+declare function convertDesignerGroupToFormGroup(group: AXPDynamicFormDesignerGroup): AXPDynamicFormGroupDefinition;
+/**
+ * Convert designer state to form definition
+ */
+declare function convertDesignerStateToFormDefinition(state: AXPDynamicFormDesignerState): AXPDynamicFormDefinition;
+interface AXPFormElementWidget {
+    name: string;
+    title: string;
+    icon?: string;
+    description?: string;
+    type: string;
+    properties?: any[];
 }
 
-declare class AXPDynamicFormComponent implements OnInit {
-    #private;
+declare class AXPDynamicFormDesignerComponent {
+    formDefinition: _angular_core.ModelSignal<AXPDynamicFormDefinition>;
+    readonly: _angular_core.InputSignal<boolean>;
+    private isInternalUpdate;
+    private readonly widgetRegistry;
+    private readonly formBuilderService;
+    private readonly widgetPropertyViewerService;
+    protected selectedFieldId: _angular_core.WritableSignal<string | null>;
+    private designerState;
+    protected availableWidgets: _angular_core.Signal<AXPFormElementWidget[]>;
+    protected widgetOptions: _angular_core.Signal<{
+        value: string;
+        text: string;
+    }[]>;
+    protected getAllFields: _angular_core.Signal<AXPDynamicFormDesignerField[]>;
+    protected designerGroups: _angular_core.Signal<AXPDynamicFormDesignerGroup[]>;
     /**
-     * Form definition containing groups and fields
+     * Effect to log form definition changes
      */
-    formDefinition: _angular_core.InputSignal<AXPDynamicFormDefinition>;
+    private logFormDefinitionChanges;
     /**
-     * Form context/model data
+     * Effect to sync form definition model to designer state
      */
-    context: _angular_core.InputSignal<any>;
+    private syncModelToDesigner;
     /**
-     * Form appearance and density styling (normal, compact, spacious)
+     * Effect to sync designer state changes back to model
      */
-    layoutLook: _angular_core.InputSignal<AXPDynamicFormLook>;
+    private syncDesignerToModel;
     /**
-     * Form layout direction and flow (vertical, horizontal, grid)
+     * Get the current form definition (converted from designer state)
      */
-    layoutDirection: _angular_core.InputSignal<AXPDynamicFormDirection>;
+    getFormDefinition(): AXPDynamicFormDefinition;
     /**
-     * Custom layout configuration for form fields
+     * Set the form definition (converted to designer state)
      */
-    layoutConfig: _angular_core.InputSignal<AXPDynamicFormLayoutConfig>;
+    setFormDefinition(definition: AXPDynamicFormDefinition): void;
     /**
-     * Emitted when form context changes
+     * Add a new field to the form
+     * @param field The field to add
      */
-    contextChange: _angular_core.OutputEmitterRef<any>;
+    addField(field: AXPDynamicFormDesignerField): void;
     /**
-     * Emitted when context change is initiated
+     * Update an existing field
+     * @param fieldId The ID of the field to update
+     * @param updates The updates to apply
      */
-    contextInitiated: _angular_core.OutputEmitterRef<any>;
+    updateField(fieldId: string, updates: Partial<AXPDynamicFormDesignerField>): void;
     /**
-     * Emitted when form becomes valid/invalid
+     * Remove a field from the form
+     * @param fieldId The ID of the field to remove
      */
-    validityChange: _angular_core.OutputEmitterRef<boolean>;
-    private form;
-    private container;
+    removeField(fieldId: string): void;
     /**
-     * Internal context signal for reactivity
+     * Get all available widget types
      */
-    protected internalContext: _angular_core.WritableSignal<any>;
+    getAvailableWidgets(): AXPFormElementWidget[];
     /**
-     * Computed layout configuration
+     * Add a new group to the form
+     * @param group The group to add
      */
-    protected computedLayout: _angular_core.Signal<AXPDynamicFormLayoutConfig>;
+    addGroup(group: AXPDynamicFormDesignerGroup): void;
     /**
-     * Host classes based on layout look and direction
+     * Remove a group from the form
+     * @param groupName The name of the group to remove
      */
-    protected hostClasses: _angular_core.Signal<string>;
-    ngOnInit(): void;
+    removeGroup(groupName: string): void;
+    /**
+     * Reorder groups in the form
+     * @param fromIndex Source index
+     * @param toIndex Target index
+     */
+    reorderGroups(fromIndex: number, toIndex: number): void;
     /**
-     * Handle context change events from widget container
+     * Update an existing group
+     * @param groupName The name of the group to update
+     * @param updates The updates to apply
      */
-    protected handleContextChanged(event: AXPLayoutContextChangeEvent): void;
-    protected isRequired(param: AXPDynamicFormFieldDefinition): boolean;
+    updateGroup(groupName: string, updates: Partial<AXPDynamicFormDesignerGroup>): void;
     /**
-     * Get the form component instance
+     * Move a field to a different group
+     * @param fieldName The name/path of the field to move
+     * @param targetGroupName The name of the target group
      */
-    getForm(): AXFormComponent | undefined;
+    moveFieldToGroup(fieldName: string, targetGroupName: string): void;
+    protected handleAddGroupClick(): Promise<void>;
+    protected handleAddFieldToGroup(group: AXPDynamicFormDesignerGroup): Promise<void>;
+    protected handleFieldEdit(field: AXPDynamicFormDesignerField): Promise<void>;
+    protected handleFieldRemove(field: AXPDynamicFormDesignerField): void;
+    protected handleGroupEdit(group: AXPDynamicFormDesignerGroup): Promise<void>;
+    protected handleGroupLayoutEdit(group: AXPDynamicFormDesignerGroup): Promise<void>;
+    protected handleGroupRemove(group: AXPDynamicFormDesignerGroup): void;
     /**
-     * Get current form context
+     * Handle field layout editing
      */
-    getContext(): any;
+    protected handleFieldLayoutEdit(field: AXPDynamicFormDesignerField, group: AXPDynamicFormDesignerGroup): Promise<void>;
+    protected handleGroupDrop(event: CdkDragDrop<AXPDynamicFormDesignerGroup[]>): void;
+    protected handleFieldDrop(event: CdkDragDrop<AXPDynamicFormDesignerField[]>, targetGroupName?: string): void;
+    protected handlePreviewClick(): Promise<void>;
+    protected deriveKey(input: string): string;
+    protected generateId(): string;
+    protected getWidgetIcon(widgetName: string): string;
+    protected getWidgetTitle(widgetName: string): string;
+    protected getWidgetNode(field: AXPDynamicFormDesignerField): AXPWidgetNode;
+    protected deriveGroupKey(input: string): string;
+    protected getGroupOptions(): Array<{
+        value: string;
+        text: string;
+    }>;
+    protected addFieldToGroup(field: AXPDynamicFormDesignerField, groupName: string): void;
+    protected getAllGroupDropLists(): string[];
     /**
-     * Update form context programmatically
+     * Get the grid column count for a group (always 12 columns)
      */
-    updateContext(context: any): void;
+    protected getGroupColumnCount(): number;
     /**
-     * Validate the form
+     * Get default field grid layout based on group configuration
      */
-    validate(): Promise<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDynamicFormComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPDynamicFormComponent, "axp-dynamic-form", never, { "formDefinition": { "alias": "formDefinition"; "required": true; "isSignal": true; }; "context": { "alias": "context"; "required": true; "isSignal": true; }; "layoutLook": { "alias": "layoutLook"; "required": false; "isSignal": true; }; "layoutDirection": { "alias": "layoutDirection"; "required": false; "isSignal": true; }; "layoutConfig": { "alias": "layoutConfig"; "required": false; "isSignal": true; }; }, { "contextChange": "contextChange"; "contextInitiated": "contextInitiated"; "validityChange": "validityChange"; }, never, never, true, never>;
+    protected getFieldGridLayout(group: AXPDynamicFormDesignerGroup, fieldIndex?: number): AXPGridLayoutOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPDynamicFormDesignerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPDynamicFormDesignerComponent, "axp-dynamic-form-designer", never, { "formDefinition": { "alias": "formDefinition"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "formDefinition": "formDefinitionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -599,8 +749,8 @@ declare const AXP_EXTRA_PROPERTY_TYPES: InjectionToken<AXPExtraPropertyType[]>;
 
 declare class AXPExtraPropertiesComponent {
     items: _angular_core.InputSignal<AXPExtraPropertyItem[]>;
-    mode: _angular_core.InputSignal<"edit" | "view">;
-    protected onContextChanged(event: AXPLayoutContextChangeEvent): void;
+    mode: _angular_core.InputSignal<"view" | "edit">;
+    protected onContextChanged(event: AXPWidgetCoreContextChangeEvent): void;
     itemsChange: _angular_core.OutputEmitterRef<AXPExtraPropertyItem[]>;
     private readonly providedTypes;
     private readonly translationService;
@@ -640,7 +790,7 @@ declare class AXPExtraPropertiesComponent {
 
 declare class AXPExtraPropertiesSchemaComponent {
     schema: _angular_core.InputSignal<AXPExtraPropertySchemaItem[]>;
-    mode: _angular_core.InputSignal<"edit" | "view">;
+    mode: _angular_core.InputSignal<"view" | "edit">;
     schemaChange: _angular_core.OutputEmitterRef<AXPExtraPropertySchemaItem[]>;
     private readonly providedTypes;
     private readonly translationService;
@@ -671,13 +821,13 @@ declare class AXPExtraPropertiesSchemaComponent {
 declare class AXPExtraPropertiesValuesComponent {
     schema: _angular_core.InputSignal<AXPExtraPropertySchemaItem[]>;
     values: _angular_core.InputSignal<Record<string, any>>;
-    mode: _angular_core.InputSignal<"edit" | "view">;
+    mode: _angular_core.InputSignal<"view" | "edit">;
     valuesChange: _angular_core.OutputEmitterRef<Record<string, any>>;
     isRequired: (item: AXPExtraPropertySchemaItem) => any;
     protected internalContext: _angular_core.WritableSignal<Record<string, any>>;
     private nodeCache;
     private lastTypeByKey;
-    protected onContextChanged(event: AXPLayoutContextChangeEvent): void;
+    protected onContextChanged(event: AXPWidgetCoreContextChangeEvent): void;
     private readonly syncContextFromInputs;
     private readonly clearOnSchemaTypeChange;
     protected getNode(item: AXPExtraPropertySchemaItem): AXPWidgetNode;
@@ -712,7 +862,7 @@ declare class AXPQueryFiltersComponent {
     ngOnInit(): void;
     handleSelectField(field: AXPFilterDefinition): void;
     handleFieldKeyDown(e: KeyboardEvent, field: AXPFilterDefinition): void;
-    onContextChanged(e: AXPLayoutContextChangeEvent): void;
+    onContextChanged(e: AXPWidgetCoreContextChangeEvent): void;
     handleApplyFilter(): void;
     handleButtonKeyDown(e: Event): void;
     handleKeyDown(e: AXHtmlEvent<KeyboardEvent>): void;
@@ -727,6 +877,116 @@ declare class AXPQueryFiltersComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPQueryFiltersComponent, "axp-query-filters", never, { "filtersDefinitions": { "alias": "filtersDefinitions"; "required": false; "isSignal": true; }; "initialFilters": { "alias": "initialFilters"; "required": false; "isSignal": true; }; }, { "onFiltersChanged": "onFiltersChanged"; }, never, never, true, never>;
 }
 
+declare class AXPImageEditorPopupComponent extends AXBasePageComponent {
+    private readonly fileStorage;
+    image: _angular_core.InputSignal<Blob>;
+    showHistory: _angular_core.InputSignal<boolean>;
+    look: _angular_core.InputSignal<"solid" | "outline" | "blank">;
+    private container;
+    private blobUrl;
+    protected url: _angular_core.WritableSignal<string | null>;
+    protected context: _angular_core.WritableSignal<{
+        image: Blob | null;
+    }>;
+    ngOnInit(): Promise<void>;
+    handleValueChanged(e: any): void;
+    handleSave(): void;
+    handleCancel(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPImageEditorPopupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPImageEditorPopupComponent, "axp-image-editor-popup", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "showHistory": { "alias": "showHistory"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface AXPImageEditorOpenOptions {
+    title?: string;
+    image: Blob;
+    showHistory?: boolean;
+    look?: 'solid' | 'outline' | 'blank';
+}
+declare class AXPImageEditorService {
+    private readonly popupService;
+    private readonly translate;
+    open(options?: AXPImageEditorOpenOptions): Promise<Blob | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPImageEditorService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXPImageEditorService>;
+}
+
+interface AXPWidgetPropertyTab {
+    name: string;
+    title: string;
+    groups: {
+        name: string;
+        title: string;
+        isCollapsed: boolean;
+        props: AXPWidgetProperty[];
+    }[];
+}
+interface AXPWidgetPropertiesChangedEvent {
+    values: any;
+    mode: 'init' | 'update';
+}
+declare class AXPWidgetPropertyViewerComponent {
+    widget: _angular_core.InputSignal<AXPWidgetNode>;
+    mode: _angular_core.InputSignal<"simple" | "advanced">;
+    private widgetRegistryService;
+    protected currentTabIndex: WritableSignal<number>;
+    protected config: WritableSignal<AXPWidgetConfig<any> | null>;
+    protected allPoperties: AXPWidgetProperty[];
+    protected tabs: WritableSignal<AXPWidgetPropertyTab[]>;
+    protected groups: _angular_core.Signal<{
+        name: string;
+        title: string;
+        isCollapsed: boolean;
+        props: AXPWidgetProperty[];
+    }[]>;
+    protected groupCollapsedStates: Map<string, boolean>;
+    onChanged: EventEmitter<AXPWidgetPropertiesChangedEvent>;
+    protected context: WritableSignal<any>;
+    protected initialContext: any;
+    constructor();
+    update(values: any): void;
+    private fillTabs;
+    protected handleContextChange(e: AXPWidgetCoreContextChangeEvent): void;
+    protected handleTabChange(event: AXTabStripChangedEvent): void;
+    protected handleCollapsedChange(group: string, collapsed: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPWidgetPropertyViewerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPWidgetPropertyViewerComponent, "axp-widget-property-viewer", never, { "widget": { "alias": "widget"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "onChanged": "onChanged"; }, never, never, true, never>;
+}
+
+declare class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
+    widget: _angular_core.InputSignal<AXPWidgetNode>;
+    mode: _angular_core.InputSignal<"simple" | "advanced">;
+    protected currentValues: _angular_core.WritableSignal<any>;
+    protected handlePropertyChanged(event: {
+        values: any;
+        mode: 'init' | 'update';
+    }): void;
+    protected handleCloseClick(): void;
+    protected handleApplyClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPWidgetPropertyViewerPopupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPWidgetPropertyViewerPopupComponent, "axp-widget-property-viewer-popup", never, { "widget": { "alias": "widget"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface AXPWidgetPropertyViewerConfig {
+    title: string;
+    widget: AXPWidgetNode;
+    mode?: 'simple' | 'advanced';
+    size?: 'sm' | 'md' | 'lg' | 'full';
+}
+interface AXPWidgetPropertyViewerResult {
+    values: any;
+    mode: 'init' | 'update';
+}
+declare class AXPWidgetPropertyViewerService {
+    private readonly popupService;
+    /**
+     * Open widget property viewer popup
+     */
+    open(config: AXPWidgetPropertyViewerConfig): Promise<AXPWidgetPropertyViewerResult | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPWidgetPropertyViewerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXPWidgetPropertyViewerService>;
+}
+
 declare class AXPQuerySortsComponent {
     sortDefinitions: _angular_core.ModelSignal<AXPSortDefinition[]>;
     sortQueries: _angular_core.WritableSignal<AXPSortQuery[]>;
@@ -740,6 +1000,17 @@ declare class AXPQuerySortsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPQuerySortsComponent, "axp-query-sorts", never, { "sortDefinitions": { "alias": "sortDefinitions"; "required": false; "isSignal": true; }; "initialSortQueries": { "alias": "initialSortQueries"; "required": false; "isSignal": true; }; }, { "sortDefinitions": "sortDefinitionsChange"; "sortQueriesChange": "sortQueriesChange"; }, never, never, true, never>;
 }
 
+type StateMode = 'empty' | 'error' | 'loading' | 'warning' | 'info' | 'success';
+declare class AXPStateMessageComponent {
+    mode: _angular_core.InputSignal<StateMode>;
+    icon: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    description: _angular_core.InputSignal<string>;
+    variant: _angular_core.InputSignal<"default" | "compact" | "minimal">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPStateMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPStateMessageComponent, "axp-state-message", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=actions]"], true, never>;
+}
+
 interface AXPTemplateViewerConfig {
     template: AXPWidgetNode | string;
     title?: string;
@@ -765,7 +1036,7 @@ declare class AXPTemplateViewerComponent extends AXBasePageComponent {
     protected readonly currentPage: _angular_core.Signal<AXPWidgetNode>;
     protected ngOnInit(): Promise<void>;
     private loadTemplate;
-    protected handleContextChanged(e: AXPLayoutContextChangeEvent): void;
+    protected handleContextChanged(e: AXPWidgetCoreContextChangeEvent): void;
     protected handleSubmit(form: AXFormComponent): Promise<void>;
     protected handleCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPTemplateViewerComponent, never>;
@@ -956,47 +1227,5 @@ declare class AXPWidgetItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPWidgetItemComponent, "axp-widget-item", never, { "widget": { "alias": "widget"; "required": true; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; "showPinButton": { "alias": "showPinButton"; "required": false; "isSignal": true; }; "customClasses": { "alias": "customClasses"; "required": false; "isSignal": true; }; }, { "onWidgetClick": "onWidgetClick"; "onPinClick": "onPinClick"; }, never, never, true, never>;
 }
 
-interface AXPWidgetPropertyTab {
-    name: string;
-    title: string;
-    groups: {
-        name: string;
-        title: string;
-        isCollapsed: boolean;
-        props: AXPWidgetProperty[];
-    }[];
-}
-interface AXPWidgetPropertiesChangedEvent {
-    values: any;
-    mode: 'init' | 'update';
-}
-declare class AXPWidgetPropertyViewerComponent {
-    widget: _angular_core.InputSignal<AXPWidgetNode>;
-    mode: _angular_core.InputSignal<"simple" | "advanced">;
-    private widgetRegistryService;
-    protected currentTabIndex: WritableSignal<number>;
-    protected config: WritableSignal<AXPWidgetConfig<any> | null>;
-    protected allPoperties: AXPWidgetProperty[];
-    protected tabs: WritableSignal<AXPWidgetPropertyTab[]>;
-    protected groups: _angular_core.Signal<{
-        name: string;
-        title: string;
-        isCollapsed: boolean;
-        props: AXPWidgetProperty[];
-    }[]>;
-    protected groupCollapsedStates: Map<string, boolean>;
-    onChanged: EventEmitter<AXPWidgetPropertiesChangedEvent>;
-    protected context: WritableSignal<any>;
-    protected initialContext: any;
-    constructor();
-    update(values: any): void;
-    private fillTabs;
-    protected handleContextChange(e: AXPLayoutContextChangeEvent): void;
-    protected handleTabChange(event: AXTabStripChangedEvent): void;
-    protected handleCollapsedChange(group: string, collapsed: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPWidgetPropertyViewerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPWidgetPropertyViewerComponent, "axp-widget-property-viewer", never, { "widget": { "alias": "widget"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "onChanged": "onChanged"; }, never, never, true, never>;
-}
-
-export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDynamicDialogComponent, AXPDynamicDialogService, AXPDynamicFormComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
-export type { AXPCompareViewField, AXPCompareViewInputs, AXPCompareViewMode, AXPCompareViewObject, AXPComponentSlotConfig, AXPComponentSlotModuleConfigs, AXPDynamicDialogConfig, AXPDynamicDialogResult, AXPDynamicFormDefinition, AXPDynamicFormDirection, AXPDynamicFormFieldDefinition, AXPDynamicFormGroupDefinition, AXPDynamicFormLayoutConfig, AXPDynamicFormLook, AXPExtraPropertyItem, AXPExtraPropertySchemaItem, AXPExtraPropertyType, AXPTemplateViewerConfig, AXPTemplateViewerResult, AXPUserAvatarData, AXPUserAvatarProvider, AXPUserAvatarSize, AXPUserAvatarStatus, AXPWidgetItemClickEvent, AXPWidgetItemData, AXPWidgetPropertiesChangedEvent, AXPWidgetPropertyTab };
+export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
+export type { AXPCategoryTreeActions, AXPCategoryTreeConfig, AXPCategoryTreeDataSource, AXPCategoryTreeEvents, AXPCategoryTreeNode, AXPCompareViewField, AXPCompareViewInputs, AXPCompareViewMode, AXPCompareViewObject, AXPComponentSlotConfig, AXPComponentSlotModuleConfigs, AXPDataSelectorColumn, AXPDataSelectorConfig, AXPDynamicFormDesignerField, AXPDynamicFormDesignerGroup, AXPDynamicFormDesignerState, AXPExtraPropertyItem, AXPExtraPropertySchemaItem, AXPExtraPropertyType, AXPFormElementWidget, AXPImageEditorOpenOptions, AXPTemplateViewerConfig, AXPTemplateViewerResult, AXPUserAvatarData, AXPUserAvatarProvider, AXPUserAvatarSize, AXPUserAvatarStatus, AXPWidgetItemClickEvent, AXPWidgetItemData, AXPWidgetPropertiesChangedEvent, AXPWidgetPropertyTab, AXPWidgetPropertyViewerConfig, AXPWidgetPropertyViewerResult, StateMode };