@acorex/platform 20.0.0 → 20.0.2

package/fesm2022/acorex-platform-layout-components.mjs

@@ -1,277 +1,198 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, computed, ViewEncapsulation, Component, effect, Directive, ChangeDetectionStrategy, viewChild, contentChild, ElementRef, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule } from '@angular/core';
-import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { AXBadgeModule, AXBadgeComponent } from '@acorex/components/badge';
-import * as i1 from '@acorex/components/avatar';
-import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i2 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3 from '@acorex/components/image';
-import { AXImageModule } from '@acorex/components/image';
-import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
-import { AXPExpressionEvaluatorService, AXPContextStore, getSystemActions } from '@acorex/platform/core';
-import { sortBy } from 'lodash-es';
+import * as i3$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXCommonModule } from '@acorex/cdk/common';
-import * as i3$1 from '@acorex/core/translation';
+import * as i4 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import * as i4 from '@acorex/components/skeleton';
+import * as i4$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i5 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, output, linkedSignal, untracked, ViewChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
+import * as i10 from '@acorex/components/badge';
+import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXFormModule } from '@acorex/components/form';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i3$2 from '@acorex/components/check-box';
+import * as i3$1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i2$1 from '@acorex/components/label';
+import * as i2 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i5$1 from '@acorex/platform/layout/builder';
 import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { sortBy } from 'lodash-es';
+import * as i9 from '@acorex/cdk/list-navigation';
+import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
+import * as i6 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { AXSelectionListModule } from '@acorex/components/selection-list';
+import * as i7 from '@acorex/components/tag-box';
+import { AXTagBoxModule } from '@acorex/components/tag-box';
+import { AXCalendarService } from '@acorex/core/date-time';
+import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS } from '@acorex/platform/common';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import * as i1$1 from '@acorex/components/avatar';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i3$3 from '@acorex/components/image';
+import { AXImageModule } from '@acorex/components/image';
 
-const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER', {
-    providedIn: 'root',
-    factory: () => {
-        return new AXPUserAvatarProviderDefault();
-    }
-});
-class AXPUserAvatarProviderDefault {
-    provide(userId) {
-        return Promise.resolve({
-            id: userId,
-            username: 'johndoe',
-            firstName: 'John',
-            lastName: 'Doe',
-            status: 'online',
-            avatarUrl: 'https://via.placeholder.com/150',
-        });
-    }
-}
-
-class AXPUserAvatarService {
+//#region ----   Component Definition   ----
+class AXPActivityLogComponent {
+    //#endregion
+    //#region ----   Constructor & Lifecycle   ----
     constructor() {
-        this.provider = inject(AXP_USER_AVATAR_PROVIDER);
-        // Cache configuration
-        this.cacheExpiryTime = 5 * 60 * 1000; // 5 minutes in milliseconds
-        this.refreshInterval = 3 * 60 * 1000; // 3 minutes in milliseconds
-        // Cache storage
-        this.cache = new Map();
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.translateService = inject(AXTranslationService);
+        this.workflowService = inject(AXPWorkflowService);
+        //#endregion
+        //#region ----   Input Properties   ----
+        /**
+         * Array of activity logs to display
+         */
+        this.activities = input([]);
+        /**
+         * Whether the component is in loading state
+         */
+        this.loading = input(false);
+        //#endregion
+        //#region ----   Component Properties   ----
+        this.i18nScope = 'activity-log';
+        this.Object = Object;
+        /**
+         * Set of expanded activity IDs
+         */
+        this.expandedItems = signal(new Set());
+        /**
+         * Flag to track if component has been initialized
+         */
+        this.isInitialized = signal(false);
+        /**
+         * Set of items that have been manually toggled (for animation control)
+         */
+        this.manuallyToggledItems = signal(new Set());
+        // Auto-expand top 5 items when activities change
+        effect(() => {
+            const activities = this.activities();
+            const currentExpanded = this.expandedItems();
+            const initialized = this.isInitialized();
+            // Only auto-expand if not initialized and activities exist
+            if (!initialized && activities.length > 0 && currentExpanded.size === 0) {
+                const top5Ids = activities.slice(0, 5).map((activity) => activity.id);
+                this.expandedItems.set(new Set(top5Ids));
+                this.isInitialized.set(true);
+            }
+        });
     }
+    //#endregion
+    //#region ----   Utility Methods   ----
     /**
-     * Gets user information with caching and auto-refresh
-     * @param userId The username to fetch information for
-     * @returns Observable that emits user avatar data
+     * Gets the appropriate CSS class for the change type
      */
-    getUserInfo$(userId) {
-        // Check if we have a cached entry
-        if (!this.cache.has(userId) || this.isExpired(userId)) {
-            // Create a new cache entry with default values
-            const defaultData = {
-                id: userId,
-                status: 'offline',
-                username: '',
-                firstName: '',
-                lastName: ''
-            };
-            const subject = new BehaviorSubject(defaultData);
-            this.cache.set(userId, {
-                data: defaultData,
-                timestamp: Date.now(),
-                subject
-            });
-            // Fetch fresh data immediately
-            this.fetchAndUpdateCache(userId);
-            // Set up auto refresh
-            timer(this.refreshInterval, this.refreshInterval)
-                .pipe(tap(() => this.fetchAndUpdateCache(userId)))
-                .subscribe();
-        }
-        return this.cache.get(userId).subject.asObservable();
+    getChangeClasses(changeType) {
+        const action = getSystemActions(changeType);
+        return {
+            surface: action?.color ? `ax-${action.color}-surface` : 'ax-muted-surface',
+            text: action?.color ? `ax-text-${action.color}` : 'ax-text-muted',
+            icon: action?.icon ? `${action.icon}` : 'fa-light fa-pen'
+        };
     }
     /**
-     * Gets user information (Promise-based for backward compatibility)
-     * @param userId The username to fetch information for
-     * @returns Promise that resolves to user avatar data
-     */
-    async getUserInfo(userId) {
-        // Check if we have an unexpired cached entry
-        if (this.cache.has(userId) && !this.isExpired(userId)) {
-            return this.cache.get(userId).data;
-        }
-        // Fetch fresh data and cache it
-        return this.fetchAndUpdateCache(userId);
+ * Checks if an activity item is expanded
+ */
+    isExpanded(activityId) {
+        return this.expandedItems().has(activityId);
     }
     /**
-     * Clears the entire cache or a specific user's cache
-     * @param userId Optional username to clear specific cache
-     */
-    clearCache(userId) {
-        if (userId) {
-            this.cache.delete(userId);
+ * Toggles the expanded state of an activity item
+ */
+    toggleExpanded(activityId) {
+        const currentExpanded = new Set(this.expandedItems());
+        const currentManuallyToggled = new Set(this.manuallyToggledItems());
+        // Mark this item as manually toggled for animation purposes
+        currentManuallyToggled.add(activityId);
+        this.manuallyToggledItems.set(currentManuallyToggled);
+        if (currentExpanded.has(activityId)) {
+            currentExpanded.delete(activityId);
         }
         else {
-            this.cache.clear();
+            currentExpanded.add(activityId);
         }
+        this.expandedItems.set(currentExpanded);
     }
     /**
-     * Force refresh data for a specific username
-     * @param userId The username to refresh
-     * @returns Promise that resolves to the refreshed data
+     * Checks if an item should have expand/collapse animation
      */
-    async refreshUserInfo(userId) {
-        return this.fetchAndUpdateCache(userId);
+    shouldAnimate(activityId) {
+        return this.manuallyToggledItems().has(activityId);
     }
     /**
-     * Checks if a cache entry is expired
+     * Checks if an activity has expandable content (changes)
      */
-    isExpired(userId) {
-        const entry = this.cache.get(userId);
-        if (!entry)
-            return true;
-        return (Date.now() - entry.timestamp) > this.cacheExpiryTime;
+    hasExpandableContent(activity) {
+        return activity.changes && activity.changes.length > 0;
     }
+    //#endregion
+    //#region ----   Compare Methods   ----
     /**
-     * Fetches data from provider and updates the cache
+     * Handles the compare action for an activity
      */
-    async fetchAndUpdateCache(userId) {
-        try {
-            const data = await this.provider.provide(userId);
-            if (!data) {
-                throw new Error(`User info not found for ${userId}`);
-            }
-            const entry = this.cache.get(userId);
-            // Update the cache entry
-            if (entry) {
-                entry.data = data;
-                entry.timestamp = Date.now();
-                entry.subject.next(data);
-            }
-            else {
-                // Create a new cache entry if needed
-                const subject = new BehaviorSubject(data);
-                this.cache.set(userId, {
-                    data,
-                    timestamp: Date.now(),
-                    subject
-                });
+    async handleCompare(activity, event) {
+        event.stopPropagation(); // Prevent expanding/collapsing when clicking compare
+        // Get the previous activity for comparison
+        const currentIndex = this.activities().findIndex(a => a.id === activity.id);
+        if (currentIndex <= 0)
+            return; // No previous activity to compare with
+        const previousActivity = this.activities()[currentIndex - 1];
+        const ids = [
+            previousActivity.id,
+            activity.id
+        ];
+        // Execute the compare workflow
+        await this.workflowService.execute('show-entity-record-versions-compare', {
+            entity: activity.reference.type,
+            data: {
+                refId: activity.reference.id,
+                refType: activity.reference.type,
+                ids: ids
             }
-            return data;
-        }
-        catch (error) {
-            console.error(`Error fetching user info for ${userId}:`, error);
-            throw error;
-        }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
+    /**
+     * Checks if an activity can be compared (has a previous version)
+     */
+    canCompare(activity) {
+        const currentIndex = this.activities().findIndex(a => a.id === activity.id);
+        return currentIndex > 0; // Can compare if not the first activity
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\n        <!-- Loading State -->\n        @if (loading()) {\n        <div class=\"__loading\">\n            @for (item of [1,2,3,4]; track $index) {\n            <div class=\"__item\">\n                <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n                <div class=\"__content\">\n                    <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n                </div>\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Activity Feed -->\n        @if (!loading() && activities().length > 0) {\n        <div class=\"__feed\">\n            @for (activity of activities(); track activity.id) {\n            @let changeClasses = getChangeClasses(activity.changeType);\n            @let isItemExpanded = isExpanded(activity.id);\n            @let hasExpandableContentItem = hasExpandableContent(activity);\n            <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface  \">\n                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}} fa-solid\"></i>\n                </div>\n\n                <!-- Activity Content -->\n                <div class=\"__content\">\n                    <!-- Main Activity Info -->\n                    <div class=\"__main-info\">\n\n                        <!-- User and Action with Toggle Button -->\n                        <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n                            <span class=\"__user-name\">{{ activity.user.title }}</span>\n                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\n                            <span class=\"__action-text\">\n                                {{ activity.title | translate | async }}\n                            </span>\n\n                            <!-- Compare Button -->\n                            @if (canCompare(activity)) {\n                            <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                                <i class=\"fa-solid fa-code-compare\"></i>\n                            </button>\n                            }\n\n                            <!-- Toggle Button (only show if there's expandable content) -->\n                            @if (hasExpandableContentItem) {\n                            <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                                    [class.fa-chevron-up]=\"isItemExpanded\"></i>\n                            </button>\n                            }\n                        </div>\n\n                        <!-- Expandable Description/Changes -->\n                        @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n                        <div class=\"__action-lines __expandable-content\"\n                            [class.__animated]=\"shouldAnimate(activity.id)\">\n                            @for (change of activity.changes; track $index) {\n                            @let changeClasses = getChangeClasses(change.type);\n                            <div class=\"__action-line\">\n                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\n                            </div>\n                            }\n                        </div>\n                        }\n                    </div>\n\n                    <!-- Time -->\n                    <div class=\"__time\">\n                        {{ activity.date | format: 'datetime' : 'short' | async }}\n                    </div>\n\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AXPUserAvatarComponent {
-    constructor() {
-        this.userAvatarService = inject(AXPUserAvatarService);
-        this.destroy$ = new Subject();
-        this.userInfo = signal(null);
-        this.size = input(40);
-        this.userId = input('');
-        this.src = signal('');
-        this.userName = computed(() => this.userInfo()?.username || '');
-        this.firstName = computed(() => this.userInfo()?.firstName || 'Root');
-        this.lastName = computed(() => this.userInfo()?.lastName || 'User');
-        this.title = computed(() => `${this.firstName()} ${this.lastName()}`);
-        this.isOnline = computed(() => this.userInfo()?.status === 'online');
-        this.avatarText = computed(() => this.getInitials());
-        this.avatarColor = computed(() => this.pickColor(this.avatarText()));
-        this.hasPicture = signal(false);
-    }
-    onImageError(event) {
-        this.hasPicture.set(false);
-    }
-    onImageLoad(event) {
-        this.hasPicture.set(true);
-    }
-    ngOnInit() {
-        this.loadUserData();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUserData() {
-        // Skip if no username provided
-        if (!this.userId()) {
-            return;
-        }
-        // Subscribe to the user info observable to get real-time updates
-        this.userAvatarService
-            .getUserInfo$(this.userId())
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((userData) => {
-            this.userInfo.set(userData);
-            // This is a placeholder - replace with your actual avatar URL logic
-            this.generateAvatarSrc();
-        });
-    }
-    /**
-     * Generate avatar image source
-     * This is a placeholder - implement based on your actual requirements
-     */
-    generateAvatarSrc() {
-        // Example: Check if the user has a custom avatar URL
-        // If not, generate a placeholder using initials
-        if (this.userInfo()?.avatarUrl) {
-            this.src.set(this.userInfo()?.avatarUrl);
-        }
-        else {
-            // Generate a placeholder - you could use an external service like UI Avatars
-            // or implement your own logic
-            const initials = this.getInitials();
-            this.src.set(`https://avatar.iran.liara.run/username?username=${encodeURIComponent(initials)}`);
-        }
-    }
-    /**
-     * Get initials from first and last name
-     */
-    getInitials() {
-        const firstInitial = this.firstName().charAt(0).toUpperCase();
-        const lastInitial = this.lastName().charAt(0).toUpperCase();
-        return firstInitial + lastInitial;
-    }
-    hashString(str) {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = (hash << 5) - hash + str.charCodeAt(i);
-            hash |= 0;
-        }
-        return Math.abs(hash);
-    }
-    pickColor(initials) {
-        const colors = ['primary', 'secondary', 'danger', 'warning', 'success', 'accent1', 'accent2', 'accent3'];
-        const idx = this.hashString(initials) % colors.length;
-        return colors[idx];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [
-                        AXAvatarModule,
+            args: [{ selector: 'axp-activity-log', standalone: true, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXCommonModule,
                         AXDecoratorModule,
-                        AXImageModule,
-                        AXBadgeModule
-                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n" }]
-        }] });
+                        AXTranslationModule,
+                        AXSkeletonModule,
+                        AXFormatModule,
+                        AXTagModule,
+                        AXAccordionCdkModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\n        <!-- Loading State -->\n        @if (loading()) {\n        <div class=\"__loading\">\n            @for (item of [1,2,3,4]; track $index) {\n            <div class=\"__item\">\n                <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n                <div class=\"__content\">\n                    <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n                </div>\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Activity Feed -->\n        @if (!loading() && activities().length > 0) {\n        <div class=\"__feed\">\n            @for (activity of activities(); track activity.id) {\n            @let changeClasses = getChangeClasses(activity.changeType);\n            @let isItemExpanded = isExpanded(activity.id);\n            @let hasExpandableContentItem = hasExpandableContent(activity);\n            <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface  \">\n                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}} fa-solid\"></i>\n                </div>\n\n                <!-- Activity Content -->\n                <div class=\"__content\">\n                    <!-- Main Activity Info -->\n                    <div class=\"__main-info\">\n\n                        <!-- User and Action with Toggle Button -->\n                        <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n                            <span class=\"__user-name\">{{ activity.user.title }}</span>\n                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\n                            <span class=\"__action-text\">\n                                {{ activity.title | translate | async }}\n                            </span>\n\n                            <!-- Compare Button -->\n                            @if (canCompare(activity)) {\n                            <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                                <i class=\"fa-solid fa-code-compare\"></i>\n                            </button>\n                            }\n\n                            <!-- Toggle Button (only show if there's expandable content) -->\n                            @if (hasExpandableContentItem) {\n                            <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                                    [class.fa-chevron-up]=\"isItemExpanded\"></i>\n                            </button>\n                            }\n                        </div>\n\n                        <!-- Expandable Description/Changes -->\n                        @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n                        <div class=\"__action-lines __expandable-content\"\n                            [class.__animated]=\"shouldAnimate(activity.id)\">\n                            @for (change of activity.changes; track $index) {\n                            @let changeClasses = getChangeClasses(change.type);\n                            <div class=\"__action-line\">\n                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\n                            </div>\n                            }\n                        </div>\n                        }\n                    </div>\n\n                    <!-- Time -->\n                    <div class=\"__time\">\n                        {{ activity.date | format: 'datetime' : 'short' | async }}\n                    </div>\n\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [] });
 
 const AXP_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
 class AXPTaskBadgeProvider {
@@ -759,6 +680,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class AXPCompareViewComponent {
+    constructor() {
+        //#region ----   Component Properties   ----
+        this.inputs = input();
+        this.showOnlyChanges = signal(false);
+        this.mode = input('compare');
+        this.removedObjects = signal([]);
+        this.isChangesMode = computed(() => this.mode() === 'changes');
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Filtered fields based on showOnlyChanges toggle
+         */
+        this.filteredFields = computed(() => {
+            const fields = this.inputs()?.fields ?? [];
+            if (!this.showOnlyChanges()) {
+                return fields;
+            }
+            // Filter to show only fields where values differ across objects
+            return fields.filter(field => this.hasUnequalValues(field.path));
+        });
+        this.remainingObjects = computed(() => {
+            const objects = this.inputs()?.objects ?? [];
+            return objects.filter(obj => !this.removedObjects().includes(obj.id));
+        });
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Check if a field value will change in the next object (to show arrow in current cell)
+     */
+    hasValueChangingToNext(fieldPath, currentObjectIndex) {
+        const objects = this.remainingObjects();
+        if (currentObjectIndex >= objects.length - 1)
+            return false;
+        const currentValue = objects[currentObjectIndex]?.context[fieldPath];
+        const nextValue = objects[currentObjectIndex + 1]?.context[fieldPath];
+        return !this.areValuesEqual(currentValue, nextValue);
+    }
+    /**
+     * Check if a field value has changed compared to the previous object
+     */
+    hasValueChangedFromPrevious(fieldPath, currentObjectIndex) {
+        const objects = this.remainingObjects();
+        if (currentObjectIndex === 0 || objects.length <= 1)
+            return false;
+        const currentValue = objects[currentObjectIndex]?.context[fieldPath];
+        const previousValue = objects[currentObjectIndex - 1]?.context[fieldPath];
+        return !this.areValuesEqual(currentValue, previousValue);
+    }
+    /**
+     * Check if a field has unequal values across objects
+     */
+    hasUnequalValues(fieldPath) {
+        const objects = this.remainingObjects();
+        if (objects.length <= 1)
+            return false;
+        const values = objects.map(obj => obj.context[fieldPath]);
+        const firstValue = values[0];
+        return values.some(value => !this.areValuesEqual(value, firstValue));
+    }
+    /**
+     * Check if a field has equal values across objects
+     */
+    hasEqualValues(fieldPath) {
+        const objects = this.remainingObjects();
+        if (objects.length <= 1)
+            return false;
+        const values = objects.map(obj => obj.context[fieldPath]);
+        const firstValue = values[0];
+        return values.every(value => this.areValuesEqual(value, firstValue));
+    }
+    /**
+     * Compare two values for equality (deep comparison for objects/arrays)
+     */
+    areValuesEqual(value1, value2) {
+        if (value1 === value2)
+            return true;
+        if (value1 == null || value2 == null)
+            return value1 === value2;
+        if (typeof value1 !== typeof value2)
+            return false;
+        if (typeof value1 === 'object') {
+            return JSON.stringify(value1) === JSON.stringify(value2);
+        }
+        return false;
+    }
+    /**
+     * Toggle the show only changes filter
+     */
+    toggleShowOnlyChanges() {
+        this.showOnlyChanges.update(value => !value);
+    }
+    /**
+     * Remove an object from the comparison
+     */
+    removeObject(objectId) {
+        this.removedObjects.update(objects => [...objects, objectId]);
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
+                // ACoreX
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
+                // Platform
+                AXPLayoutBuilderModule }, { kind: "component", type: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-compare-view', imports: [
+                        // Angular
+                        CommonModule,
+                        // ACoreX
+                        AXFormModule,
+                        AXTextBoxModule,
+                        AXButtonModule,
+                        AXLabelModule,
+                        AXCheckBoxModule,
+                        AXTranslationModule,
+                        // Platform
+                        AXPLayoutBuilderModule
+                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
+        }] });
+
 class AXPComponentSlot {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
@@ -945,287 +997,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     args: ['AXPComponentSlotModuleFactory']
                 }] }] });
 
-//#region ----   Component Definition   ----
-class AXPActivityLogComponent {
-    //#endregion
-    //#region ----   Constructor & Lifecycle   ----
+class AXPLayoutFiltersComponent {
     constructor() {
-        //#endregion
-        //#region ----   Services & Dependencies   ----
-        this.translateService = inject(AXTranslationService);
-        this.workflowService = inject(AXPWorkflowService);
-        //#endregion
-        //#region ----   Input Properties   ----
-        /**
-         * Array of activity logs to display
-         */
-        this.activities = input([]);
-        /**
-         * Whether the component is in loading state
-         */
-        this.loading = input(false);
-        //#endregion
-        //#region ----   Component Properties   ----
-        this.i18nScope = 'activity-log';
-        this.Object = Object;
-        /**
-         * Set of expanded activity IDs
-         */
-        this.expandedItems = signal(new Set());
-        /**
-         * Flag to track if component has been initialized
-         */
-        this.isInitialized = signal(false);
-        /**
-         * Set of items that have been manually toggled (for animation control)
-         */
-        this.manuallyToggledItems = signal(new Set());
-        // Auto-expand top 5 items when activities change
-        effect(() => {
-            const activities = this.activities();
-            const currentExpanded = this.expandedItems();
-            const initialized = this.isInitialized();
-            // Only auto-expand if not initialized and activities exist
-            if (!initialized && activities.length > 0 && currentExpanded.size === 0) {
-                const top5Ids = activities.slice(0, 5).map((activity) => activity.id);
-                this.expandedItems.set(new Set(top5Ids));
-                this.isInitialized.set(true);
+        this.translate = inject(AXTranslationService);
+        this.calendarService = inject(AXCalendarService);
+        this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        this.filtersDefinitions = input([]);
+        this.initialFilters = input([]);
+        this.onFiltersChanged = output();
+        this.tagBox = viewChild('tagBox');
+        this.selectedField = signal(null);
+        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()).map((i) => ({ ...i, readOnly: true })));
+        this.context = linkedSignal(() => this.convertQueriesToContext(this.initialFilters()));
+        this.activeFilter = signal(null);
+        this.asyncTags = signal([]);
+        this.popover = viewChild('popover');
+        this.inputValue = signal('');
+        this.inlineFilters = () => {
+            return this.filtersDefinitions().filter((f) => f.filterType.inline &&
+                !this.filterOperatorMiddleware
+                    .transformFilters(this.selectedFilters())
+                    .some((sf) => sf.field === f.field &&
+                    sf.operator?.type === (this.context()[sf.field]?.operation?.type || f.operator?.type)));
+        };
+        this.getDisplayValue = async (filter, val) => {
+            if (filter.widget.type === 'select-editor' || filter.widget.type === 'select-filter') {
+                const dataSource = filter.widget.options?.['dataSource'];
+                const textField = filter.widget.options?.['textField'];
+                const valueField = filter.widget.options?.['valueField'];
+                if (dataSource?.config?.byKey) {
+                    if (Array.isArray(val)) {
+                        const results = await Promise.all(val.map((v) => dataSource.config.byKey(v)));
+                        return results.map((data) => data[textField]).join(', ');
+                    }
+                    else {
+                        const data = (await dataSource.config.byKey(val));
+                        return data?.[textField] || val;
+                    }
+                }
+                else if (Array.isArray(dataSource)) {
+                    if (Array.isArray(val)) {
+                        return dataSource.map((data) => data[textField]).join(', ');
+                    }
+                    else {
+                        const record = dataSource.find((d) => d[valueField] === val);
+                        return record ? record[textField] : '';
+                    }
+                }
+            }
+            return typeof val === 'object' && !Array.isArray(val)
+                ? `${this.convertIfISOStringDate(val.from)} and ${this.convertIfISOStringDate(val.to)}`
+                : this.convertIfISOStringDate(val);
+        };
+        this.convertIfISOStringDate = (val) => {
+            const isISOStringDate = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(val);
+            if (isISOStringDate) {
+                return this.calendarService.convert(val).date.toLocaleDateString();
             }
+            return val;
+        };
+        this.filterFields = () => {
+            return this.filtersDefinitions().filter((f) => {
+                return (f.filterType.advance &&
+                    !this.selectedFilters().some((sf) => {
+                        return sf.field === f.field;
+                    }));
+            });
+        };
+        this.#effect = effect(() => {
+            const context = untracked(() => this.context());
+            const selectedFilters = this.selectedFilters();
+            untracked(() => {
+                const convertedFilters = selectedFilters.map((f) => ({
+                    field: f.field,
+                    operator: context[f.field]?.operation,
+                    value: context[f.field]?.value,
+                }));
+                const newContext = {};
+                convertedFilters.forEach((cf) => {
+                    newContext[cf.field] = {
+                        value: cf.value,
+                        operation: typeof cf.operator === 'string' ? { type: cf.operator } : cf.operator,
+                    };
+                });
+                this.context.set(newContext);
+                this.deactivateAllListItems();
+                this.onFiltersChanged.emit(convertedFilters);
+            });
+        });
+        this.#effect2 = effect(() => {
+            const filters = this.selectedFilters();
+            const context = this.context();
+            Promise.all(filters.map(async (filter) => {
+                const val = context[filter.field]?.value;
+                const displayValue = await this.getDisplayValue(filter, val);
+                return {
+                    ...filter,
+                    query: `${this.translate.translateSync(filter.title)} ${this.getActiveOperator(filter)} '${displayValue}'`,
+                };
+            })).then((results) => {
+                this.asyncTags.set(results);
+            });
         });
     }
-    //#endregion
-    //#region ----   Utility Methods   ----
-    /**
-     * Gets the appropriate CSS class for the change type
-     */
-    getChangeClasses(changeType) {
-        const action = getSystemActions(changeType);
-        return {
-            surface: action?.color ? `ax-${action.color}-surface` : 'ax-muted-surface',
-            text: action?.color ? `ax-text-${action.color}` : 'ax-text-muted',
-            icon: action?.icon ? `${action.icon}` : 'fa-light fa-pen'
-        };
+    convertQueriesToDefinitions(queries) {
+        const definitions = this.filtersDefinitions();
+        return queries.map((q) => {
+            const definition = definitions.find((p) => p.field === q.field);
+            return {
+                field: q.field,
+                operator: q.operator,
+                value: q.value,
+                title: definition?.title || '',
+                widget: definition?.widget,
+                filterType: definition?.filterType,
+            };
+        });
     }
-    /**
- * Checks if an activity item is expanded
- */
-    isExpanded(activityId) {
-        return this.expandedItems().has(activityId);
+    convertQueriesToContext(queries) {
+        return queries.reduce((acc, q) => {
+            acc[q.field] = { value: q.value, operation: q.operator };
+            return acc;
+        }, {});
     }
-    /**
- * Toggles the expanded state of an activity item
- */
-    toggleExpanded(activityId) {
-        const currentExpanded = new Set(this.expandedItems());
-        const currentManuallyToggled = new Set(this.manuallyToggledItems());
-        // Mark this item as manually toggled for animation purposes
-        currentManuallyToggled.add(activityId);
-        this.manuallyToggledItems.set(currentManuallyToggled);
-        if (currentExpanded.has(activityId)) {
-            currentExpanded.delete(activityId);
+    ngOnInit() {
+        this.tagBoxInput = this.tagBox()?.getHostElement().querySelector('input');
+    }
+    handleSelectField(field) {
+        this.activeFilter.set(field);
+        // this.inputValue.set('');
+        this.tagBox()?.inputValue.set('');
+    }
+    handleFieldKeyDown(e, field) {
+        if (e.key === 'Enter') {
+            this.handleSelectField(field);
+        }
+    }
+    onContextChanged(e) {
+        this.context.set(e.data);
+    }
+    handleApplyFilter() {
+        if (this.activeFilter()) {
+            this.selectedFilters.update((prev) => [...prev, this.activeFilter()]);
+            this.activeFilter.set(null);
+            this.popover()?.close();
+        }
+    }
+    handleButtonKeyDown(e) {
+        if (this.popover()?.isOpen && !this.activeFilter()) {
+            // Find first list item and focus it
+            const firstItem = document.querySelector('[axListNavigationItem]');
+            if (firstItem) {
+                firstItem.focus();
+                e?.preventDefault();
+            }
+        }
+    }
+    handleKeyDown(e) {
+        if (e.nativeEvent?.key === 'ArrowDown') {
+            if (this.popover()?.isOpen && !this.activeFilter()) {
+                // Find first list item and focus it
+                const firstItem = document.querySelector('[axListNavigationItem]');
+                if (firstItem) {
+                    firstItem.focus();
+                    e.nativeEvent?.preventDefault();
+                }
+            }
         }
         else {
-            currentExpanded.add(activityId);
+            this.popover()?.open();
         }
-        this.expandedItems.set(currentExpanded);
     }
-    /**
-     * Checks if an item should have expand/collapse animation
-     */
-    shouldAnimate(activityId) {
-        return this.manuallyToggledItems().has(activityId);
+    #effect;
+    handleSelectFilters(e) {
+        if (e.value?.length < this.selectedFilters().length) {
+            this.selectedFilters.update((prev) => {
+                return e.value;
+            });
+        }
     }
-    /**
-     * Checks if an activity has expandable content (changes)
-     */
-    hasExpandableContent(activity) {
-        return activity.changes && activity.changes.length > 0;
+    getActiveOperator(filter) {
+        if (!filter) {
+            return undefined;
+        }
+        const contextOperation = this.context()?.[filter.field]?.operation?.type;
+        const operatorType = contextOperation || filter.operator?.type;
+        return ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
     }
-    //#endregion
-    //#region ----   Compare Methods   ----
-    /**
-     * Handles the compare action for an activity
-     */
-    async handleCompare(activity, event) {
-        event.stopPropagation(); // Prevent expanding/collapsing when clicking compare
-        // Get the previous activity for comparison
-        const currentIndex = this.activities().findIndex(a => a.id === activity.id);
-        if (currentIndex <= 0)
-            return; // No previous activity to compare with
-        const previousActivity = this.activities()[currentIndex - 1];
-        const ids = [
-            previousActivity.id,
-            activity.id
-        ];
-        // Execute the compare workflow
-        await this.workflowService.execute('show-entity-record-versions-compare', {
-            entity: activity.reference.type,
-            data: {
-                refId: activity.reference.id,
-                refType: activity.reference.type,
-                ids: ids
-            }
-        });
+    handleSelectInlineFilter(filter) {
+        this.context.update((prev) => ({
+            ...prev,
+            [filter.field]: {
+                value: this.tagBox()?.inputValue(),
+                operation: { type: 'contains' },
+            },
+        }));
+        this.tagBox()?.inputValue.set('');
+        this.selectedFilters.update((prev) => [...prev, filter]);
+        this.popover()?.close();
     }
-    /**
-     * Checks if an activity can be compared (has a previous version)
-     */
-    canCompare(activity) {
-        const currentIndex = this.activities().findIndex(a => a.id === activity.id);
-        return currentIndex > 0; // Can compare if not the first activity
+    handleInlineFilterKeyDown(e, filter) {
+        if (e.key === 'Enter') {
+            this.handleSelectInlineFilter(filter);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\n        <!-- Loading State -->\n        @if (loading()) {\n        <div class=\"__loading\">\n            @for (item of [1,2,3,4]; track $index) {\n            <div class=\"__item\">\n                <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n                <div class=\"__content\">\n                    <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n                </div>\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Activity Feed -->\n        @if (!loading() && activities().length > 0) {\n        <div class=\"__feed\">\n            @for (activity of activities(); track activity.id) {\n            @let changeClasses = getChangeClasses(activity.changeType);\n            @let isItemExpanded = isExpanded(activity.id);\n            @let hasExpandableContentItem = hasExpandableContent(activity);\n            <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface  \">\n                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}} fa-solid\"></i>\n                </div>\n\n                <!-- Activity Content -->\n                <div class=\"__content\">\n                    <!-- Main Activity Info -->\n                    <div class=\"__main-info\">\n\n                        <!-- User and Action with Toggle Button -->\n                        <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n                            <span class=\"__user-name\">{{ activity.user.title }}</span>\n                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\n                            <span class=\"__action-text\">\n                                {{ activity.title | translate | async }}\n                            </span>\n\n                            <!-- Compare Button -->\n                            @if (canCompare(activity)) {\n                            <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                                <i class=\"fa-solid fa-code-compare\"></i>\n                            </button>\n                            }\n\n                            <!-- Toggle Button (only show if there's expandable content) -->\n                            @if (hasExpandableContentItem) {\n                            <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                                    [class.fa-chevron-up]=\"isItemExpanded\"></i>\n                            </button>\n                            }\n                        </div>\n\n                        <!-- Expandable Description/Changes -->\n                        @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n                        <div class=\"__action-lines __expandable-content\"\n                            [class.__animated]=\"shouldAnimate(activity.id)\">\n                            @for (change of activity.changes; track $index) {\n                            @let changeClasses = getChangeClasses(change.type);\n                            <div class=\"__action-line\">\n                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\n                            </div>\n                            }\n                        </div>\n                        }\n                    </div>\n\n                    <!-- Time -->\n                    <div class=\"__time\">\n                        {{ activity.date | format: 'datetime' : 'short' | async }}\n                    </div>\n\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    handlePopoverClosed(e) {
+        this.activeFilter.set(null);
+    }
+    onPopoverOpened(e) {
+        if (this.filtersDefinitions().length === 0) {
+            this.popover()?.close();
+        }
+    }
+    deactivateAllListItems() {
+        if (this.listItems) {
+            this.listItems.forEach((item) => {
+                if (item.isActive()) {
+                    item.isActive.set(false);
+                }
+            });
+        }
+    }
+    #effect2;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPLayoutFiltersComponent, isStandalone: true, selector: "axp-layout-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i7.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i9.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i9.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i10.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-activity-log', standalone: true, imports: [
+            args: [{ selector: 'axp-layout-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
+                        FormsModule,
                         AXButtonModule,
-                        AXCommonModule,
                         AXDecoratorModule,
                         AXTranslationModule,
-                        AXSkeletonModule,
-                        AXFormatModule,
-                        AXTagModule,
-                        AXAccordionCdkModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\n        <!-- Loading State -->\n        @if (loading()) {\n        <div class=\"__loading\">\n            @for (item of [1,2,3,4]; track $index) {\n            <div class=\"__item\">\n                <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n                <div class=\"__content\">\n                    <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n                </div>\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Activity Feed -->\n        @if (!loading() && activities().length > 0) {\n        <div class=\"__feed\">\n            @for (activity of activities(); track activity.id) {\n            @let changeClasses = getChangeClasses(activity.changeType);\n            @let isItemExpanded = isExpanded(activity.id);\n            @let hasExpandableContentItem = hasExpandableContent(activity);\n            <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface  \">\n                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}} fa-solid\"></i>\n                </div>\n\n                <!-- Activity Content -->\n                <div class=\"__content\">\n                    <!-- Main Activity Info -->\n                    <div class=\"__main-info\">\n\n                        <!-- User and Action with Toggle Button -->\n                        <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n                            <span class=\"__user-name\">{{ activity.user.title }}</span>\n                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\n                            <span class=\"__action-text\">\n                                {{ activity.title | translate | async }}\n                            </span>\n\n                            <!-- Compare Button -->\n                            @if (canCompare(activity)) {\n                            <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                                <i class=\"fa-solid fa-code-compare\"></i>\n                            </button>\n                            }\n\n                            <!-- Toggle Button (only show if there's expandable content) -->\n                            @if (hasExpandableContentItem) {\n                            <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                                    [class.fa-chevron-up]=\"isItemExpanded\"></i>\n                            </button>\n                            }\n                        </div>\n\n                        <!-- Expandable Description/Changes -->\n                        @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n                        <div class=\"__action-lines __expandable-content\"\n                            [class.__animated]=\"shouldAnimate(activity.id)\">\n                            @for (change of activity.changes; track $index) {\n                            @let changeClasses = getChangeClasses(change.type);\n                            <div class=\"__action-line\">\n                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\n                            </div>\n                            }\n                        </div>\n                        }\n                    </div>\n\n                    <!-- Time -->\n                    <div class=\"__time\">\n                        {{ activity.date | format: 'datetime' : 'short' | async }}\n                    </div>\n\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [] });
+                        AXPopoverModule,
+                        AXSelectionListModule,
+                        AXTagBoxModule,
+                        AXPLayoutBuilderModule,
+                        AXListNavigationModule,
+                        AXBadgeModule,
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"] }]
+        }], propDecorators: { listItems: [{
+                type: ViewChildren,
+                args: ['caseItem']
+            }] } });
 
-class AXPCompareViewComponent {
-    constructor() {
-        //#region ----   Component Properties   ----
-        this.inputs = input();
-        this.showOnlyChanges = signal(false);
-        this.mode = input('compare');
-        this.removedObjects = signal([]);
-        this.isChangesMode = computed(() => this.mode() === 'changes');
-        //#endregion
-        //#region ----   Computed Properties   ----
-        /**
-         * Filtered fields based on showOnlyChanges toggle
-         */
-        this.filteredFields = computed(() => {
-            const fields = this.inputs()?.fields ?? [];
-            if (!this.showOnlyChanges()) {
-                return fields;
-            }
-            // Filter to show only fields where values differ across objects
-            return fields.filter(field => this.hasUnequalValues(field.path));
-        });
-        this.remainingObjects = computed(() => {
-            const objects = this.inputs()?.objects ?? [];
-            return objects.filter(obj => !this.removedObjects().includes(obj.id));
+const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        return new AXPUserAvatarProviderDefault();
+    }
+});
+class AXPUserAvatarProviderDefault {
+    provide(userId) {
+        return Promise.resolve({
+            id: userId,
+            username: 'johndoe',
+            firstName: 'John',
+            lastName: 'Doe',
+            status: 'online',
+            avatarUrl: 'https://via.placeholder.com/150',
         });
     }
-    //#endregion
-    //#region ----   Utility Methods   ----
+}
+
+class AXPUserAvatarService {
+    constructor() {
+        this.provider = inject(AXP_USER_AVATAR_PROVIDER);
+        // Cache configuration
+        this.cacheExpiryTime = 5 * 60 * 1000; // 5 minutes in milliseconds
+        this.refreshInterval = 3 * 60 * 1000; // 3 minutes in milliseconds
+        // Cache storage
+        this.cache = new Map();
+    }
     /**
-     * Check if a field value will change in the next object (to show arrow in current cell)
+     * Gets user information with caching and auto-refresh
+     * @param userId The username to fetch information for
+     * @returns Observable that emits user avatar data
      */
-    hasValueChangingToNext(fieldPath, currentObjectIndex) {
-        const objects = this.remainingObjects();
-        if (currentObjectIndex >= objects.length - 1)
-            return false;
-        const currentValue = objects[currentObjectIndex]?.context[fieldPath];
-        const nextValue = objects[currentObjectIndex + 1]?.context[fieldPath];
-        return !this.areValuesEqual(currentValue, nextValue);
+    getUserInfo$(userId) {
+        // Check if we have a cached entry
+        if (!this.cache.has(userId) || this.isExpired(userId)) {
+            // Create a new cache entry with default values
+            const defaultData = {
+                id: userId,
+                status: 'offline',
+                username: '',
+                firstName: '',
+                lastName: ''
+            };
+            const subject = new BehaviorSubject(defaultData);
+            this.cache.set(userId, {
+                data: defaultData,
+                timestamp: Date.now(),
+                subject
+            });
+            // Fetch fresh data immediately
+            this.fetchAndUpdateCache(userId);
+            // Set up auto refresh
+            timer(this.refreshInterval, this.refreshInterval)
+                .pipe(tap(() => this.fetchAndUpdateCache(userId)))
+                .subscribe();
+        }
+        return this.cache.get(userId).subject.asObservable();
     }
     /**
-     * Check if a field value has changed compared to the previous object
+     * Gets user information (Promise-based for backward compatibility)
+     * @param userId The username to fetch information for
+     * @returns Promise that resolves to user avatar data
      */
-    hasValueChangedFromPrevious(fieldPath, currentObjectIndex) {
-        const objects = this.remainingObjects();
-        if (currentObjectIndex === 0 || objects.length <= 1)
-            return false;
-        const currentValue = objects[currentObjectIndex]?.context[fieldPath];
-        const previousValue = objects[currentObjectIndex - 1]?.context[fieldPath];
-        return !this.areValuesEqual(currentValue, previousValue);
+    async getUserInfo(userId) {
+        // Check if we have an unexpired cached entry
+        if (this.cache.has(userId) && !this.isExpired(userId)) {
+            return this.cache.get(userId).data;
+        }
+        // Fetch fresh data and cache it
+        return this.fetchAndUpdateCache(userId);
     }
     /**
-     * Check if a field has unequal values across objects
+     * Clears the entire cache or a specific user's cache
+     * @param userId Optional username to clear specific cache
      */
-    hasUnequalValues(fieldPath) {
-        const objects = this.remainingObjects();
-        if (objects.length <= 1)
-            return false;
-        const values = objects.map(obj => obj.context[fieldPath]);
-        const firstValue = values[0];
-        return values.some(value => !this.areValuesEqual(value, firstValue));
+    clearCache(userId) {
+        if (userId) {
+            this.cache.delete(userId);
+        }
+        else {
+            this.cache.clear();
+        }
     }
     /**
-     * Check if a field has equal values across objects
+     * Force refresh data for a specific username
+     * @param userId The username to refresh
+     * @returns Promise that resolves to the refreshed data
      */
-    hasEqualValues(fieldPath) {
-        const objects = this.remainingObjects();
-        if (objects.length <= 1)
-            return false;
-        const values = objects.map(obj => obj.context[fieldPath]);
-        const firstValue = values[0];
-        return values.every(value => this.areValuesEqual(value, firstValue));
+    async refreshUserInfo(userId) {
+        return this.fetchAndUpdateCache(userId);
     }
     /**
-     * Compare two values for equality (deep comparison for objects/arrays)
+     * Checks if a cache entry is expired
      */
-    areValuesEqual(value1, value2) {
-        if (value1 === value2)
+    isExpired(userId) {
+        const entry = this.cache.get(userId);
+        if (!entry)
             return true;
-        if (value1 == null || value2 == null)
-            return value1 === value2;
-        if (typeof value1 !== typeof value2)
-            return false;
-        if (typeof value1 === 'object') {
-            return JSON.stringify(value1) === JSON.stringify(value2);
+        return (Date.now() - entry.timestamp) > this.cacheExpiryTime;
+    }
+    /**
+     * Fetches data from provider and updates the cache
+     */
+    async fetchAndUpdateCache(userId) {
+        try {
+            const data = await this.provider.provide(userId);
+            if (!data) {
+                throw new Error(`User info not found for ${userId}`);
+            }
+            const entry = this.cache.get(userId);
+            // Update the cache entry
+            if (entry) {
+                entry.data = data;
+                entry.timestamp = Date.now();
+                entry.subject.next(data);
+            }
+            else {
+                // Create a new cache entry if needed
+                const subject = new BehaviorSubject(data);
+                this.cache.set(userId, {
+                    data,
+                    timestamp: Date.now(),
+                    subject
+                });
+            }
+            return data;
+        }
+        catch (error) {
+            console.error(`Error fetching user info for ${userId}:`, error);
+            throw error;
         }
-        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPUserAvatarComponent {
+    constructor() {
+        this.userAvatarService = inject(AXPUserAvatarService);
+        this.destroy$ = new Subject();
+        this.userInfo = signal(null);
+        this.size = input(40);
+        this.userId = input('');
+        this.src = signal('');
+        this.userName = computed(() => this.userInfo()?.username || '');
+        this.firstName = computed(() => this.userInfo()?.firstName || 'Root');
+        this.lastName = computed(() => this.userInfo()?.lastName || 'User');
+        this.title = computed(() => `${this.firstName()} ${this.lastName()}`);
+        this.isOnline = computed(() => this.userInfo()?.status === 'online');
+        this.avatarText = computed(() => this.getInitials());
+        this.avatarColor = computed(() => this.pickColor(this.avatarText()));
+        this.hasPicture = signal(false);
+    }
+    onImageError(event) {
+        this.hasPicture.set(false);
+    }
+    onImageLoad(event) {
+        this.hasPicture.set(true);
+    }
+    ngOnInit() {
+        this.loadUserData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUserData() {
+        // Skip if no username provided
+        if (!this.userId()) {
+            return;
+        }
+        // Subscribe to the user info observable to get real-time updates
+        this.userAvatarService
+            .getUserInfo$(this.userId())
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((userData) => {
+            this.userInfo.set(userData);
+            // This is a placeholder - replace with your actual avatar URL logic
+            this.generateAvatarSrc();
+        });
     }
     /**
-     * Toggle the show only changes filter
+     * Generate avatar image source
+     * This is a placeholder - implement based on your actual requirements
      */
-    toggleShowOnlyChanges() {
-        this.showOnlyChanges.update(value => !value);
+    generateAvatarSrc() {
+        // Example: Check if the user has a custom avatar URL
+        // If not, generate a placeholder using initials
+        if (this.userInfo()?.avatarUrl) {
+            this.src.set(this.userInfo()?.avatarUrl);
+        }
+        else {
+            // Generate a placeholder - you could use an external service like UI Avatars
+            // or implement your own logic
+            const initials = this.getInitials();
+            this.src.set(`https://avatar.iran.liara.run/username?username=${encodeURIComponent(initials)}`);
+        }
     }
     /**
-     * Remove an object from the comparison
+     * Get initials from first and last name
      */
-    removeObject(objectId) {
-        this.removedObjects.update(objects => [...objects, objectId]);
+    getInitials() {
+        const firstInitial = this.firstName().charAt(0).toUpperCase();
+        const lastInitial = this.lastName().charAt(0).toUpperCase();
+        return firstInitial + lastInitial;
     }
-    //#endregion
-    //#region ----   Lifecycle Methods   ----
-    ngOnInit() {
+    hashString(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = (hash << 5) - hash + str.charCodeAt(i);
+            hash |= 0;
+        }
+        return Math.abs(hash);
     }
-    ngOnDestroy() {
+    pickColor(initials) {
+        const colors = ['primary', 'secondary', 'danger', 'warning', 'success', 'accent1', 'accent2', 'accent3'];
+        const idx = this.hashString(initials) % colors.length;
+        return colors[idx];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
-                // Angular
-                CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
-                // ACoreX
-                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
-                // Platform
-                AXPLayoutBuilderModule }, { kind: "component", type: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$3.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-compare-view', imports: [
-                        // Angular
-                        CommonModule,
-                        // ACoreX
-                        AXFormModule,
-                        AXTextBoxModule,
-                        AXButtonModule,
-                        AXLabelModule,
-                        AXCheckBoxModule,
-                        AXTranslationModule,
-                        // Platform
-                        AXPLayoutBuilderModule
-                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
+            args: [{ selector: 'axp-user-avatar', imports: [
+                        AXAvatarModule,
+                        AXDecoratorModule,
+                        AXImageModule,
+                        AXBadgeModule
+                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n" }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
+export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPLayoutFiltersComponent, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map