@acorex/platform 19.3.4 → 19.3.6

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-platform-layout-components.mjs","sources":["../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.provider.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.service.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.component.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.component.html","../../../../libs/platform/layout/components/src/acorex-platform-layout-components.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\nimport { AXPUserAvatarData, AXPUserAvatarProvider } from \"./user-avatar.types\";\n\nexport const AXP_USER_AVATAR_PROVIDER = new InjectionToken<AXPUserAvatarProvider>(\n    'AXP_USER_AVATAR_PROVIDER',\n    {\n        providedIn: 'root',\n        factory: () => {\n            return new AXPUserAvatarProviderDefault();\n        }\n    }\n);\n\n\nclass AXPUserAvatarProviderDefault implements AXPUserAvatarProvider {\n    provide(userId: string): Promise<AXPUserAvatarData> {\n        return Promise.resolve({\n            id: userId,\n            username: 'johndoe',\n            firstName: 'John',\n            lastName: 'Doe',\n            status: 'online',\n            avatarUrl: 'https://via.placeholder.com/150',\n        });\n    }\n}\n","import { inject, Injectable } from \"@angular/core\";\nimport { AXPUserAvatarData } from \"./user-avatar.types\";\nimport { AXP_USER_AVATAR_PROVIDER } from \"./user-avatar.provider\";\nimport { BehaviorSubject, Observable, timer } from 'rxjs';\nimport { map, shareReplay, switchMap, tap } from 'rxjs/operators';\n\ninterface CacheEntry {\n    data: AXPUserAvatarData;\n    timestamp: number;\n    subject: BehaviorSubject<AXPUserAvatarData>;\n}\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class AXPUserAvatarService {\n    private provider = inject(AXP_USER_AVATAR_PROVIDER);\n\n    // Cache configuration\n    private readonly cacheExpiryTime = 5 * 60 * 1000; // 5 minutes in milliseconds\n    private readonly refreshInterval = 3 * 60 * 1000; // 3 minutes in milliseconds\n\n    // Cache storage\n    private cache = new Map<string, CacheEntry>();\n\n    /**\n     * Gets user information with caching and auto-refresh\n     * @param userId The username to fetch information for\n     * @returns Observable that emits user avatar data\n     */\n    getUserInfo$(userId: string): Observable<AXPUserAvatarData> {\n        // Check if we have a cached entry\n        if (!this.cache.has(userId) || this.isExpired(userId)) {\n            // Create a new cache entry with default values\n            const defaultData: AXPUserAvatarData = {\n                id: userId,\n                status: 'offline',\n                username: '',\n                firstName: '',\n                lastName: ''\n            };\n            const subject = new BehaviorSubject<AXPUserAvatarData>(defaultData);\n            this.cache.set(userId, {\n                data: defaultData,\n                timestamp: Date.now(),\n                subject\n            });\n\n            // Fetch fresh data immediately\n            this.fetchAndUpdateCache(userId);\n\n            // Set up auto refresh\n            timer(this.refreshInterval, this.refreshInterval)\n                .pipe(\n                    tap(() => this.fetchAndUpdateCache(userId))\n                )\n                .subscribe();\n        }\n\n        return this.cache.get(userId)!.subject.asObservable();\n    }\n\n    /**\n     * Gets user information (Promise-based for backward compatibility)\n     * @param userId The username to fetch information for\n     * @returns Promise that resolves to user avatar data\n     */\n    async getUserInfo(userId: string): Promise<AXPUserAvatarData> {\n        // Check if we have an unexpired cached entry\n        if (this.cache.has(userId) && !this.isExpired(userId)) {\n            return this.cache.get(userId)!.data;\n        }\n\n        // Fetch fresh data and cache it\n        return this.fetchAndUpdateCache(userId);\n    }\n\n    /**\n     * Clears the entire cache or a specific user's cache\n     * @param userId Optional username to clear specific cache\n     */\n    clearCache(userId?: string): void {\n        if (userId) {\n            this.cache.delete(userId);\n        } else {\n            this.cache.clear();\n        }\n    }\n\n    /**\n     * Force refresh data for a specific username\n     * @param userId The username to refresh\n     * @returns Promise that resolves to the refreshed data\n     */\n    async refreshUserInfo(userId: string): Promise<AXPUserAvatarData> {\n        return this.fetchAndUpdateCache(userId);\n    }\n\n    /**\n     * Checks if a cache entry is expired\n     */\n    private isExpired(userId: string): boolean {\n        const entry = this.cache.get(userId);\n        if (!entry) return true;\n\n        return (Date.now() - entry.timestamp) > this.cacheExpiryTime;\n    }\n\n    /**\n     * Fetches data from provider and updates the cache\n     */\n    private async fetchAndUpdateCache(userId: string): Promise<AXPUserAvatarData> {\n        try {\n            const data = await this.provider.provide(userId);\n            if (!data) {\n                throw new Error(`User info not found for ${userId}`);\n            }\n            const entry = this.cache.get(userId);\n\n            // Update the cache entry\n            if (entry) {\n                entry.data = data;\n                entry.timestamp = Date.now();\n                entry.subject.next(data);\n            } else {\n                // Create a new cache entry if needed\n                const subject = new BehaviorSubject<AXPUserAvatarData>(data);\n                this.cache.set(userId, {\n                    data,\n                    timestamp: Date.now(),\n                    subject\n                });\n            }\n\n            return data;\n        } catch (error) {\n            console.error(`Error fetching user info for ${userId}:`, error);\n            throw error;\n        }\n    }\n}","import { Component, OnDestroy, OnInit, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { AXBadgeModule } from '@acorex/components/badge';\nimport { AXPUserAvatarService } from './user-avatar.service';\nimport { Subject, takeUntil } from 'rxjs';\nimport { AXAvatarModule } from '@acorex/components/avatar';\nimport { AXHtmlEvent } from '@acorex/components/common';\nimport { AXPUserAvatarData } from './user-avatar.types';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXImageModule } from '@acorex/components/image';\nimport { AXPDataGenerator } from '@acorex/platform/core';\n\n@Component({\n    selector: 'axp-user-avatar',\n    templateUrl: './user-avatar.component.html',\n    styleUrl: './user-avatar.component.scss',\n    imports: [\n        // Angular\n        CommonModule,\n        // ACoreX\n        AXAvatarModule,\n        AXDecoratorModule,\n        AXImageModule,\n        // Platform\n        AXBadgeModule\n    ],\n    encapsulation: ViewEncapsulation.None,\n    providers: [],\n})\nexport class AXPUserAvatarComponent implements OnInit, OnDestroy {\n    private readonly userAvatarService = inject(AXPUserAvatarService);\n    private readonly destroy$ = new Subject<void>();\n\n    protected userInfo = signal<AXPUserAvatarData | null>(null);\n\n\n    size = input<number>(40);\n    userId = input<string>('');\n\n    src = signal<string>('');\n    userName = computed(() => this.userInfo()?.username || '');\n    firstName = computed(() => this.userInfo()?.firstName || '');\n    lastName = computed(() => this.userInfo()?.lastName || '');\n    title = computed(() => `${this.firstName()} ${this.lastName()}`);\n    isOnline = computed(() => this.userInfo()?.status === 'online');\n\n    avatarText = computed(() => this.getInitials(this.firstName(), this.lastName()));\n    avatarColor = computed(() => this.pickColor(this.avatarText()));\n\n    protected hasPicture = signal(false);\n\n    protected onImageError(event: AXHtmlEvent<ErrorEvent>) {\n        this.hasPicture.set(false);\n    }\n\n    protected onImageLoad(event: AXHtmlEvent<Event>) {\n        this.hasPicture.set(true);\n    }\n\n    ngOnInit(): void {\n        this.loadUserData();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    private loadUserData(): void {\n        // Skip if no username provided\n        if (!this.userId()) {\n            return;\n        }\n\n        // Subscribe to the user info observable to get real-time updates\n        this.userAvatarService.getUserInfo$(this.userId())\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(userData => {\n                this.userInfo.set(userData);\n                // This is a placeholder - replace with your actual avatar URL logic\n                this.generateAvatarSrc(userData);\n            });\n    }\n\n    /**\n     * Generate avatar image source\n     * This is a placeholder - implement based on your actual requirements\n     */\n    private generateAvatarSrc(userData: any): void {\n        // Example: Check if the user has a custom avatar URL\n        // If not, generate a placeholder using initials\n        if (userData.avatarUrl) {\n            this.src.set(userData.avatarUrl);\n        } else {\n            // Generate a placeholder - you could use an external service like UI Avatars\n            // or implement your own logic\n            const initials = this.getInitials(userData.firstName || '', userData.lastName || '');\n            this.src.set(`https://avatar.iran.liara.run/username?username=${encodeURIComponent(initials)}`);\n        }\n    }\n\n    /**\n     * Get initials from first and last name\n     */\n    private getInitials(firstName: string, lastName: string): string {\n        const firstInitial = firstName.charAt(0).toUpperCase();\n        const lastInitial = lastName.charAt(0).toUpperCase();\n        return firstInitial + lastInitial;\n    }\n\n    private hashString(str: string): number {\n        let hash = 0;\n        for (let i = 0; i < str.length; i++) {\n            hash = (hash << 5) - hash + str.charCodeAt(i);\n            hash |= 0;\n        }\n        return Math.abs(hash);\n    }\n\n    private pickColor(initials: string): string {\n        const colors = [\n            'primary',\n            'secondary',\n            'danger',\n            'warning',\n            'success',\n            'accent1',\n            'accent2',\n            'accent3',\n        ];\n        const idx = this.hashString(initials) % colors.length;\n        return colors[idx];\n    }\n\n\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-platform-layout-components.mjs","sources":["../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.provider.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.service.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.component.ts","../../../../libs/platform/layout/components/src/lib/user-avatar/user-avatar.component.html","../../../../libs/platform/layout/components/src/acorex-platform-layout-components.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\nimport { AXPUserAvatarData, AXPUserAvatarProvider } from \"./user-avatar.types\";\n\nexport const AXP_USER_AVATAR_PROVIDER = new InjectionToken<AXPUserAvatarProvider>(\n    'AXP_USER_AVATAR_PROVIDER',\n    {\n        providedIn: 'root',\n        factory: () => {\n            return new AXPUserAvatarProviderDefault();\n        }\n    }\n);\n\n\nclass AXPUserAvatarProviderDefault implements AXPUserAvatarProvider {\n    provide(userId: string): Promise<AXPUserAvatarData> {\n        return Promise.resolve({\n            id: userId,\n            username: 'johndoe',\n            firstName: 'John',\n            lastName: 'Doe',\n            status: 'online',\n            avatarUrl: 'https://via.placeholder.com/150',\n        });\n    }\n}\n","import { inject, Injectable } from \"@angular/core\";\nimport { AXPUserAvatarData } from \"./user-avatar.types\";\nimport { AXP_USER_AVATAR_PROVIDER } from \"./user-avatar.provider\";\nimport { BehaviorSubject, Observable, timer } from 'rxjs';\nimport { map, shareReplay, switchMap, tap } from 'rxjs/operators';\n\ninterface CacheEntry {\n    data: AXPUserAvatarData;\n    timestamp: number;\n    subject: BehaviorSubject<AXPUserAvatarData>;\n}\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class AXPUserAvatarService {\n    private provider = inject(AXP_USER_AVATAR_PROVIDER);\n\n    // Cache configuration\n    private readonly cacheExpiryTime = 5 * 60 * 1000; // 5 minutes in milliseconds\n    private readonly refreshInterval = 3 * 60 * 1000; // 3 minutes in milliseconds\n\n    // Cache storage\n    private cache = new Map<string, CacheEntry>();\n\n    /**\n     * Gets user information with caching and auto-refresh\n     * @param userId The username to fetch information for\n     * @returns Observable that emits user avatar data\n     */\n    getUserInfo$(userId: string): Observable<AXPUserAvatarData> {\n        // Check if we have a cached entry\n        if (!this.cache.has(userId) || this.isExpired(userId)) {\n            // Create a new cache entry with default values\n            const defaultData: AXPUserAvatarData = {\n                id: userId,\n                status: 'offline',\n                username: '',\n                firstName: '',\n                lastName: ''\n            };\n            const subject = new BehaviorSubject<AXPUserAvatarData>(defaultData);\n            this.cache.set(userId, {\n                data: defaultData,\n                timestamp: Date.now(),\n                subject\n            });\n\n            // Fetch fresh data immediately\n            this.fetchAndUpdateCache(userId);\n\n            // Set up auto refresh\n            timer(this.refreshInterval, this.refreshInterval)\n                .pipe(\n                    tap(() => this.fetchAndUpdateCache(userId))\n                )\n                .subscribe();\n        }\n\n        return this.cache.get(userId)!.subject.asObservable();\n    }\n\n    /**\n     * Gets user information (Promise-based for backward compatibility)\n     * @param userId The username to fetch information for\n     * @returns Promise that resolves to user avatar data\n     */\n    async getUserInfo(userId: string): Promise<AXPUserAvatarData> {\n        // Check if we have an unexpired cached entry\n        if (this.cache.has(userId) && !this.isExpired(userId)) {\n            return this.cache.get(userId)!.data;\n        }\n\n        // Fetch fresh data and cache it\n        return this.fetchAndUpdateCache(userId);\n    }\n\n    /**\n     * Clears the entire cache or a specific user's cache\n     * @param userId Optional username to clear specific cache\n     */\n    clearCache(userId?: string): void {\n        if (userId) {\n            this.cache.delete(userId);\n        } else {\n            this.cache.clear();\n        }\n    }\n\n    /**\n     * Force refresh data for a specific username\n     * @param userId The username to refresh\n     * @returns Promise that resolves to the refreshed data\n     */\n    async refreshUserInfo(userId: string): Promise<AXPUserAvatarData> {\n        return this.fetchAndUpdateCache(userId);\n    }\n\n    /**\n     * Checks if a cache entry is expired\n     */\n    private isExpired(userId: string): boolean {\n        const entry = this.cache.get(userId);\n        if (!entry) return true;\n\n        return (Date.now() - entry.timestamp) > this.cacheExpiryTime;\n    }\n\n    /**\n     * Fetches data from provider and updates the cache\n     */\n    private async fetchAndUpdateCache(userId: string): Promise<AXPUserAvatarData> {\n        try {\n            const data = await this.provider.provide(userId);\n            if (!data) {\n                throw new Error(`User info not found for ${userId}`);\n            }\n            const entry = this.cache.get(userId);\n\n            // Update the cache entry\n            if (entry) {\n                entry.data = data;\n                entry.timestamp = Date.now();\n                entry.subject.next(data);\n            } else {\n                // Create a new cache entry if needed\n                const subject = new BehaviorSubject<AXPUserAvatarData>(data);\n                this.cache.set(userId, {\n                    data,\n                    timestamp: Date.now(),\n                    subject\n                });\n            }\n\n            return data;\n        } catch (error) {\n            console.error(`Error fetching user info for ${userId}:`, error);\n            throw error;\n        }\n    }\n}","import { Component, OnDestroy, OnInit, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { AXBadgeModule } from '@acorex/components/badge';\nimport { AXPUserAvatarService } from './user-avatar.service';\nimport { Subject, takeUntil } from 'rxjs';\nimport { AXAvatarModule } from '@acorex/components/avatar';\nimport { AXHtmlEvent } from '@acorex/cdk/common';\nimport { AXPUserAvatarData } from './user-avatar.types';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXImageModule } from '@acorex/components/image';\nimport { AXPDataGenerator } from '@acorex/platform/core';\n\n@Component({\n  selector: 'axp-user-avatar',\n  templateUrl: './user-avatar.component.html',\n  styleUrl: './user-avatar.component.scss',\n  imports: [\n    // Angular\n    CommonModule,\n    // ACoreX\n    AXAvatarModule,\n    AXDecoratorModule,\n    AXImageModule,\n    // Platform\n    AXBadgeModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [],\n})\nexport class AXPUserAvatarComponent implements OnInit, OnDestroy {\n  private readonly userAvatarService = inject(AXPUserAvatarService);\n  private readonly destroy$ = new Subject<void>();\n\n  protected userInfo = signal<AXPUserAvatarData | null>(null);\n\n  size = input<number>(40);\n  userId = input<string>('');\n\n  src = signal<string>('');\n  userName = computed(() => this.userInfo()?.username || '');\n  firstName = computed(() => this.userInfo()?.firstName || '');\n  lastName = computed(() => this.userInfo()?.lastName || '');\n  title = computed(() => `${this.firstName()} ${this.lastName()}`);\n  isOnline = computed(() => this.userInfo()?.status === 'online');\n\n  avatarText = computed(() => this.getInitials(this.firstName(), this.lastName()));\n  avatarColor = computed(() => this.pickColor(this.avatarText()));\n\n  protected hasPicture = signal(false);\n\n  protected onImageError(event: AXHtmlEvent<ErrorEvent>) {\n    this.hasPicture.set(false);\n  }\n\n  protected onImageLoad(event: AXHtmlEvent<Event>) {\n    this.hasPicture.set(true);\n  }\n\n  ngOnInit(): void {\n    this.loadUserData();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  private loadUserData(): void {\n    // Skip if no username provided\n    if (!this.userId()) {\n      return;\n    }\n\n    // Subscribe to the user info observable to get real-time updates\n    this.userAvatarService\n      .getUserInfo$(this.userId())\n      .pipe(takeUntil(this.destroy$))\n      .subscribe((userData) => {\n        this.userInfo.set(userData);\n        // This is a placeholder - replace with your actual avatar URL logic\n        this.generateAvatarSrc(userData);\n      });\n  }\n\n  /**\n   * Generate avatar image source\n   * This is a placeholder - implement based on your actual requirements\n   */\n  private generateAvatarSrc(userData: any): void {\n    // Example: Check if the user has a custom avatar URL\n    // If not, generate a placeholder using initials\n    if (userData.avatarUrl) {\n      this.src.set(userData.avatarUrl);\n    } else {\n      // Generate a placeholder - you could use an external service like UI Avatars\n      // or implement your own logic\n      const initials = this.getInitials(userData.firstName || '', userData.lastName || '');\n      this.src.set(`https://avatar.iran.liara.run/username?username=${encodeURIComponent(initials)}`);\n    }\n  }\n\n  /**\n   * Get initials from first and last name\n   */\n  private getInitials(firstName: string, lastName: string): string {\n    const firstInitial = firstName.charAt(0).toUpperCase();\n    const lastInitial = lastName.charAt(0).toUpperCase();\n    return firstInitial + lastInitial;\n  }\n\n  private hashString(str: string): number {\n    let hash = 0;\n    for (let i = 0; i < str.length; i++) {\n      hash = (hash << 5) - hash + str.charCodeAt(i);\n      hash |= 0;\n    }\n    return Math.abs(hash);\n  }\n\n  private pickColor(initials: string): string {\n    const colors = ['primary', 'secondary', 'danger', 'warning', 'success', 'accent1', 'accent2', 'accent3'];\n    const idx = this.hashString(initials) % colors.length;\n    return colors[idx];\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i1$3 from '@acorex/platform/layout/builder';
+import * as i1$2 from '@acorex/platform/layout/builder';
 import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutWidgetComponent, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent } from '@acorex/platform/layout/builder';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, untracked, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
@@ -13,9 +13,10 @@ import { AXFileService } from '@acorex/core/file';
 import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, capitalize, unionBy, isArray, isEqual } from 'lodash-es';
 import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
 import { AXPBroadcastEventService, AXPPlatformScope } from '@acorex/platform/core';
-import { AXTranslationService } from '@acorex/core/translation';
-import * as i2$1 from '@acorex/components/common';
-import { AXCommonModule } from '@acorex/components/common';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import * as i2$1 from '@acorex/cdk/common';
+import { AXCommonModule } from '@acorex/cdk/common';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i7 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
@@ -26,19 +27,19 @@ import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$5 from '@acorex/components/button-group';
+import * as i1$4 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3$1 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/dropdown-button';
+import * as i5$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i2$2 from '@acorex/components/menu';
+import * as i2$3 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i1$2 from '@acorex/components/collapse';
+import * as i2$2 from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
-import * as i1$4 from '@acorex/components/breadcrumbs';
+import * as i1$3 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -1254,10 +1255,8 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
             .filter((c) => c.length > 0)
             .flat(), 'name'));
         this.tabs = computed(() => orderBy([{ name: 'all', title: 'All', order: 0 }, ...this.categories()], (c) => c.order));
-        // computed max visible widgets in a tab  
-        this.maxVisibleWidgets = computed(() => Math.max(...this.categories().map(c => this.allWidgets()
-            .filter(w => castArray(w.categories ?? [])
-            .some(c => c.name === c.name)).length)));
+        // computed max visible widgets in a tab
+        this.maxVisibleWidgets = computed(() => Math.max(...this.categories().map((c) => this.allWidgets().filter((w) => castArray(w.categories ?? []).some((c) => c.name === c.name)).length)));
         this.currentTabIndex = signal(0);
         this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()]);
     }
@@ -1357,7 +1356,7 @@ class AXPWidgetPropertyViewerComponent {
         this.context = signal({});
         this.initialContext = {};
         this.functions = {
-            getDataSourceNames: this.getDataSourceNames.bind(this)
+            getDataSourceNames: this.getDataSourceNames.bind(this),
         };
         effect(() => {
             if (!this.widget())
@@ -1394,7 +1393,7 @@ class AXPWidgetPropertyViewerComponent {
         ///
         tabs.forEach((tab) => {
             const props = tab.name == 'general'
-                ? this.config()?.properties ?? []
+                ? (this.config()?.properties ?? [])
                 : ((this.config()?.components)[tab.name]?.properties ?? []);
             //
             this.allPoperties.push(...props);
@@ -1403,12 +1402,13 @@ class AXPWidgetPropertyViewerComponent {
                 name: pg.group.name,
                 title: pg.group.title,
                 props: sortBy(props.filter((p) => p.group.name == pg.group.name && pg.visible), ['order', 'title']),
-            })), ['order', 'title']), 'name').filter(c => c.props.length);
+            })), ['order', 'title']), 'name').filter((c) => c.props.length);
         });
         this.tabs.set(tabs.filter((c) => c.groups.length));
         //
         this.initialContext = this.allPoperties
-            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) || (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
+            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) ||
+            (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
             .reduce((acc, c) => {
             set(acc, c.schema.interface.path, c.schema.defaultValue);
             return acc;
@@ -1435,15 +1435,20 @@ class AXPWidgetPropertyViewerComponent {
         this.groupCollapsedStates.set(group, collapsed);
     }
     async getDataSourceNames() {
-        const result = (await this.dataSourceProvider.items()).map(c => ({ id: c.name, title: c.title, valueField: c.valueField, textField: c.textField }));
+        const result = (await this.dataSourceProvider.items()).map((c) => ({
+            id: c.name,
+            title: c.title,
+            valueField: c.valueField,
+            textField: c.textField,
+        }));
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i2$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i2$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onChanged: [{
                 type: Output
             }] } });
@@ -1863,7 +1868,7 @@ class AXPDesignerBoardComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$3.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -1904,7 +1909,7 @@ class AXPDesignerBreadcrumbsComponent {
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2153,7 +2158,7 @@ class AXPDesignerHeaderMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXMenuModule }, { kind: "component", type: i2$3.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$3.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
@@ -2180,7 +2185,7 @@ class AXPDesignerViewSizeToolbarComponent {
         <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
       </ax-button-group-item>
     </ax-button-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
             type: Component,
@@ -2224,7 +2229,7 @@ class AXPLayoutDesignerComponent {
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [widget]=\"service.selectedNode()!\"\n        style=\"--ax-sys-size-base: 1.875rem\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\"\n        class=\"ax-w-1/4\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [widget]=\"service.selectedNode()!\"\n        style=\"--ax-sys-size-base: 1.875rem\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\"\n        class=\"ax-w-1/4\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -2303,7 +2308,7 @@ class AXPLayoutDesignerPreviewViewerComponent {
     <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.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: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,