@acorex/platform 1.0.0

package/fesm2022/acorex-platform-layouts.mjs

@@ -0,0 +1,3732 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectorRef, NgModule, ViewEncapsulation, signal, computed, Input, HostListener, InjectionToken, ViewChild, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
+import * as i2$4 from '@ngrx/store';
+import { createAction, createFeature, createReducer, on, createSelector, Store, props, StoreModule } from '@ngrx/store';
+import { fromEvent, debounceTime, map, withLatestFrom, mergeMap, of, filter, first, BehaviorSubject, timer, defaultIfEmpty, switchMap } from 'rxjs';
+import * as i2 from '@acorex/platform/common';
+import { AXPNavigateAction as AXPNavigateAction$1, AXPLoadInitState, AXP_MENU_LOADER, AXPRouteUtilityService, AXPComponentLogoConfig, AXPFontIconLogoConfig, AXPImageUrlLogoConfig, AXPTextLogoConfig, AXP_PLATFORM_CONFIG_TOKEN, AXPComponentSlotModule, AXPStickyDirective, AXPCommonModule } from '@acorex/platform/common';
+import * as i3$2 from '@acorex/core/platform';
+import { AXPlatform } from '@acorex/core/platform';
+import * as i1$5 from '@ngrx/effects';
+import { Actions, createEffect, ofType, EffectsModule } from '@ngrx/effects';
+import * as i1 from '@angular/router';
+import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy } from '@angular/router';
+import * as i1$1 from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
+import * as i1$2 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i4 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDialogModule, AXDialogService } from '@acorex/components/dialog';
+import * as i4$1 from '@acorex/components/drawer';
+import { AXDrawerModule } from '@acorex/components/drawer';
+import * as i4$2 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i9 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i2$3 from '@acorex/core/utils';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXCollapseModule } from '@acorex/components/collapse';
+import * as i3$1 from '@acorex/components/nav';
+import { AXNavModule } from '@acorex/components/nav';
+import * as i8 from '@acorex/platform/auth';
+import { AXPSessionService, AXPAuthModule, AXPAuthGuard } from '@acorex/platform/auth';
+import * as i2$1 from '@acorex/components/image';
+import { AXImageModule } from '@acorex/components/image';
+import { merge, cloneDeep, assign } from 'lodash-es';
+import { AXToastService, AXToastModule } from '@acorex/components/toast';
+import * as i3$4 from '@acorex/platform/workflow';
+import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowError, AXPWorkflowFunction, AXPWorkflowService, ofType as ofType$1, AXPWorkflowModule } from '@acorex/platform/workflow';
+import * as i5 from '@acorex/components/side-menu';
+import { AXSideMenuModule } from '@acorex/components/side-menu';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i10 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i5$1 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i1$3 from '@acorex/platform/schema';
+import { AXPSchemaRegistryService, EQ_OPER, STRING_OPERATORS, CONTAINS_OPER, NUMBER_OPERATORS, BETWEEN_OPER, DATE_OPERATORS, AXPSchemaModule } from '@acorex/platform/schema';
+import * as i15 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i2$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i8$1 from '@acorex/components/switch';
+import { AXSwitchModule } from '@acorex/components/switch';
+import * as i6 from '@acorex/components/select-box';
+import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i4$3 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import * as i7 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i4$4 from '@acorex/components/selection-list';
+import { AXSelectionListModule } from '@acorex/components/selection-list';
+import * as i14 from '@acorex/components/dropdown-button';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i1$4 from '@acorex/components/action-sheet';
+import { AXActionSheetModule } from '@acorex/components/action-sheet';
+import * as i6$1 from '@acorex/components/data-table';
+import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXFormatService } from '@acorex/core/format';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import * as i12 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXCommonModule, AXDataSource } from '@acorex/components/common';
+import * as i3$3 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import { AXListModule } from '@acorex/components/list';
+import { PortalModule } from '@angular/cdk/portal';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i11 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+
+const AXPWindowResizeAction = createAction('[Layout] Resize');
+//
+const AXPLayoutRootDrawerClose = createAction('[Root Drawer] Close');
+const AXPLayoutRootDrawerToggle = createAction('[Root Drawer] Toggle');
+const AXPLayoutChildDrawerClose = createAction('[Child Drawer] Close');
+const AXPLayoutChildDrawerToggle = createAction('[Child Drawer] Toggle');
+//
+const AXPLayoutThemeDarkToggleAction = createAction('[Theme] Toggle Dark');
+const AXPLoadingShowAction = createAction('[Theme] Loading Show');
+const AXPLoadingHideAction = createAction('[Theme] Loading Hide');
+
+const platform$1 = new AXPlatform();
+const initialState = {
+    theme: {
+        dark: false,
+    },
+    screen: {
+        small: platform$1.is('SM') || platform$1.is('MD'),
+    },
+    drawer: {
+        root: !(platform$1.is('SM') || platform$1.is('MD')),
+        child: !(platform$1.is('SM') || platform$1.is('MD'))
+    },
+    loading: false
+};
+
+const platform = new AXPlatform();
+const AXPLayoutFeature = createFeature({
+    name: 'layout',
+    reducer: createReducer(initialState, 
+    // close drawers on navigatin
+    on(AXPNavigateAction$1, (state, action) => ({
+        ...state,
+        drawer: { ...state.drawer, root: platform.is('SM') ? false : state.drawer.root, child: platform.is('SM') ? false : state.drawer.child },
+    })), 
+    // toggle root drawers 
+    on(AXPLayoutRootDrawerToggle, (state, action) => ({
+        ...state,
+        drawer: { ...state.drawer, root: !state.drawer.root, child: (!state.drawer.root && platform.is('SM')) ? false : state.drawer.child },
+    })), 
+    // close root drawers 
+    on(AXPLayoutRootDrawerClose, (state) => ({
+        ...state,
+        drawer: { ...state.drawer, root: false },
+    })), 
+    // toggle second level child drawers 
+    on(AXPLayoutChildDrawerToggle, (state) => ({
+        ...state,
+        drawer: { ...state.drawer, child: !state.drawer.child },
+    })), 
+    // close second level child drawers 
+    on(AXPLayoutChildDrawerClose, (state) => ({
+        ...state,
+        drawer: { ...state.drawer, child: false },
+    })), 
+    // close drawers on window resize event 
+    on(AXPWindowResizeAction, (state) => ({
+        ...state,
+        screen: { small: platform.is('SM') || platform.is('MD') },
+        drawer: {
+            ...state.drawer,
+            root: platform.is('SM') || platform.is('MD') ? false : state.drawer.root,
+            child: platform.is('SM') || platform.is('MD') ? false : state.drawer.child
+        },
+    })), 
+    // toggle dark mode of theme 
+    on(AXPLayoutThemeDarkToggleAction, (state) => ({
+        ...state,
+        theme: { dark: !state.theme?.dark },
+    })), 
+    // Admin Root layout loading 
+    on(AXPLoadingShowAction, (state) => ({
+        ...state,
+        loading: true,
+    })), on(AXPLoadingHideAction, (state) => ({
+        ...state,
+        loading: false,
+    }))),
+});
+const { name, reducer, selectLayoutState, } = AXPLayoutFeature;
+
+const getRootDrawer = () => createSelector(selectLayoutState, (value) => value.drawer.root);
+const getChildDrawer = () => createSelector(selectLayoutState, (value) => value.drawer.child);
+const isSmallScreen = () => createSelector(selectLayoutState, (value) => value.screen.small);
+const isDarkTheme = () => createSelector(selectLayoutState, (value) => value.theme.dark);
+const isLoading = () => createSelector(selectLayoutState, (value) => value.loading);
+
+class AXPLayoutEffects {
+    constructor() {
+        this.platform = inject(AXPlatform);
+        this.actions$ = inject(Actions);
+        this.store$ = inject(Store);
+        this.resize$ = createEffect(() => fromEvent(window, 'resize').pipe(debounceTime(300), map(() => AXPWindowResizeAction())));
+        this.switchDark$ = createEffect(() => this.actions$.pipe(ofType(AXPLayoutThemeDarkToggleAction, AXPLoadInitState), withLatestFrom(this.store$.select(isDarkTheme())), mergeMap(([action, dark]) => {
+            //TODO: replace with platform function;
+            const html = document.getElementsByTagName('html')[0];
+            dark ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+            return of();
+        })), { dispatch: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutEffects, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPAdminChildLayoutComponent {
+    constructor() {
+        this.manuLoader = inject(AXP_MENU_LOADER);
+        this.activeRoute = inject(ActivatedRoute);
+        this.title = "";
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.isOpen = this.store.select(getChildDrawer());
+        this.menuItems$ = of();
+        this.routeUtilService = inject(AXPRouteUtilityService);
+        this.isActiveRoute = (item) => this.routeUtilService.isRouteActive(item);
+        this.routeParamSub = this.activeRoute.params.subscribe(val => {
+            const menu = this.manuLoader.currentMenuItem();
+            if (menu?.parent) {
+                this.title = menu.parent.text;
+                this.menuItems$ = of(menu.parent.children ?? []);
+            }
+        });
+    }
+    handleMenuClick(e, item) {
+        if (item.command) {
+            this.store.dispatch(item.command);
+        }
+        else if (item.path) {
+            this.store.dispatch(AXPNavigateAction$1({ payload: { commands: item.path } }));
+        }
+    }
+    handleCollapsedChange(value) {
+        if (value)
+            this.store.dispatch(AXPLayoutChildDrawerClose());
+    }
+    ngOnDestroy() {
+        this.routeParamSub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminChildLayoutComponent, selector: "ng-component", ngImport: i0, template: "<!-- <ax-drawer-container>\n  <ax-drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\" ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{title}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        <ax-tab-item [text]=\"tab.text\" *ngFor=\"let tab of menuItems$ | async\" [active]=\"isActiveRoute(tab)\"\n          (onClick)=\"handleMenuClick($event,tab)\">\n        </ax-tab-item>\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer>\n  <ax-content>\n    <router-outlet></router-outlet>\n  </ax-content>\n</ax-drawer-container> -->\n<router-outlet></router-outlet>", dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<!-- <ax-drawer-container>\n  <ax-drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\" ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{title}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        <ax-tab-item [text]=\"tab.text\" *ngFor=\"let tab of menuItems$ | async\" [active]=\"isActiveRoute(tab)\"\n          (onClick)=\"handleMenuClick($event,tab)\">\n        </ax-tab-item>\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer>\n  <ax-content>\n    <router-outlet></router-outlet>\n  </ax-content>\n</ax-drawer-container> -->\n<router-outlet></router-outlet>" }]
+        }], ctorParameters: () => [] });
+
+class AXPAdminChildFeaturesListComponent {
+    constructor() {
+        this.manuLoader = inject(AXP_MENU_LOADER);
+        this.router = inject(Router);
+        this.activeRoute = inject(ActivatedRoute);
+        this.cdr = inject(ChangeDetectorRef);
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.isOpen = this.store.select(getChildDrawer());
+        this.menuItems$ = of();
+        this.title = "";
+        this.routeParamSub = this.activeRoute.params.subscribe(val => {
+            this.loadMenuItems();
+        });
+    }
+    loadMenuItems() {
+        const menu = this.manuLoader.currentMenuItem();
+        if (menu) {
+            this.title = menu.text;
+        }
+        this.menuItems$ = of(this.manuLoader.currentMenuItem()?.children ?? []);
+        this.firstMenuSub?.unsubscribe();
+        this.firstMenuSub = this.menuItems$
+            .pipe(withLatestFrom(this.isSM), filter(([_, isSM]) => !isSM), map(([menuItems, _]) => menuItems.find(c => c.path)), first())
+            .subscribe(c => {
+            if (c?.path) {
+                this.store.dispatch(AXPNavigateAction$1({ payload: { commands: c.path, extras: { replaceUrl: true } } }));
+            }
+        });
+    }
+    handleMenuClick(e, item) {
+        if (item.command) {
+            this.store.dispatch(item.command);
+        }
+        else if (item.path) {
+            this.store.dispatch(AXPNavigateAction$1({ payload: { commands: item.path } }));
+        }
+    }
+    ngOnDestroy() {
+        this.routeParamSub?.unsubscribe();
+        this.firstMenuSub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildFeaturesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminChildFeaturesListComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n        class=\"ax-flex md:ax-flex-col ax-gap-4 ax-justify-between ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <div class=\"ax-text-xl ax-font-bold\">{{title}}</div>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-flex-col ax-gap-2  ax-divide-y ax-divide-solid\">\n        <div *ngFor=\"let item of menuItems$ | async\"\n            class=\"ax-py-2 ax-font-semibold ax-flex ax-justify-between ax-cursor-pointer ax-items-center\"\n            (click)=\"handleMenuClick($event,item)\">\n            <span>{{item.text}}</span>\n            <i class=\"fa-solid fa-chevron-right ax-text-md ax-text-slate-400 \"></i>\n        </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildFeaturesListComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n        class=\"ax-flex md:ax-flex-col ax-gap-4 ax-justify-between ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <div class=\"ax-text-xl ax-font-bold\">{{title}}</div>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-flex-col ax-gap-2  ax-divide-y ax-divide-solid\">\n        <div *ngFor=\"let item of menuItems$ | async\"\n            class=\"ax-py-2 ax-font-semibold ax-flex ax-justify-between ax-cursor-pointer ax-items-center\"\n            (click)=\"handleMenuClick($event,item)\">\n            <span>{{item.text}}</span>\n            <i class=\"fa-solid fa-chevron-right ax-text-md ax-text-slate-400 \"></i>\n        </div>\n\n    </div>\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class AXPAdminChildLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, declarations: [AXPAdminChildLayoutComponent, AXPAdminChildFeaturesListComponent], imports: [CommonModule,
+            RouterModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDrawerModule,
+            AXDialogModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXButtonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, imports: [CommonModule,
+            RouterModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDrawerModule,
+            AXDialogModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXDrawerModule,
+                        AXDialogModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXButtonModule,
+                    ],
+                    exports: [],
+                    declarations: [AXPAdminChildLayoutComponent, AXPAdminChildFeaturesListComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXPAdminHeaderComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.router = inject(Router);
+        this.isOpen = this.store.select(getRootDrawer());
+    }
+    menuClick() {
+        this.store.dispatch(AXPLayoutRootDrawerToggle());
+    }
+    logoClick() {
+        this.router.navigate(['/']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminHeaderComponent, selector: "axp-dashboard-admin-header", host: { classAttribute: "ax-h-16 ax-flex ax-justify-between ax-px-4 md:ax-px-0 md:ax-pe-6 ax-py-4 ax-bg-surface ax-border-b" }, ngImport: i0, template: "<div class=\"ax-w-full ax-flex ax-justify-between\">\n  <div class=\"ax-flex ax-items-center md:ax-hidden\">\n    <i class=\"fa-solid fa-bars ax-text-lg ax-me-3\" (click)=\"menuClick()\"></i>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <div\n      class=\"ax-hidden md:ax-flex ax-items-center ax-justify-center ax-w-8 ax-h-8 ax-bg-on-surface ax-rounded ax-rounded-s-none ax-me-8 ax-cursor-pointer\"\n      (click)=\"menuClick()\">\n      <i class=\"fa-solid fa-chevrons-left ax-text-sm\" [ngClass]=\"{ 'ax-rotate-180': !(isOpen | async) }\"> </i>\n    </div>\n    <axp-component-slot name=\"header-start\"></axp-component-slot>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <axp-component-slot name=\"header-end\"></axp-component-slot>\n  </div>\n</div>", styles: [".profile-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));padding-left:.5rem;padding-right:.5rem}.profile-menus ul:last-child{border-width:0px}.profile-menus ul li{display:flex;cursor:pointer;border-radius:.375rem;padding:.5rem}.profile-menus ul li:last-child{margin-bottom:.5rem}.profile-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}:is(.ax-dark .profile-menus ul li:hover){--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.profile-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-dashboard-admin-header', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ax-h-16 ax-flex ax-justify-between ax-px-4 md:ax-px-0 md:ax-pe-6 ax-py-4 ax-bg-surface ax-border-b',
+                    }, template: "<div class=\"ax-w-full ax-flex ax-justify-between\">\n  <div class=\"ax-flex ax-items-center md:ax-hidden\">\n    <i class=\"fa-solid fa-bars ax-text-lg ax-me-3\" (click)=\"menuClick()\"></i>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <div\n      class=\"ax-hidden md:ax-flex ax-items-center ax-justify-center ax-w-8 ax-h-8 ax-bg-on-surface ax-rounded ax-rounded-s-none ax-me-8 ax-cursor-pointer\"\n      (click)=\"menuClick()\">\n      <i class=\"fa-solid fa-chevrons-left ax-text-sm\" [ngClass]=\"{ 'ax-rotate-180': !(isOpen | async) }\"> </i>\n    </div>\n    <axp-component-slot name=\"header-start\"></axp-component-slot>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <axp-component-slot name=\"header-end\"></axp-component-slot>\n  </div>\n</div>", styles: [".profile-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));padding-left:.5rem;padding-right:.5rem}.profile-menus ul:last-child{border-width:0px}.profile-menus ul li{display:flex;cursor:pointer;border-radius:.375rem;padding:.5rem}.profile-menus ul li:last-child{margin-bottom:.5rem}.profile-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}:is(.ax-dark .profile-menus ul li:hover){--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.profile-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}\n"] }]
+        }] });
+
+class AXPContentViewComponent {
+    constructor() {
+        this.hasSidebar = true;
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.isOpen = true;
+        this.activeFragment = signal('');
+        this.windowWidth = signal(window.innerWidth);
+        this.isSM = computed(() => (this.windowWidth() < 768 ? true : false));
+    }
+    onResize() {
+        this.windowWidth.set(window.innerWidth);
+    }
+    ngOnInit() {
+        this.fragmentSubscription = this.route.fragment.subscribe((fragment) => {
+            if (fragment) {
+                const element = document.getElementById(fragment);
+                if (element)
+                    element.scrollIntoView({ behavior: 'smooth' });
+                this.activeFragment.set(fragment);
+            }
+        });
+    }
+    toggleCollapse(collapsed) {
+        this.isOpen = !collapsed;
+    }
+    itemClick(fragment) {
+        if (fragment) {
+            this.router.navigate([], {
+                relativeTo: this.route,
+                fragment: fragment,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.fragmentSubscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPContentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPContentViewComponent, isStandalone: true, selector: "axp-content-view", inputs: { dataSource: "dataSource", hasSidebar: ["hasSideBar", "hasSidebar"] }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"ax-relative ax-grid\" [class.ax-grid-cols-12]=\"hasSidebar\">\n  @if(hasSidebar){\n  <div class=\"ax-hidden ax-fixed lg:ax-block ax-w-72 ax-right-0\">\n    <ax-nav class=\"ax-h-[calc(100vh-120px)] ax-px-2 ax-py-4\">\n      @for (section of dataSource.sections; track $index) {\n      <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: section }\"> </ng-container>\n      }\n      <ng-template #navTemplate let-item>\n        <ax-nav-item [active]=\"activeFragment()==item.fragment\" (onClick)=\"itemClick(item.fragment)\">\n          <span>{{item.title}}</span>\n          <ax-prefix>\n            <ax-icon [class]=\"item.icon\"></ax-icon>\n          </ax-prefix>\n          @if(item.children){\n          <ng-container>\n            @for (child of item.children; track $index) {\n            <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n            </ng-container>\n            }\n          </ng-container>\n          }\n        </ax-nav-item>\n      </ng-template>\n    </ax-nav>\n  </div>\n  }\n  <div\n    class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-9 2xl:ax-col-end-11 ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-6 ax-py-4 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n  >\n    <span class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{dataSource.title}}</span>\n    @if(dataSource.subTitle){\n    <span>{{dataSource.subTitle}}</span>\n    } @for (section of dataSource.sections; track $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: section }\"\n    ></ng-container>\n    }\n    <ng-template #contentTemplate let-section>\n      @if(section.title){\n      <h1 [id]=\"section.fragment\" class=\"ax-font-bold ax-text-lg\">{{section.title}}</h1>\n      } @if(section.children){ @for (subSection of section.children; track $index) {\n      <ng-container\n        [ngTemplateOutlet]=\"contentTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: subSection }\"\n      ></ng-container>\n      } }@else { @for (item of section.content; track $index){ @if(item.type===\"paragraph\"){\n\n      <p>{{item.text}}</p>\n      }@else {\n      <ul class=\"ax-list-disc ax-ps-10\">\n        @for (option of item.text; track $index) {\n        <li>{{option}}</li>\n        }\n      </ul>\n      } } }\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXCollapseModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXNavModule }, { kind: "component", type: i3$1.AXNavComponent, selector: "ax-nav" }, { kind: "component", type: i3$1.AXNavItemComponent, selector: "ax-nav-item", inputs: ["disabled", "color", "active"], outputs: ["onClick", "activeChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPContentViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-content-view', standalone: true, imports: [AXCollapseModule, AXDecoratorModule, CommonModule, AXNavModule], template: "<div class=\"ax-relative ax-grid\" [class.ax-grid-cols-12]=\"hasSidebar\">\n  @if(hasSidebar){\n  <div class=\"ax-hidden ax-fixed lg:ax-block ax-w-72 ax-right-0\">\n    <ax-nav class=\"ax-h-[calc(100vh-120px)] ax-px-2 ax-py-4\">\n      @for (section of dataSource.sections; track $index) {\n      <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: section }\"> </ng-container>\n      }\n      <ng-template #navTemplate let-item>\n        <ax-nav-item [active]=\"activeFragment()==item.fragment\" (onClick)=\"itemClick(item.fragment)\">\n          <span>{{item.title}}</span>\n          <ax-prefix>\n            <ax-icon [class]=\"item.icon\"></ax-icon>\n          </ax-prefix>\n          @if(item.children){\n          <ng-container>\n            @for (child of item.children; track $index) {\n            <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n            </ng-container>\n            }\n          </ng-container>\n          }\n        </ax-nav-item>\n      </ng-template>\n    </ax-nav>\n  </div>\n  }\n  <div\n    class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-9 2xl:ax-col-end-11 ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-6 ax-py-4 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n  >\n    <span class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{dataSource.title}}</span>\n    @if(dataSource.subTitle){\n    <span>{{dataSource.subTitle}}</span>\n    } @for (section of dataSource.sections; track $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: section }\"\n    ></ng-container>\n    }\n    <ng-template #contentTemplate let-section>\n      @if(section.title){\n      <h1 [id]=\"section.fragment\" class=\"ax-font-bold ax-text-lg\">{{section.title}}</h1>\n      } @if(section.children){ @for (subSection of section.children; track $index) {\n      <ng-container\n        [ngTemplateOutlet]=\"contentTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: subSection }\"\n      ></ng-container>\n      } }@else { @for (item of section.content; track $index){ @if(item.type===\"paragraph\"){\n\n      <p>{{item.text}}</p>\n      }@else {\n      <ul class=\"ax-list-disc ax-ps-10\">\n        @for (option of item.text; track $index) {\n        <li>{{option}}</li>\n        }\n      </ul>\n      } } }\n    </ng-template>\n  </div>\n</div>\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input,
+                args: ['dataSource']
+            }], hasSidebar: [{
+                type: Input,
+                args: ['hasSideBar']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class AXPError401Component {
+    constructor() {
+        this.sessionService = inject(AXPSessionService);
+        this.router = inject(Router);
+        this.isAuthorized$ = this.sessionService.isAuthorized$;
+    }
+    ngOnInit() { }
+    handleHomeClick() {
+        this.router.navigate([`/${this.sessionService.application?.name}/home`]);
+    }
+    handleSignInClick() {
+        this.router.navigate([`/auth/login`]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError401Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPError401Component, isStandalone: true, selector: "axp-error-401", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-401.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Hold on a second!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, but you are not authorized to view this page.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        @if((isAuthorized$ | async))\n        {\n        <ax-button (onClick)=\"handleHomeClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        } @else {\n        <ax-button (onClick)=\"handleSignInClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Sign Up / Sign In\"></ax-button>\n        }\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError401Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-error-401', imports: [AXButtonModule, CommonModule], standalone: true, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-401.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Hold on a second!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, but you are not authorized to view this page.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        @if((isAuthorized$ | async))\n        {\n        <ax-button (onClick)=\"handleHomeClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        } @else {\n        <ax-button (onClick)=\"handleSignInClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Sign Up / Sign In\"></ax-button>\n        }\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [] });
+
+var error401_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPError401Component: AXPError401Component
+});
+
+class AXPError404Component {
+    constructor() {
+        this.sessionService = inject(AXPSessionService);
+        this.router = inject(Router);
+    }
+    goHome() {
+        this.router.navigate([`/${this.sessionService.application?.name}/home`]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError404Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPError404Component, isStandalone: true, selector: "axp-error-404", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/3\" src=\" /assets/images/error/error-404.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">No Result Found.</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Whoops! Looks like that page doesn't exist.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError404Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-error-404', imports: [AXButtonModule], standalone: true, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/3\" src=\" /assets/images/error/error-404.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">No Result Found.</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Whoops! Looks like that page doesn't exist.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>" }]
+        }] });
+
+var error404_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPError404Component: AXPError404Component
+});
+
+class AXPErrorOfflineComponent {
+    constructor() { }
+    ngOnInit() { }
+    goHome() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPErrorOfflineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPErrorOfflineComponent, isStandalone: true, selector: "axp-error-offline", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-offline.png\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Please check your connectivity!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, it seems you don't have access to the internet.</p>\n\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPErrorOfflineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-error-offline', imports: [AXButtonModule], standalone: true, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-offline.png\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Please check your connectivity!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, it seems you don't have access to the internet.</p>\n\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [] });
+
+var errorOffline_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPErrorOfflineComponent: AXPErrorOfflineComponent
+});
+
+class AXPLogoComponent {
+    ngOnInit() {
+        switch (true) {
+            case this.source instanceof AXPTextLogoConfig:
+                this.logoType = 'text';
+                break;
+            case this.source instanceof AXPImageUrlLogoConfig:
+                this.logoType = 'url';
+                break;
+            case this.source instanceof AXPFontIconLogoConfig:
+                this.logoType = 'iconClass';
+                break;
+            case this.source instanceof AXPComponentLogoConfig:
+                this.logoType = 'component';
+                break;
+            default:
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { styleAttribute: "display:block" }, ngImport: i0, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold ax-text-lg ax-select-none\">{{ source.text }}</span>\n}\n@case ('url') {\n<ax-image [src]=\"source.url\"></ax-image>\n} @case ('iconClass') {\n<ax-icon class=\"{{ source.classIcon }}\"></ax-icon>\n} @case ('component') {\n<ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n}\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-logo', standalone: true, imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { 'style': 'display:block' }, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold ax-text-lg ax-select-none\">{{ source.text }}</span>\n}\n@case ('url') {\n<ax-image [src]=\"source.url\"></ax-image>\n} @case ('iconClass') {\n<ax-icon class=\"{{ source.classIcon }}\"></ax-icon>\n} @case ('component') {\n<ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n}\n}" }]
+        }], propDecorators: { source: [{
+                type: Input
+            }] } });
+
+class AXPFooterTextSlotComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPFooterTextSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPFooterTextSlotComponent, isStandalone: true, selector: "ng-component", inputs: { text: "text" }, ngImport: i0, template: `
+      <small class="ax-text-sm  ax-text-neutral-400" [innerHTML]="text"></small>
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPFooterTextSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+      <small class="ax-text-sm  ax-text-neutral-400" [innerHTML]="text"></small>
+    `,
+                    standalone: true
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class AXPNavBarSlotComponent {
+    constructor() {
+        this.store = inject(Store);
+    }
+    handleCommand(action) {
+        if (action)
+            this.store.dispatch(action);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavBarSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPNavBarSlotComponent, isStandalone: true, selector: "ng-component", inputs: { items: "items" }, ngImport: i0, template: `
+    <div class="ax-flex ax-items-center ax-justify-between ax-gap-5">
+        <a *ngFor="let link of items" (click)="handleCommand(link.command)" >{{ link.text }}</a>
+    </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavBarSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-flex ax-items-center ax-justify-between ax-gap-5">
+        <a *ngFor="let link of items" (click)="handleCommand(link.command)" >{{ link.text }}</a>
+    </div>
+    `,
+                    standalone: true,
+                    imports: [CommonModule],
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+const AXPEntityListViewConfigEmpty = {
+    fixed: false,
+    columns: [],
+    conditions: [],
+    sorts: [],
+    name: 'empty',
+    title: 'Empty',
+};
+function convertPropertyToColumn(property) {
+    return {
+        //TODO: merge format function
+        schema: property.schema,
+        name: property.name,
+        title: property.title,
+        visible: true,
+        displayFormat: property.formats?.list ?? property.formats?.default,
+        sortOptions: {
+            enabled: property.canSort,
+            property: property.name,
+        },
+        filterOptions: {
+            enabled: property.canFilter,
+            property: property.name,
+        },
+        options: merge(cloneDeep(property.component?.common?.options), property.component?.column?.options),
+    };
+}
+function convertPropertiesToColumns(...propertis) {
+    return propertis.map((p) => convertPropertyToColumn(p));
+}
+
+class AXEntityLoaderDefault {
+    async get(moduleName, entityName) {
+        return null;
+    }
+}
+const AXP_ENTITY_LOADER = new InjectionToken('AXP_ENTITY_LOADER', {
+    providedIn: 'root',
+    factory: () => {
+        return new AXEntityLoaderDefault();
+    },
+});
+
+class AXPEntityRegistryService {
+    constructor() {
+        // Stores AXPEntityConfig objects, keyed by a combination of module and entity name.
+        this.entities = new Map();
+        // Entity loader service for dynamically loading entity configurations.
+        this.loader = inject(AXP_ENTITY_LOADER); // Assuming AXPEntityLoader is the correct type
+    }
+    /**
+     * Registers a new entity configuration. Entities are identified uniquely by a combination
+     * of their module and name.
+     *
+     * @param config The configuration object of the entity to be registered.
+     */
+    register(config) {
+        const key = this.createEntityKey(config.module, config.name);
+        this.entities.set(key, config);
+    }
+    /**
+     * Resolves an entity configuration based on module and entity name. If the configuration
+     * is not already registered, attempts to load it dynamically. Throws an error if the
+     * entity cannot be found or loaded.
+     *
+     * @param moduleName The module name of the entity.
+     * @param entityName The name of the entity.
+     * @returns A promise resolving to the entity configuration.
+     * @throws Error if the entity configuration cannot be resolved.
+     */
+    async resolve(moduleName, entityName) {
+        const key = this.createEntityKey(moduleName, entityName);
+        let config = this.entities.get(key) ?? null;
+        if (!config) {
+            try {
+                config = await this.loader.get(moduleName, entityName);
+                if (config) {
+                    this.register(config);
+                }
+            }
+            catch (error) {
+                console.error(`Error loading entity '${key}':`, error);
+                throw error; // Rethrow to allow error handling by caller
+            }
+            if (!config) {
+                throw new Error(`Invalid Entity name: ${key}`);
+            }
+        }
+        return config;
+    }
+    /**
+     * Creates a unique key for an entity based on its module and name.
+     *
+     * @param moduleName The module name of the entity.
+     * @param entityName The name of the entity.
+     * @returns The unique key for the entity.
+     */
+    createEntityKey(moduleName, entityName) {
+        return `${moduleName}.${entityName}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPLayoutService {
+    constructor() {
+        this.minimumDisplayTime = 500; // milliseconds
+        // 
+        this.navigationLoadingSubject = new BehaviorSubject(false);
+        this.navigationLoadingTaskCount = 0;
+        this.navigationLoadingStateActive = false;
+        // 
+        this.overlayLoadingSubject = new BehaviorSubject(false);
+        this.overlayLoadingTaskCount = 0;
+        this.overlayLoadingStateActive = false;
+    }
+    get navigationLoading$() {
+        return this.navigationLoadingSubject.asObservable();
+    }
+    setNavigationLoading(value) {
+        if (value) {
+            this.navigationLoadingTaskCount++;
+            this.updateNavigationLoadingState(true);
+        }
+        else {
+            if (this.navigationLoadingTaskCount > 0) {
+                this.navigationLoadingTaskCount--;
+            }
+            if (this.navigationLoadingTaskCount === 0) {
+                // Start timer to keep loading state for minimum display time
+                timer(this.minimumDisplayTime).subscribe(() => {
+                    if (this.navigationLoadingTaskCount === 0) {
+                        this.updateNavigationLoadingState(false);
+                    }
+                });
+            }
+        }
+    }
+    updateNavigationLoadingState(state) {
+        if (state !== this.navigationLoadingStateActive) {
+            this.navigationLoadingStateActive = state;
+            this.navigationLoadingSubject.next(state);
+        }
+    }
+    get overlayLoading$() {
+        return this.overlayLoadingSubject.asObservable();
+    }
+    setOverlayLoading(value) {
+        if (value) {
+            this.overlayLoadingTaskCount++;
+            this.updateOverlayLoadingState(true);
+        }
+        else {
+            if (this.overlayLoadingTaskCount > 0) {
+                this.overlayLoadingTaskCount--;
+            }
+            if (this.overlayLoadingTaskCount === 0) {
+                // Start timer to keep loading state for minimum display time
+                timer(this.minimumDisplayTime).subscribe(() => {
+                    if (this.overlayLoadingTaskCount === 0) {
+                        this.updateOverlayLoadingState(false);
+                    }
+                });
+            }
+        }
+    }
+    updateOverlayLoadingState(state) {
+        if (state !== this.overlayLoadingStateActive) {
+            this.overlayLoadingStateActive = state;
+            this.overlayLoadingSubject.next(state);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//TODO Loading, Redirect, Drawer, Show toast
+const AXPRedirectEvent = createWorkFlowEvent('Redirect Event Fired');
+class AXPNavigateAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        if (Array.isArray(payload.commands))
+            this.router.navigate(payload.commands, payload.extras);
+        else {
+            if (payload.commands.toLowerCase().startsWith('http'))
+                window.open(payload.commands, '_blank');
+            else
+                this.router.navigate([payload.commands], payload.extras);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavigateAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavigateAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavigateAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPDialogConfirmAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.dialogService = inject(AXDialogService);
+    }
+    async execute(context) {
+        context.setOutput('deleteConfirmed', false);
+        const dialogResult = await this.dialogService.confirm(this.title, this.message, this.type);
+        context.setOutput('deleteConfirmed', dialogResult.result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPToastAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.toastService = inject(AXToastService);
+    }
+    async execute(context) {
+        this.toastService.show({
+            color: this.color,
+            title: this.title,
+            content: this.content,
+            closeButton: true,
+            timeOut: 3000,
+            timeOutProgress: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPToastAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPToastAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPToastAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPShowDetailViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPNavigateAction);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const id = context.getVariable('id');
+        const newPayload = {
+            commands: `/${this.sessionService.application?.name}/${payload.entity.module}/e/${payload.entity}/${id}/view`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPShowListViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPNavigateAction);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const newPayload = {
+            commands: `/${this.sessionService.application?.name}/${payload.entity.module}/e/${payload.entity}/list`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+            type: Injectable
+        }] });
+
+class AXMWorkflowErrorHandler {
+    constructor() {
+        this.dialog = inject(AXDialogService);
+    }
+    handleError(error, next) {
+        if (error instanceof AXPWorkflowError) {
+            this.dialog.alert("Somthing is wrong!", error.inner ? error.inner.message : error.message, 'danger');
+            next(error);
+        }
+        else {
+            next(error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPAdminFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminFooterComponent, selector: "axp-dashboard-admin-footer", host: { classAttribute: "ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-surface ax-px-6 ax-border-t" }, providers: [], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-justify-start ax-gap-1\">\n  <axp-component-slot name=\"footer-start\"></axp-component-slot>\n</div>\n<div class=\"ax-flex ax-items-center ax-justify-end ax-gap-1\">\n  <axp-component-slot name=\"footer-end\"></axp-component-slot>\n</div>", dependencies: [{ kind: "directive", type: i2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-dashboard-admin-footer', encapsulation: ViewEncapsulation.None, providers: [], host: {
+                        class: 'ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-surface ax-px-6 ax-border-t',
+                    }, template: "<div class=\"ax-flex ax-items-center ax-justify-start ax-gap-1\">\n  <axp-component-slot name=\"footer-start\"></axp-component-slot>\n</div>\n<div class=\"ax-flex ax-items-center ax-justify-end ax-gap-1\">\n  <axp-component-slot name=\"footer-end\"></axp-component-slot>\n</div>" }]
+        }] });
+
+class AXPAdminLayoutComponent {
+    constructor() {
+        this.manuLoader = inject(AXP_MENU_LOADER);
+        this.config = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.layoutService = inject(AXPLayoutService);
+        this.subscriber = inject(AXUnsubscriber);
+        this.store = inject((Store));
+        this.routeUtilService = inject(AXPRouteUtilityService);
+        this.isActiveRoute = (item) => this.routeUtilService.isRouteActive(item);
+        this.logo = this.config.logo;
+        this.isOpen = this.store.select(getRootDrawer());
+        this.isSM = this.store.select(isSmallScreen());
+        this.isLoading = signal(false);
+        this.showNavigationProgress = signal(false);
+        this.menuItems$ = this.manuLoader.getItems(1);
+        this.layoutService.navigationLoading$.pipe(this.subscriber.takeUntilDestroy).subscribe((value) => {
+            this.showNavigationProgress.set(value);
+        });
+        //
+        this.layoutService.overlayLoading$.pipe(this.subscriber.takeUntilDestroy).subscribe((value) => {
+            this.isLoading.set(value);
+        });
+    }
+    handleMenuClick(e, item) {
+        if (item.path && item.children?.length)
+            return;
+        if (item.command) {
+            this.store.dispatch(item.command);
+        }
+        else if (item.path) {
+            this.store.dispatch(AXPNavigateAction$1({ payload: { commands: item.path } }));
+        }
+    }
+    handleCollapsedChange(value) {
+        if (value)
+            this.store.dispatch(AXPLayoutRootDrawerClose());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPAdminLayoutComponent, selector: "ng-component", providers: [
+            {
+                provide: AXUnsubscriber,
+            },
+        ], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\"(isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content\n      class=\"ax-w-64 ax-h-full ax-flex ax-flex-col ax-bg-secondary-600 dark:ax-bg-surface ax-text-primary-fore ax-border-e ax-border-primary-700 dark:ax-border-default\">\n      <header class=\"ax-px-7 ax-h-16 ax-flex ax-items-center ax-border-b ax-border-white/10\">\n        <axp-logo [source]=\"logo?.light\"></axp-logo>\n      </header>\n      <div class=\"ax-px-2 ax-py-4 ax-overflow-y-auto ax-flex-1 ax-h-full\">\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of this.menuItems$ | async\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          @if(item.type=='group') {\n          <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text }}</ax-title>\n          } @else {\n          <ax-side-menu-item *permission=\"item.data?.requiredPermission\" (onClick)=\"handleMenuClick($event, item)\"\n            [active]=\"isActiveRoute(item) && !item.children?.length\" [isCollapsed]=\"item.opened == true ? false : true\">\n            <ax-prefix>\n              <ax-icon [class]=\"item.icon\"></ax-icon>\n            </ax-prefix>\n            {{ item.text }}\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n          }\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer>\n  <ax-content class=\"ax-flex ax-flex-col ax-relative\">\n    @if(showNavigationProgress())\n    {\n    <div class=\"axp-navigating-progress\">\n      <div></div>\n    </div>\n    }\n    <axp-dashboard-admin-header></axp-dashboard-admin-header>\n    <div class=\"ax-flex-1 ax-overflow-auto ax-relative\" [axIsLoading]=\"isLoading()\">\n      <router-outlet></router-outlet>\n    </div>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n  </ax-content>\n</ax-drawer-container>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i5.AXSideMenuComponent, selector: "ax-side-menu" }, { kind: "component", type: i5.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "color", "text", "isCollapsed", "active"], outputs: ["textChange", "isCollapsedChange", "activeChange", "onClick"] }, { kind: "directive", type: i4$2.AXLoadingDirective, selector: "[axIsLoading]", inputs: ["axIsLoading"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "directive", type: i8.AXPPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "component", type: AXPAdminFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPAdminHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ], template: "<ax-drawer-container>\n  <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\"(isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content\n      class=\"ax-w-64 ax-h-full ax-flex ax-flex-col ax-bg-secondary-600 dark:ax-bg-surface ax-text-primary-fore ax-border-e ax-border-primary-700 dark:ax-border-default\">\n      <header class=\"ax-px-7 ax-h-16 ax-flex ax-items-center ax-border-b ax-border-white/10\">\n        <axp-logo [source]=\"logo?.light\"></axp-logo>\n      </header>\n      <div class=\"ax-px-2 ax-py-4 ax-overflow-y-auto ax-flex-1 ax-h-full\">\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of this.menuItems$ | async\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          @if(item.type=='group') {\n          <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text }}</ax-title>\n          } @else {\n          <ax-side-menu-item *permission=\"item.data?.requiredPermission\" (onClick)=\"handleMenuClick($event, item)\"\n            [active]=\"isActiveRoute(item) && !item.children?.length\" [isCollapsed]=\"item.opened == true ? false : true\">\n            <ax-prefix>\n              <ax-icon [class]=\"item.icon\"></ax-icon>\n            </ax-prefix>\n            {{ item.text }}\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n          }\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer>\n  <ax-content class=\"ax-flex ax-flex-col ax-relative\">\n    @if(showNavigationProgress())\n    {\n    <div class=\"axp-navigating-progress\">\n      <div></div>\n    </div>\n    }\n    <axp-dashboard-admin-header></axp-dashboard-admin-header>\n    <div class=\"ax-flex-1 ax-overflow-auto ax-relative\" [axIsLoading]=\"isLoading()\">\n      <router-outlet></router-outlet>\n    </div>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n  </ax-content>\n</ax-drawer-container>" }]
+        }], ctorParameters: () => [], propDecorators: { drawer: [{
+                type: ViewChild,
+                args: ['drawer']
+            }] } });
+
+class AXPAdminRootLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, declarations: [AXPAdminFooterComponent,
+            AXPAdminHeaderComponent,
+            AXPAdminLayoutComponent], imports: [CommonModule,
+            RouterModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXDropdownModule,
+            AXAvatarModule,
+            AXImageModule,
+            AXImageModule,
+            AXPopoverModule,
+            AXBadgeModule,
+            AXTabsModule,
+            AXDrawerModule,
+            AXSideMenuModule,
+            AXLoadingModule,
+            AXPLogoComponent,
+            AXPAuthModule,
+            AXPComponentSlotModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, imports: [CommonModule,
+            RouterModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXDropdownModule,
+            AXAvatarModule,
+            AXImageModule,
+            AXImageModule,
+            AXPopoverModule,
+            AXBadgeModule,
+            AXTabsModule,
+            AXDrawerModule,
+            AXSideMenuModule,
+            AXLoadingModule,
+            AXPLogoComponent,
+            AXPAuthModule,
+            AXPComponentSlotModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXImageModule,
+                        AXPopoverModule,
+                        AXBadgeModule,
+                        AXTabsModule,
+                        AXDrawerModule,
+                        AXSideMenuModule,
+                        AXLoadingModule,
+                        AXPLogoComponent,
+                        AXPAuthModule,
+                        AXPComponentSlotModule
+                    ],
+                    exports: [],
+                    declarations: [
+                        AXPAdminFooterComponent,
+                        AXPAdminHeaderComponent,
+                        AXPAdminLayoutComponent,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.schemaRegistry = inject(AXPSchemaRegistryService);
+        this.toastService = inject(AXToastService);
+        this.dialogService = inject(AXDialogService);
+        this.subscriber = inject(AXUnsubscriber);
+        this.mode = 'create';
+        this.selectedView = {};
+        this.showNameInput = signal(false);
+        this.props = signal([]);
+        this.columns = signal([]);
+        this.visibleColumns = computed(() => this.columns().filter((c) => c.visible));
+        this.conditions = signal([]);
+        this.sorts = signal([]);
+        this.selectedConditionNames = [];
+        this.viewNames = [];
+    }
+    ngOnInit() {
+        this.props.set(cloneDeep(this.loader.entity.properties));
+        this.columns.set(cloneDeep(this.selectedView.columns));
+        this.conditions.set(cloneDeep(this.selectedView.conditions));
+        this.sorts.set(cloneDeep(this.selectedView.sorts));
+        this.loader.views$.pipe(this.subscriber.takeUntilDestroy).subscribe((views) => {
+            this.viewNames = views.map((v) => v.name);
+        });
+    }
+    //****************** Columns ******************//
+    updateColumnItem(event, colName) {
+        if (event.isUserInteraction) {
+            this.columns.update((prevCols) => prevCols.map((col) => (col.name === colName ? { ...col, visible: event.value } : col)));
+        }
+    }
+    //****************** Sorts ******************//
+    updateSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.map((sort) => (sort.name === item.name ? { ...sort, dir: sort.dir == 'asc' ? 'desc' : 'asc' } : sort)));
+    }
+    addSortItem() {
+        const sortNames = this.sorts().map((p) => p.name);
+        console.log(this.props(), sortNames);
+        const name = this.props().find((c) => !sortNames.includes(c.name))?.name || this.props()[0].name;
+        this.sorts.update((prevSorts) => [...prevSorts, { name, dir: 'asc' }]);
+    }
+    removeSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.filter((sort) => item.name != sort.name));
+    }
+    //****************** Conditions ******************//
+    getSchema(name) {
+        return this.props().find((c) => c.name == name)?.schema ?? '';
+    }
+    getOperators(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.operators ?? [];
+    }
+    getDefaultOperator(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
+    }
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
+    }
+    resetSelectedFieldNames() {
+        this.selectedConditionNames = this.conditions().map((c) => c.name);
+    }
+    addCondition() {
+        const conditions = this.selectedConditionNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                operator: opr.name,
+            };
+        });
+        this.conditions.set(conditions);
+    }
+    removeCondition(item) {
+        this.conditions.update((prevConditions) => prevConditions.filter((con) => con.name != item.name));
+    }
+    //****************** Common ******************//
+    drop(type, event) {
+        switch (type) {
+            case 'columns':
+                this.columns.update((prevCols) => {
+                    const columns = prevCols;
+                    moveItemInArray(columns, event.previousIndex, event.currentIndex);
+                    return columns;
+                });
+                break;
+            case 'sorts':
+                this.sorts.update((prevSorts) => {
+                    const sorts = prevSorts;
+                    moveItemInArray(sorts, event.previousIndex, event.currentIndex);
+                    return sorts;
+                });
+                break;
+            case 'conditions':
+                this.conditions.update((prevConditions) => {
+                    const conditions = prevConditions;
+                    moveItemInArray(conditions, event.previousIndex, event.currentIndex);
+                    return conditions;
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    changeViewNameToggle() {
+        this.showNameInput.update((prev) => !prev);
+    }
+    generateViewName(title) {
+        return title.replace(/\s+/g, '-').toLowerCase();
+    }
+    handleApplyClick() {
+        const updatedView = {
+            ...this.selectedView,
+            name: this.generateViewName(this.selectedView.title),
+            conditions: this.conditions(),
+            columns: this.columns(),
+            sorts: this.sorts(),
+        };
+        if (this.viewNames.includes(updatedView.name) && this.mode == 'create') {
+            this.toastService.show({
+                title: 'Invalid Title',
+                content: 'The title you have chosen already exists. Please choose a different title for your custom view.',
+                color: 'danger',
+                location: 'bottom-center',
+                closeButton: true,
+                timeOut: 3000,
+            });
+        }
+        else {
+            this.close({ save: true, updatedView });
+        }
+    }
+    handleResetClick() {
+        this.conditions.set(cloneDeep(this.selectedView.conditions));
+        this.columns.set(cloneDeep(this.selectedView.columns));
+        this.sorts.set(cloneDeep(this.selectedView.sorts));
+    }
+    handleDiscardClick() {
+        this.close({ save: false });
+    }
+    handleCancelClick() {
+        this.close({ save: false });
+    }
+    handleDeleteClick() {
+        this.dialogService
+            .confirm('Warning', 'Are you sure want to delete this view?', 'danger', 'horizontal')
+            .then((data) => {
+            if (data.result) {
+                this.close({ delete: true, viewName: this.selectedView.name });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityCreateCustomViewComponent, selector: "ng-component", inputs: { loader: "loader", mode: "mode", selectedView: "selectedView" }, providers: [
+            {
+                provide: AXUnsubscriber,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item text=\"Columns\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop('columns', $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch\n                  class=\"ax-sm\"\n                  [(ngModel)]=\"item.visible\"\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\n                ></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to filter</span\n            >\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge\n                    class=\"ax-text-xs\"\n                    color=\"primary\"\n                    [look]=\"'twotone'\"\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\n                  ></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n                >\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\n                      class=\"ax-sm\"\n                      text=\"Confirm\"\n                      color=\"primary\"\n                    >\n                    </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to sort</span\n            >\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\n                </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n                  ></ax-icon>\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n                  ></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                text=\"Add field\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  text=\"Add field\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\n    color=\"primary\"\n    (onClick)=\"handleApplyClick()\"\n  ></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8$1.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "component", type: i4$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i4$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1$3.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item text=\"Columns\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop('columns', $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch\n                  class=\"ax-sm\"\n                  [(ngModel)]=\"item.visible\"\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\n                ></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to filter</span\n            >\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge\n                    class=\"ax-text-xs\"\n                    color=\"primary\"\n                    [look]=\"'twotone'\"\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\n                  ></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n                >\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\n                      class=\"ax-sm\"\n                      text=\"Confirm\"\n                      color=\"primary\"\n                    >\n                    </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to sort</span\n            >\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\n                </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n                  ></ax-icon>\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n                  ></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                text=\"Add field\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  text=\"Add field\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\n    color=\"primary\"\n    (onClick)=\"handleApplyClick()\"\n  ></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { loader: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], selectedView: [{
+                type: Input
+            }] } });
+
+class AXPListViewOptionsColumnsComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.columns$ = of([]);
+        this.onClosed = new EventEmitter();
+    }
+    ngOnInit() {
+        this.columns$ = this.loader.displayColumns$;
+    }
+    handleVisibilityChange(e, name) {
+        if (e.isUserInteraction) {
+            this.loader.setColumnVisibility(name, e.value);
+        }
+    }
+    drop(event) {
+        this.columns$.pipe(first()).subscribe((columns) => {
+            moveItemInArray(columns, event.previousIndex, event.currentIndex);
+        });
+    }
+    handleClose() {
+        this.onClosed.emit();
+    }
+    handleResetClick() {
+        this.loader.resetColumns();
+    }
+    handleApplyClick() {
+        this.columns$.pipe(first()).subscribe((data) => {
+            this.loader.updateColumns(data);
+        });
+        this.onClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    <ng-container *ngFor=\"let item of columns$ | async\">\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i8$1.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-list-view-option-columns', template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    <ng-container *ngFor=\"let item of columns$ | async\">\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { loader: [{
+                type: Input
+            }], onClosed: [{
+                type: Output
+            }] } });
+
+class AXPListViewOptionConditionsComponent {
+    constructor() {
+        this.onClosed = new EventEmitter();
+        this.schemaRegistery = inject(AXPSchemaRegistryService);
+        this.popopService = inject(AXPopupService);
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.props$ = of([]);
+        this.props = [];
+        this.conditions$ = of([]);
+        this.selectedFieldNames = [];
+    }
+    onNameChange(item) {
+        console.log('onName changed!', item);
+    }
+    ngOnInit() {
+        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canFilter != false)));
+        this.conditions$ = this.loader.conditions$;
+        this.conditions$.pipe(first()).subscribe((initialConditions) => {
+            this.selectedFieldNames = initialConditions.map((i) => i.name);
+        });
+        this.props$.pipe(first()).subscribe((data) => {
+            this.props = data;
+        });
+    }
+    getOperators(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.operators ?? [];
+    }
+    getDefaultOperator(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
+    }
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
+    }
+    getSchema(name) {
+        return this.props.find((c) => c.name == name)?.schema ?? '';
+    }
+    drop(event) {
+        this.conditions$.pipe(first()).subscribe((conditions) => {
+            console.log('conditions: ', conditions);
+            moveItemInArray(conditions, event.previousIndex, event.currentIndex);
+        });
+    }
+    handleClose() {
+        this.onClosed.emit();
+    }
+    handleRemoveCondition(item) {
+        this.selectedFieldNames = this.selectedFieldNames.filter((i) => i !== item.name);
+        this.loader.removeCondition(item);
+    }
+    resetSelectedFieldNames() {
+        this.conditions$.pipe(first()).subscribe((initialConditions) => {
+            this.selectedFieldNames = initialConditions.map((i) => i.name);
+        });
+    }
+    handleResetClick() {
+        this.loader.resetConditions();
+    }
+    onConfirmFields() {
+        const fileds = this.selectedFieldNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                opr: opr.name,
+            };
+        });
+        this.loader.addCondition(fileds);
+    }
+    handleApplyClick() {
+        this.conditions$.pipe(first()).subscribe((data) => {
+            console.log(data);
+            this.loader.updateConditions(data);
+        });
+        this.onClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i4$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1$3.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-list-view-option-conditions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
+
+class AXPListViewOptionFilterOperatorComponent {
+    constructor() {
+        this.visible = false;
+        this.cdr = inject(ChangeDetectorRef);
+        this._items = [];
+        this.valueChange = new EventEmitter();
+    }
+    get items() {
+        return this._items;
+    }
+    set items(v) {
+        this.visible = false;
+        this._items = v;
+        setTimeout(() => {
+            this.visible = true;
+            this.cdr.markForCheck();
+            setTimeout(() => {
+                if (this.selectBox) {
+                    this.selectBox.defaultValue = this.items[0]?.name;
+                }
+            });
+        });
+    }
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        this._value = v;
+        this.valueChange.emit(v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-list-view-option-filter-operator',
+                    template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                }]
+        }], propDecorators: { selectBox: [{
+                type: ViewChild,
+                args: [AXSelectBoxComponent]
+            }], items: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+class AXPListViewOptionSortingComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.onClosed = new EventEmitter();
+        this.props$ = of([]);
+        this.sorts$ = of([]);
+    }
+    ngOnInit() {
+        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canSort != false)));
+        this.sorts$ = this.loader.sorts$;
+    }
+    drop(event) {
+        this.sorts$.pipe(first()).subscribe((sorts) => {
+            moveItemInArray(sorts, event.previousIndex, event.currentIndex);
+        });
+    }
+    changeItemSort(item) {
+        item.dir = item.dir == 'asc' ? 'desc' : 'asc';
+    }
+    handleClose() {
+        this.onClosed.emit();
+    }
+    handleResetClick() {
+        this.loader.resetSort();
+    }
+    handleApplyClick() {
+        this.sorts$.pipe(first()).subscribe((data) => {
+            this.loader.updateSort(data);
+        });
+        this.onClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\n>\n  @if(!(sorts$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\n  </div>\n  }\n  <div\n    cdkDropList\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\n  >\n    <ng-container *ngFor=\"let item of sorts$ | async\">\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n        <ax-select-box\n          [dataSource]=\"(props$ | async) ?? []\"\n          valueField=\"name\"\n          textField=\"title\"\n          [(ngModel)]=\"item.name\"\n        >\n        </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n          ></ax-icon>\n        </ax-button>\n\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n        </ax-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((sorts$ | async)?.length){\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button\n          (onClick)=\"loader.addSort()\"\n          color=\"primary\"\n          text=\"Add field\"\n          look=\"outline\"\n          class=\"ax-md ax-w-56\"\n        ></ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-list-view-option-sorting', template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\n>\n  @if(!(sorts$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\n  </div>\n  }\n  <div\n    cdkDropList\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\n  >\n    <ng-container *ngFor=\"let item of sorts$ | async\">\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n        <ax-select-box\n          [dataSource]=\"(props$ | async) ?? []\"\n          valueField=\"name\"\n          textField=\"title\"\n          [(ngModel)]=\"item.name\"\n        >\n        </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n          ></ax-icon>\n        </ax-button>\n\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n        </ax-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((sorts$ | async)?.length){\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button\n          (onClick)=\"loader.addSort()\"\n          color=\"primary\"\n          text=\"Add field\"\n          look=\"outline\"\n          class=\"ax-md ax-w-56\"\n        ></ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
+
+const AXPEntityQuickViewAction = createAction('[Entity] QuickView', props());
+//
+const AXPEntityListViewAction = createAction('[Entity] ListView', props());
+//
+const AXPEntityDetailViewAction = createAction('[Entity] DetailView', props());
+const AXPEntityReloadAction = createAction('[Entity] Reload', props());
+//
+//
+// export const AXPEntityCreateAction = createAction('[Entity] Create', props<{ payload: { module: string, entity: string } }>());
+// export const AXPEntityCreatedAction = createAction('[Entity] Created', props<{ payload: { module: string, entity: string, id: string } }>());
+//
+// export const AXPEntityDeleteAction = createAction('[Entity] Delete', props<{ payload: { module: string, entity: string, ids: string[] } }>());
+// export const AXPEntityDeletedAction = createAction('[Entity] Deleted', props<{ payload: { module: string, entity: string, id: string } }>());
+// export const AXPEntityBulkDeletedAction = createAction('[Entity] Bulk Deleted', props<{ payload: { module: string, entity: string } }>());
+// export const AXPEntityModifyAction = createAction('[Entity] Modify', props<{ payload: {  module: string, entity: string, context:any, properties:any } }>());
+// export const AXPEntityModifiedAction = createAction('[Entity] Modified', props<{ payload: {  module: string, entity: string, id:string } }>());
+
+class AXPEntityCreateLoaderDefault {
+    constructor(config, store, formatService) {
+        this.config = config;
+        this.store = store;
+        this.formatService = formatService;
+        this._data = {};
+        this._currentSection = 'default';
+        this._sections$ = new BehaviorSubject(this.sections);
+        //****************** Properties ******************//
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        this.isRequired = (name) => this.getProp(name)?.validationRules?.some(c => c.rule == 'required') || false;
+        this._currentSection = this.sections[0]?.name || 'default';
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get data() {
+        return this._data;
+    }
+    get view() {
+        return this.entity.views.createView;
+    }
+    //****************** Sections ******************//
+    get sections() {
+        return this.view.root.sections?.length
+            ? this.view.root.sections
+            : [
+                {
+                    name: 'default',
+                    title: 'Default',
+                    properties: this.view.root.properties,
+                },
+            ];
+    }
+    get sections$() {
+        return this._sections$.pipe(defaultIfEmpty([]));
+    }
+    get section$() {
+        return this.sections$.pipe(switchMap((sections) => {
+            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
+            if (!section.sections?.length) {
+                section.sections = [
+                    {
+                        name: 'default',
+                        title: 'Details',
+                        properties: section.properties,
+                    },
+                ];
+            }
+            return of(section);
+        }));
+    }
+    get hasSections$() {
+        return this.sections$.pipe(map((c) => c.length > 1));
+    }
+    get isLast$() {
+        return this.sections$.pipe(map((c) => this.sections.length - this.sections.findIndex((c) => c.name == this._currentSection) == 1));
+    }
+    get isFirst$() {
+        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection) == 0));
+    }
+    get currentIndex$() {
+        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection)));
+    }
+    setSection(name) {
+        this._currentSection = name ?? 'default';
+        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
+            name: 'default',
+            title: 'Default',
+            properties: this.view.root.properties,
+        };
+        const currentSections = this._sections$.value;
+        const updatedSections = currentSections.map((section) => {
+            if (section.name === updatedSection.name) {
+                return updatedSection;
+            }
+            else {
+                return section;
+            }
+        });
+        this._sections$.next(updatedSections);
+    }
+    next() {
+        const nextIndex = this.sections.findIndex((c) => c.name == this._currentSection) + 1;
+        if (nextIndex >= this.sections.length) {
+            return Promise.resolve();
+        }
+        else {
+            this.setSection(this.sections[nextIndex].name);
+            return Promise.resolve();
+        }
+    }
+    back() {
+        const prevIndex = this.sections.findIndex((c) => c.name == this._currentSection) - 1;
+        if (prevIndex < 0) {
+            return Promise.resolve();
+        }
+        else {
+            this.setSection(this.sections[prevIndex].name);
+            return Promise.resolve();
+        }
+    }
+}
+class AXPEntityCreateViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.formatService = inject(AXFormatService);
+        this.layout = inject(AXPLayoutService);
+        this.store = inject(Store);
+    }
+    async create(moduleName, entityName) {
+        const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(true);
+        if (config.dataSource.byKey) {
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityCreateLoaderDefault(config, this.store, this.formatService);
+        }
+        return Promise.reject('cannot fetch ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const AXPEntityCreateEvent = createWorkFlowEvent('[Entity] Created!');
+class AXPEntityCreatePopupAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+        this.entityCreateFactory = inject(AXPEntityCreateViewLoaderFactory);
+    }
+    async execute(context) {
+        const { module, entity: entityName } = context.getVariable('payload');
+        const entity = await this.entityRegistery.resolve(module, entityName);
+        const com = await import('./acorex-platform-layouts-entity-create-view.component-8rtifIvM.mjs');
+        const result = await this.popupService.open(com.AXPEntityCreateViewComponent, {
+            title: `Create New ${entity.title}`,
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            data: {
+                loader: await this.entityCreateFactory.create(module, entityName),
+                entity,
+            },
+        });
+        if (result.data?.save) {
+            context.setOutput('popupResult', true);
+            context.setVariable('redirect', result.data.redirect);
+            context.setVariable('id', result.data.recordId);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
+    async execute(context) {
+        const { module, entity: entity } = context.getVariable('payload');
+        this.dispatch(AXPEntityCreateEvent({ entity, module }));
+    }
+}
+const AXPCreateEntityWorkflow = {
+    startStepId: 'createPopup',
+    steps: {
+        createPopup: {
+            id: 'createPopup',
+            action: 'AXPEntityCreatePopupAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
+                    nextStepId: 'successToast',
+                },
+            ],
+        },
+        successToast: {
+            id: 'successToast',
+            action: 'AXPToastAction',
+            input: {
+                color: 'success',
+                title: 'Entity Created',
+                content: 'New Record has been successfully created.',
+            },
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'createSubmitted',
+                },
+            ],
+        },
+        createSubmitted: {
+            id: 'createSubmitted',
+            action: 'AXPEntityCreateSubmittedAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getVariable("redirect") == true' }],
+                    nextStepId: 'showDetailView',
+                },
+            ],
+        },
+        showDetailView: {
+            id: 'showDetailView',
+            action: 'AXPShowDetailViewAction',
+        },
+    },
+};
+
+const AXPEntityDeletedEvent = createWorkFlowEvent('[Entity] Deleted');
+class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.dialogService = inject(AXDialogService);
+        this.loadingDialog = inject(AXLoadingDialogService);
+    }
+    async execute(context) {
+        const moduleName = context.getVariable('module');
+        const entityName = context.getVariable('entity');
+        const ids = context.getVariable('ids');
+        const entity = await this.entityRegistery.resolve(moduleName, entityName);
+        let deletedCount = 0;
+        context.setVariable('deleteSuccessful', false);
+        const dialog = this.loadingDialog.show({
+            title: 'Deleting Record...',
+            mode: 'determinate',
+            status: 'Deleting...',
+            progressValue: 0,
+            text: `0/${ids.length}`,
+            buttons: [
+                {
+                    text: 'Cancel',
+                    color: 'danger',
+                    onClick: () => {
+                        dialog.close();
+                    },
+                },
+            ],
+        });
+        if (entity.commands?.delete != null) {
+            const wrappedPromises = ids
+                .map((id, i) => {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve(entity.commands?.delete?.(id));
+                    }, i * 200);
+                });
+            })
+                .map((p) => p?.then((value) => {
+                deletedCount++;
+                dialog.setProgressText(`${deletedCount}/${ids.length}`);
+                dialog.setProgressValue((deletedCount / ids.length) * 100);
+                return { status: 'fulfilled', value };
+            }, (reason) => ({ status: 'rejected', reason })));
+            const results = await Promise.all(wrappedPromises);
+            const successfulPromises = results.filter((result) => result?.status === 'fulfilled').length;
+            const failedPromises = results.filter((result) => result?.status === 'rejected').length;
+            setTimeout(() => {
+                dialog.close();
+            }, 300);
+            // Handle different scenarios for alerts
+            if (successfulPromises > 0 && failedPromises === 0) {
+                // All items deleted successfully
+                await this.dialogService.alert('Deletion Successful', `${successfulPromises} item(s) has been deleted.`, 'success');
+                // Dispatch actions
+                this.dispatch(AXPEntityDeletedEvent({ module: moduleName, entity: entityName, id: ids }));
+            }
+            else if (successfulPromises > 0 && failedPromises > 0) {
+                // Some items deleted successfully, some failed
+                await this.dialogService.alert('Partial Deletion Completed', `${successfulPromises} item(s) deleted successfully. However, ${failedPromises} item(s) could not be deleted.`, 'warning');
+                // Dispatch actions
+                this.dispatch(AXPEntityDeletedEvent({ module: moduleName, entity: entityName, id: ids }));
+            }
+            else if (successfulPromises === 0 && failedPromises > 0) {
+                // No items deleted, all failed
+                await this.dialogService.alert('Deletion Failed', `No items were deleted. ${failedPromises} item(s) failed to delete.`, 'danger');
+            }
+            else {
+                // No items to delete (no successful or failed promises)
+                await this.dialogService.alert('No Deletion Needed', 'No items were available to delete.', 'info');
+            }
+        }
+        else {
+            throw new Error(`The delete operation cannot be performed on ${entity.title}. This action might be restricted or not applicable for the selected item.`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPMyCustomFunc extends AXPWorkflowFunction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.dialogService = inject(AXDialogService);
+    }
+    async execute(val) {
+        return val == 'abc';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPMyCustomFunc, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPMyCustomFunc }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPMyCustomFunc, decorators: [{
+            type: Injectable
+        }] });
+const AXPDeleteEntityWorkflow = {
+    startStepId: 'confirmDelete',
+    steps: {
+        confirmDelete: {
+            id: 'confirmDelete',
+            action: 'AXPDialogConfirmAction',
+            input: {
+                title: 'Warning',
+                message: `Are you sure want to delete selected item(s)?`,
+                type: 'danger',
+            },
+            nextSteps: [
+                {
+                    conditions: [
+                        {
+                            type: 'AND',
+                            conditions: [
+                                { type: 'SINGLE', expression: 'context.getOutput("deleteConfirmed") == true' },
+                                { type: 'SINGLE', expression: 'await test("abc")' },
+                            ],
+                        },
+                    ],
+                    nextStepId: 'performDelete',
+                },
+            ],
+        },
+        // loadingDialog: {
+        //   id: 'loadingDialog',
+        //   action: 'AXPDeleteLoadingDialogAction',
+        //   input: {
+        //     title: 'Warning',
+        //     message: `Are you sure want to delete selected item(s)?`,
+        //     type: 'danger',
+        //   },
+        //   nextSteps: [
+        //     {
+        //       conditions: [{ type: 'SINGLE', expression: 'context.getOutput("deleteDone") == true' }],
+        //       nextStepId: 'performDelete',
+        //     },
+        //   ],
+        // },
+        performDelete: {
+            id: 'performDelete',
+            action: 'AXPEntityPerformDeleteAction',
+        },
+    },
+};
+
+class AXPEntityListViewComponent {
+    constructor(actionSheetService, unsubscriber, platform, cdr) {
+        this.actionSheetService = actionSheetService;
+        this.unsubscriber = unsubscriber;
+        this.platform = platform;
+        this.cdr = cdr;
+        this.store = inject((Store));
+        this.workflow = inject(AXPWorkflowService);
+        this.layout = inject(AXPLayoutService);
+        this.route = inject(ActivatedRoute);
+        this.manuLoader = inject(AXP_MENU_LOADER);
+        this.loader = this.route.snapshot.data['loader'];
+        this.title = '';
+        this.searchValue = '';
+        this.searchBoxPlaceholder = '';
+        this.searchBoxTitle = '';
+        this.searchBoxCollapsed = true;
+        this.publicViews$ = this.loader.publicViews$;
+        this.customViews$ = this.loader.customViews$;
+        this.hasCustomViews$ = this.loader.hasCustomViews$;
+        this.view$ = this.loader.view$;
+        //
+        this.conditions$ = this.loader.conditions$;
+        this.conditionsCount$ = this.loader.conditionsCount$;
+        //
+        this.columns$ = this.loader.displayColumns$;
+        this.columnsCount$ = this.loader.displayColumnsCount$;
+        //
+        this.sort$ = this.loader.sorts$;
+        this.sortCount$ = this.loader.sortsCount$;
+        //
+        this.dataSource = this.loader.dataSource;
+        this.popupService = inject(AXPopupService);
+        this.dropdownRowItems = [
+            {
+                text: 'Edit',
+                icon: 'fa-solid fa-floppy-disk',
+                name: 'edit',
+                divided: true,
+            },
+            {
+                text: 'Delete',
+                icon: 'fa-solid fa-trash-can',
+                name: 'delete',
+                color: 'danger',
+            },
+        ];
+        this.inlineRowItems = [
+            {
+                text: 'View',
+                icon: 'fa-solid  fa-eye',
+                name: 'view',
+                divided: true,
+            },
+        ];
+        this.getDropdownRowItems = (rowData) => {
+            return Promise.resolve(this.dropdownRowItems);
+        };
+        this.getInlineRowItems = (rowData) => {
+            return this.inlineRowItems;
+        };
+        this.log = () => console.log('abc');
+        //TODO: namespace, module name issues
+        this.title = this.manuLoader.currentMenuItem()?.text ?? '';
+        this.loader.views$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+            this.grid?.render();
+        });
+        //
+        this.workflow.events$
+            .pipe(ofType$1(AXPEntityDeletedEvent, AXPEntityCreateEvent), this.unsubscriber.takeUntilDestroy)
+            .subscribe((event) => {
+            if (event.payload.entity == this.loader.entity.name && event.payload.module == this.loader.entity.module) {
+                this.grid.selectedRows = [];
+                this.grid?.refresh();
+            }
+        });
+        //
+        this.dataSource.onLoadingChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((value) => {
+            this.layout.setNavigationLoading(value);
+        });
+        this._getInlineConditionTitles();
+    }
+    _getInlineConditionTitles() {
+        const titles = this.loader.getInlineFilterTitles();
+        this.searchBoxTitle = titles.join(', ');
+        if (titles.length > 2)
+            this.searchBoxPlaceholder = titles.slice(0, 2).join(', ') + ' ...';
+        else
+            this.searchBoxPlaceholder = titles.join(', ');
+    }
+    _handleViewsPopover() {
+        this.actionSheetService.open({ content: this.viewsTemplate });
+    }
+    handleDrawerClick() {
+        this.store.dispatch(AXPLayoutChildDrawerToggle());
+    }
+    toggleSearchBox() {
+        this.searchBoxCollapsed = !this.searchBoxCollapsed;
+    }
+    handleRowDbClick(e) {
+        const d = {
+            component: e.component,
+            name: this.dropdownRowItems[0].name,
+            data: e.data,
+        };
+        this.handleRowCommandClick(d);
+    }
+    async handleRowCommandClick(e) {
+        switch (e.name) {
+            case 'view': {
+                this.store.dispatch(AXPEntityQuickViewAction({
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                        data: e.data,
+                    },
+                }));
+                break;
+            }
+            case 'edit': {
+                this.store.dispatch(AXPEntityDetailViewAction({
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                        id: e.data.id,
+                    },
+                }));
+                break;
+            }
+            case 'delete': {
+                await this.workflow.execute('delete-entity', {
+                    module: this.loader.entity.module,
+                    entity: this.loader.entity.name,
+                    ids: [e.data.id],
+                });
+                break;
+            }
+        }
+    }
+    handleCreateClick() {
+        this.workflow.execute('create-entity', {
+            payload: {
+                module: this.loader.entity.module,
+                entity: this.loader.entity.name,
+            },
+        });
+    }
+    handleCommandClick(command) {
+        switch (command) {
+            case 'delete':
+                this.workflow.execute('delete-entity', {
+                    module: this.loader.entity.module,
+                    entity: this.loader.entity.name,
+                    ids: this.grid.selectedRows.map((c) => c['id']),
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    clearSelectedItems() {
+        this.grid.selectedRows = [];
+        this.grid?.render();
+    }
+    closeDrawer(name, collapsed) {
+        if (collapsed != false) {
+            switch (name) {
+                case 'conditions':
+                    this.loader.resetConditions();
+                    break;
+                case 'columns':
+                    this.loader.resetColumns();
+                    break;
+                case 'sorts':
+                    this.loader.resetSort();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    handleChangeSearchValue(e) {
+        if (e.isUserInteraction) {
+            this.loader.handleInlineSearch(e.value);
+        }
+    }
+    async addCustomViewPopup() {
+        const newView = {
+            name: 'custom-view',
+            title: 'Custom View',
+            fixed: false,
+            sorts: [],
+            columns: convertPropertiesToColumns(...this.loader.entity.properties),
+            conditions: [],
+        };
+        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
+            title: 'Create Custom View',
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            closeOnBackdropClick: true,
+            draggable: false,
+            data: {
+                loader: this.loader,
+                selectedView: newView,
+                mode: 'create',
+            },
+        });
+        if (popup.data?.save == true) {
+            console.log('updatedView: ', popup.data.updatedView);
+            this.loader.createView(popup.data.updatedView);
+        }
+    }
+    async updateViewPopup(e, selectedView) {
+        // (e.nativeEvent as UIEvent).stopPropagation();
+        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
+            title: 'Modify Custom View',
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            closeOnBackdropClick: true,
+            draggable: false,
+            data: {
+                loader: this.loader,
+                selectedView,
+                mode: 'edit',
+            },
+        });
+        if (popup.data?.delete == true) {
+            this.loader.deleteView(popup.data.viewName);
+        }
+        if (popup.data?.save == true) {
+            console.log('updatedView: ', popup.data.updatedView);
+            this.loader.updateView(popup.data.updatedView);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$4.AXActionSheetService }, { token: i2$3.AXUnsubscriber }, { token: i3$2.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityListViewComponent, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewsTemplate", first: true, predicate: ["viewsTemplate"], descendants: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }, { propertyName: "entityViewDrawer", first: true, predicate: ["entityViewDrawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\n    <ax-content class=\"ax-w-64 ax-border-e\">\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          <ax-side-menu-item [text]=\"item.text\">\n            <ax-prefix>\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\n            </ax-prefix>\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n      @if(platform.is('MD')){\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n          <span (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n            Items</span>\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n          </ax-button>\n        </div>\n        }\n      </div>\n\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\n          <ax-suffix>\n            <i class=\"fa-solid fa-caret-down\"></i>\n          </ax-suffix>\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n            <ax-button-item-list class=\"ax-bg-surface\">\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\n                class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        <div class=\"ax-flex ax-gap-2\">\n          @if(searchBoxTitle){\n          <ax-button (onClick)=\"toggleSearchBox()\" [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          }\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\n            @if ((conditionsCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\n            @if ((sortCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n        </div>\n      </div>\n      <div [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\"\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n      </div>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\n                    <ax-suffix>\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\n                      </ax-button>\n                    </ax-suffix>\n                  </ax-button-item>\n                  <ax-divider></ax-divider>\n                  <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\n                    class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\">\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Conditions\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n              Items</span>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex\">\n      <ax-data-table class=\"ax-flex-1\" #grid [dataSource]=\"dataSource\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer [schema]=\"col.schema\" [dataField]=\"col.name\" [caption]=\"col.title\"\n          *ngIf=\"col.visible\" width=\"180px\" [allowSorting]=\"false\" [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column [width]=\"'60px'\" [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      </ax-data-table>\n    </div>\n  </ax-content>\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\n      <axp-list-view-option-conditions [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["rowTemplate", "emptyTemplate", "showHeader", "fetchDataMode", "dataSource", "loading", "focusedRow", "selectedRows", "itemHeight"], outputs: ["onPageChanged", "onRowClick", "onRowDbClick", "focusedRowChange", "selectedRowsChange", "onScrolledIndexChanged"] }, { kind: "component", type: i6$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i10.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i4$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i1$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "options", "dataField", "displayFormat", "schema"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityListViewComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\n    <ax-content class=\"ax-w-64 ax-border-e\">\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          <ax-side-menu-item [text]=\"item.text\">\n            <ax-prefix>\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\n            </ax-prefix>\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n      @if(platform.is('MD')){\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n          <span (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n            Items</span>\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n          </ax-button>\n        </div>\n        }\n      </div>\n\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\n          <ax-suffix>\n            <i class=\"fa-solid fa-caret-down\"></i>\n          </ax-suffix>\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n            <ax-button-item-list class=\"ax-bg-surface\">\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\n                class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        <div class=\"ax-flex ax-gap-2\">\n          @if(searchBoxTitle){\n          <ax-button (onClick)=\"toggleSearchBox()\" [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          }\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\n            @if ((conditionsCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\n            @if ((sortCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n        </div>\n      </div>\n      <div [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\"\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n      </div>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\n                    <ax-suffix>\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\n                      </ax-button>\n                    </ax-suffix>\n                  </ax-button-item>\n                  <ax-divider></ax-divider>\n                  <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\n                    class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\">\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Conditions\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n              Items</span>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex\">\n      <ax-data-table class=\"ax-flex-1\" #grid [dataSource]=\"dataSource\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer [schema]=\"col.schema\" [dataField]=\"col.name\" [caption]=\"col.title\"\n          *ngIf=\"col.visible\" width=\"180px\" [allowSorting]=\"false\" [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column [width]=\"'60px'\" [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      </ax-data-table>\n    </div>\n  </ax-content>\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\n      <axp-list-view-option-conditions [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.AXActionSheetService }, { type: i2$3.AXUnsubscriber }, { type: i3$2.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
+                type: ViewChild,
+                args: ['viewsTemplate']
+            }], grid: [{
+                type: ViewChild,
+                args: ['grid']
+            }], entityViewDrawer: [{
+                type: ViewChild,
+                args: ['entityViewDrawer']
+            }] } });
+
+const widgetSchemas = {
+    //*Sharing schema list with other modules
+    text: 'text',
+    largetext: 'largetext',
+    number: 'number',
+    currency: 'currency',
+    phone: 'phone',
+    email: 'email',
+    dateTime: 'dateTime',
+    date: 'date',
+    time: 'time',
+    toggle: 'toggle',
+    checkbox: 'checkbox',
+    password: 'password',
+    file: 'file',
+    lookup: 'lookup',
+    selectionList: 'selection-list',
+    richText: 'rich-text',
+    map: 'map',
+    avatar: 'avatar',
+    messenger: 'messenger',
+    gallery: 'gallery',
+    signaturePad: 'signature-pad',
+};
+class AXPCommonWidgetModule {
+    constructor(service) {
+        //text
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-text-widget-view.component-65eOj0qR.mjs').then((c) => c.AXPTextWidgetViewComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-text-widget-edit.component-TC127Dq8.mjs').then((c) => c.AXPTextWidgetEditComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-text-widget-column.component-qhh6MT79.mjs').then((c) => c.AXPTextWidgetColumnComponent),
+                },
+            },
+            filterOptions: {
+                operators: [...STRING_OPERATORS],
+                default: CONTAINS_OPER,
+            },
+            name: widgetSchemas.text,
+            dataType: 'string',
+        });
+        service.extend('text', {
+            name: widgetSchemas.largetext,
+            component: {
+                edit: {
+                    component: () => import('./acorex-platform-layouts-largetext-widget-edit.component-Um_eBRFi.mjs').then((c) => c.AXPLargeTextWidgetEditComponent),
+                },
+                column: {
+                    options: {
+                        width: '400px',
+                    },
+                },
+            },
+        });
+        //
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-number-widget-view.component-hqkAR0LG.mjs').then((c) => c.AXPNumberWidgetViewComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-number-widget-filter.component-DPGSzdNm.mjs').then((c) => c.AXPNumberWidgetFilterComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-number-widget-edit.component-DDi-o_Zn.mjs').then((c) => c.AXPNumberWidgetEditComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-number-widget-view.component-hqkAR0LG.mjs').then((c) => c.AXPNumberWidgetViewComponent),
+                },
+            },
+            name: widgetSchemas.number,
+            filterOptions: {
+                operators: [...NUMBER_OPERATORS],
+                default: BETWEEN_OPER,
+            },
+            dataType: 'number',
+        });
+        service.extend('number', {
+            name: widgetSchemas.currency,
+            formats: {
+                default: 'EN-GB',
+            },
+            component: {
+                edit: {
+                    options: {
+                        clearButton: false,
+                    },
+                },
+            },
+        });
+        //phone
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs').then((c) => c.AXPPhoneWidgetViewComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-phone-widget-column.component-s04WZfzv.mjs').then((c) => c.AXPPhoneWidgetColumnComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-phone-widget-edit.component-MKzlZ0_B.mjs').then((c) => c.AXPPhoneWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                },
+            },
+            name: widgetSchemas.phone,
+            filterOptions: {
+                operators: [...STRING_OPERATORS],
+                default: CONTAINS_OPER,
+            },
+            dataType: 'object',
+        });
+        //email
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-email-widget-view.component-XrV8va7z.mjs').then((c) => c.AXPEmailWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-email-widget-edit.component-m2dI7y9X.mjs').then((c) => c.AXPEmailWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-email-widget-column.component-ac8gqsFT.mjs').then((c) => c.AXPEmailWidgetColumnComponent),
+                },
+            },
+            name: widgetSchemas.email,
+            filterOptions: {
+                operators: [...STRING_OPERATORS],
+                default: CONTAINS_OPER,
+            },
+            dataType: 'object',
+        });
+        // dateTime
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-dateTime-widget-view.component-BrwycTWz.mjs').then((c) => c.AXPDateTimeWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-dateTime-widget-edit.component-zeJXGXY8.mjs').then((c) => c.AXPDateTimeWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-dateTime-widget-filter.component-DJ6esclU.mjs').then((c) => c.AXPDateTimeWidgetFilterComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-dateTime-widget-column.component-qeQRJePy.mjs').then((c) => c.AXPDateTimeWidgetColumnComponent),
+                    options: {
+                        width: '150px',
+                    },
+                },
+            },
+            formats: {
+                default: 'date time',
+            },
+            filterOptions: {
+                operators: [...DATE_OPERATORS],
+                default: BETWEEN_OPER,
+            },
+            name: widgetSchemas.dateTime,
+            dataType: 'date',
+        });
+        service.extend(widgetSchemas.dateTime, {
+            name: widgetSchemas.date,
+            formats: {
+                default: 'date',
+            },
+            component: {
+                column: {
+                    options: {
+                        width: '120px',
+                    },
+                },
+            },
+        });
+        service.extend(widgetSchemas.dateTime, {
+            name: widgetSchemas.time,
+            formats: {
+                default: 'time',
+            },
+            component: {
+                column: {
+                    options: {
+                        width: '80px',
+                    },
+                },
+            },
+        });
+        //toggle
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-toggle-widget-view.component-DTOeAUiy.mjs').then((c) => c.AXPToggleWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-toggle-widget-edit.component-R44L1pgJ.mjs').then((c) => c.AXPToggleWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-boolean-widget-filter.component-H056Q5Gz.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-toggle-widget-column.component-uxOXR-bL.mjs').then((c) => c.AXPToggleWidgetColumnComponent),
+                    options: {
+                        width: '100px',
+                    },
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.toggle,
+            dataType: 'boolean',
+        });
+        //checkbox
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-checkbox-widget-view.component-m6bF8XFR.mjs').then((c) => c.AXPCheckboxWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-checkbox-widget-edit.component-P4cD_Nwg.mjs').then((c) => c.AXPCheckboxWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-boolean-widget-filter.component-H056Q5Gz.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-checkbox-widget-column.component-vRJI5S-w.mjs').then((c) => c.AXPCheckboxWidgetColumnComponent),
+                    options: {
+                        width: '100px',
+                    },
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.checkbox,
+            dataType: 'boolean',
+        });
+        //password
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-password-widget-view.component-E2vtPKRO.mjs').then((c) => c.AXPPasswordWidgetViewComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-password-widget-column.component-ic1jykZL.mjs').then((c) => c.AXPPasswordWidgetColumnComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-password-widget-edit.component-D8xI17yk.mjs').then((c) => c.AXPPasswordWidgetEditComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.password,
+            dataType: 'string',
+        });
+        //file
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-file-widget-view.component-mXBrKX0K.mjs').then((c) => c.AXPFileWidgetViewComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-file-widget-column.component-v7kAdIQ9.mjs').then((c) => c.AXPFileWidgetColumnComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-file-widget-edit.component-Wrq7ZL9R.mjs').then((c) => c.AXPFileWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-file-widget-filter.component-1-NJh38j.mjs').then((c) => c.AXPFileWidgetFilterComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.file,
+            dataType: 'object',
+        });
+        // look up
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-lookup-widget-view.component-ftFXFj6k.mjs').then((c) => c.AXPLookupWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-lookup-widget-edit.component-l5nSr9Cm.mjs').then((c) => c.AXPLookupWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-lookup-widget-filter.component-gp5skvmz.mjs').then((c) => c.AXPLookupWidgetFilterComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-lookup-widget-column.component-Ts0MJe8O.mjs').then((c) => c.AXPLookupWidgetColumnComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: CONTAINS_OPER,
+            },
+            name: widgetSchemas.lookup,
+            dataType: 'object',
+        });
+        // selection list
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-selection-list-widget-view.component-s9xq___Y.mjs').then((c) => c.AXPSelectionListWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-selection-list-widget-edit.component-FpOQ12Ie.mjs').then((c) => c.AXPSelectionListWidgetEditComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-selection-list-widget-column.component-9FTkDGmq.mjs').then((c) => c.AXPSelectionListWidgetColumnComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-selection-list-widget-filter.component-hGk-ZZ78.mjs').then((c) => c.AXPSelectionListWidgetFilterComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: CONTAINS_OPER,
+            },
+            name: widgetSchemas.selectionList,
+            dataType: 'object',
+        });
+        // rich text
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-rich-text-widget-view.component--Rzxm2a6.mjs').then((c) => c.AXPRichTextWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-rich-text-widget-edit.component-ro2yg7PR.mjs').then((c) => c.AXPRichTextWidgetEditComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-rich-text-widget-column.component-P0YzXTIB.mjs').then((c) => c.AXPRichTextWidgetColumnComponent),
+                    options: {
+                        width: '400px',
+                    },
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                },
+            },
+            filterOptions: {
+                operators: [...STRING_OPERATORS],
+                default: CONTAINS_OPER,
+            },
+            name: widgetSchemas.richText,
+            dataType: 'object',
+        });
+        // map
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-map-widget-view.component-1Lj9efbd.mjs').then((c) => c.AXPMapWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-map-widget-edit.component-SOQvPhmX.mjs').then((c) => c.AXPMapWidgetEditComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.map,
+            dataType: 'object',
+        });
+        // avatar
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-avatar-widget-view.component-pJJYkvdH.mjs').then((c) => c.AXPAvatarWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-avatar-widget-edit.component-PZr1lXj-.mjs').then((c) => c.AXPAvatarWidgetEditComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.avatar,
+            dataType: 'object',
+        });
+        // messenger
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-messenger-widget-view.component-9TJiFdq-.mjs').then((c) => c.AXPMessengerWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-messenger-widget-edit.component-dAX8nirB.mjs').then((c) => c.AXPMessengerWidgetEditComponent),
+                },
+                column: {
+                    component: () => import('./acorex-platform-layouts-messenger-widget-column.component-W7ZY-W84.mjs').then((c) => c.AXPMessengerWidgetColumnComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.messenger,
+            dataType: 'object',
+        });
+        //
+        // gallery
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-gallery-widget-view.component-xU52uaP0.mjs').then((c) => c.AXPGalleryWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-gallery-widget-edit.component-cWNvVwum.mjs').then((c) => c.AXPGalleryWidgetEditComponent),
+                },
+                filter: {
+                    component: () => import('./acorex-platform-layouts-gallery-widget-filter.component-OCz0hj5i.mjs').then((c) => c.AXPGalleryWidgetFilterComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.gallery,
+            dataType: 'object',
+        });
+        // signature-pad
+        service.register({
+            component: {
+                view: {
+                    component: () => import('./acorex-platform-layouts-signature-pad-widget-view.component-R40Ml757.mjs').then((c) => c.AXPSignaturePadWidgetViewComponent),
+                },
+                edit: {
+                    component: () => import('./acorex-platform-layouts-signature-pad-widget-edit.component-W28Uk9zO.mjs').then((c) => c.AXPSignaturePadWidgetEditComponent),
+                },
+            },
+            filterOptions: {
+                operators: [],
+                default: EQ_OPER,
+            },
+            name: widgetSchemas.signaturePad,
+            dataType: 'object',
+        });
+        //
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, deps: [{ token: i1$3.AXPSchemaRegistryService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXToastModule],
+                    exports: [],
+                    declarations: [],
+                    providers: [],
+                }]
+        }], ctorParameters: () => [{ type: i1$3.AXPSchemaRegistryService }] });
+
+class AXPListViewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, declarations: [AXPEntityListViewComponent,
+            AXPEntityCreateCustomViewComponent,
+            AXPListViewOptionsColumnsComponent,
+            AXPListViewOptionConditionsComponent,
+            AXPListViewOptionFilterOperatorComponent,
+            AXPListViewOptionSortingComponent], imports: [CommonModule,
+            FormsModule,
+            AXCommonModule,
+            AXDataTableModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDropdownModule,
+            AXPopoverModule,
+            AXImageModule,
+            AXSwitchModule,
+            AXDrawerModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXSelectBoxModule,
+            AXFormModule,
+            AXListModule,
+            AXTextBoxModule,
+            AXSearchBoxModule,
+            AXLabelModule,
+            AXCollapseModule,
+            AXActionSheetModule,
+            AXSelectionListModule,
+            AXImageModule,
+            AXDialogModule,
+            AXDropdownButtonModule,
+            //
+            CdkDropList,
+            CdkDrag,
+            CdkDragPlaceholder,
+            CdkDragHandle,
+            PortalModule,
+            AXPSchemaModule,
+            AXPCommonWidgetModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, imports: [CommonModule,
+            FormsModule,
+            AXCommonModule,
+            AXDataTableModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDropdownModule,
+            AXPopoverModule,
+            AXImageModule,
+            AXSwitchModule,
+            AXDrawerModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXSelectBoxModule,
+            AXFormModule,
+            AXListModule,
+            AXTextBoxModule,
+            AXSearchBoxModule,
+            AXLabelModule,
+            AXCollapseModule,
+            AXActionSheetModule,
+            AXSelectionListModule,
+            AXImageModule,
+            AXDialogModule,
+            AXDropdownButtonModule,
+            PortalModule,
+            AXPSchemaModule,
+            AXPCommonWidgetModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXCommonModule,
+                        AXDataTableModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXPopoverModule,
+                        AXImageModule,
+                        AXSwitchModule,
+                        AXDrawerModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXSelectBoxModule,
+                        AXFormModule,
+                        AXListModule,
+                        AXTextBoxModule,
+                        AXSearchBoxModule,
+                        AXLabelModule,
+                        AXCollapseModule,
+                        AXActionSheetModule,
+                        AXSelectionListModule,
+                        AXImageModule,
+                        AXDialogModule,
+                        AXDropdownButtonModule,
+                        //
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPlaceholder,
+                        CdkDragHandle,
+                        PortalModule,
+                        AXPSchemaModule,
+                        AXPCommonWidgetModule,
+                    ],
+                    declarations: [
+                        AXPEntityListViewComponent,
+                        AXPEntityCreateCustomViewComponent,
+                        AXPListViewOptionsColumnsComponent,
+                        AXPListViewOptionConditionsComponent,
+                        AXPListViewOptionFilterOperatorComponent,
+                        AXPListViewOptionSortingComponent,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+class AXPListViewLoaderDefault {
+    constructor(config, schemaService) {
+        this.config = config;
+        this.schemaService = schemaService;
+        this._dataSource = new AXDataSource(this.entity.dataSource);
+        this._inlineFilterItems = [];
+        this._props$ = new BehaviorSubject(this.props);
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        //****************** Views ******************//
+        this._currentView = 'default';
+        this._views$ = new BehaviorSubject(this.views);
+        //****************** Columns ******************//
+        this._currentDisplayColumns$ = new BehaviorSubject([]);
+        this._columns$ = new BehaviorSubject(this.columns);
+        //****************** Sort ******************//
+        this._currentSorts$ = new BehaviorSubject([]);
+        //****************** Conditions ******************//
+        this._currentConditions$ = new BehaviorSubject([]);
+        this.setView(this.views[0].name);
+        this._inlineFilterItems = this.entity.properties
+            .filter((property) => property.canInlineFilter)
+            .map((item) => {
+            const schema = this.schemaService.resolve(item.schema);
+            return { name: item.name, dataType: schema?.dataType, title: item.title };
+        });
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
+    //****************** Properties ******************//
+    get props() {
+        return this.entity.properties;
+    }
+    get properties$() {
+        return this._props$;
+    }
+    get views() {
+        return this.entity.views.list.views;
+    }
+    get views$() {
+        return this._views$;
+    }
+    get view$() {
+        return this.views$.pipe(switchMap((views) => {
+            const view = views.find((c) => c.name === this._currentView);
+            if (view) {
+                return of(view);
+            }
+            else if (this.views.length > 0) {
+                return of(this.views[0]);
+            }
+            else {
+                return of(AXPEntityListViewConfigEmpty);
+            }
+        }));
+    }
+    get publicViews$() {
+        return this.views$.pipe(map((c) => c.filter((v) => v.fixed)));
+    }
+    get customViews$() {
+        return this.views$.pipe(map((c) => c.filter((v) => !v.fixed)));
+    }
+    get hasCustomViews$() {
+        return this.customViews$.pipe(map((c) => c.length > 0));
+    }
+    setView(name) {
+        let propNames = [];
+        this.properties$.pipe(first()).subscribe((properties) => {
+            propNames = properties.map((p) => p.name);
+        });
+        this._currentView = name;
+        const updatedView = this._views$.value.find((c) => c.name === this._currentView) || AXPEntityListViewConfigEmpty;
+        const currentViews = this._views$.value;
+        const updatedViews = currentViews.map((view) => {
+            if (view.name === updatedView.name) {
+                return updatedView;
+            }
+            else {
+                return view;
+            }
+        });
+        this._currentConditions$.next(cloneDeep(updatedView.conditions.filter((c) => propNames.includes(c.name))));
+        this._currentSorts$.next(cloneDeep(updatedView.sorts.filter((s) => propNames.includes(s.name))));
+        // this._columns$.next(updatedView.columns);
+        this._currentDisplayColumns$.next(cloneDeep(updatedView.columns.filter((c) => propNames.includes(c.name))));
+        this._views$.next(updatedViews);
+        //apply conditions and sorts:
+        this.dataSource.filter({
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: updatedView.conditions.map((c) => ({
+                field: c.name,
+                value: c.value,
+                operator: { type: c.operator },
+            })),
+        });
+        const convertedSortItems = updatedView.sorts.map((s) => ({
+            field: s.name,
+            dir: s.dir,
+        }));
+        this.dataSource.sort(...convertedSortItems);
+        this.dataSource.refresh();
+    }
+    createView(newView) {
+        const currentViews = this._views$.getValue();
+        currentViews.push(newView);
+        this._views$.next(currentViews);
+        this.setView(newView.name);
+    }
+    updateView(updatedView) {
+        const currentViews = this._views$.getValue().map((view) => (view.name === updatedView.name ? updatedView : view));
+        this._views$.next(currentViews);
+        this.setView(updatedView.name);
+    }
+    deleteView(viewName) {
+        const currentViews = this._views$.getValue().filter((view) => view.name !== viewName);
+        this._views$.next(currentViews);
+        this.setView(this.views[0].name);
+    }
+    get columns() {
+        return this.entity.properties.map((p) => ({
+            name: p.name,
+            title: p.title,
+            schema: p.schema,
+        }));
+    }
+    get columns$() {
+        return this._columns$.pipe(defaultIfEmpty([]));
+    }
+    get displayColumns$() {
+        return this._currentDisplayColumns$.pipe(defaultIfEmpty([]));
+    }
+    get displayColumnsCount$() {
+        return this.view$.pipe(map((view) => {
+            return view.columns.filter((column) => column.visible).length;
+        }));
+    }
+    updateColumns(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.columns = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+        });
+    }
+    resetColumns() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentDisplayColumns$.next(cloneDeep(view.columns));
+        });
+    }
+    setColumnVisibility(name, visible) {
+        const updatedColumns = this._currentDisplayColumns$.getValue().map((column) => {
+            if (column.name === name) {
+                return { ...column, visible };
+            }
+            else {
+                return column;
+            }
+        });
+        this._currentDisplayColumns$.next(updatedColumns);
+    }
+    get sorts$() {
+        return this._currentSorts$.pipe(defaultIfEmpty([]));
+    }
+    get sortsCount$() {
+        return this.view$.pipe(map((c) => c.sorts.length));
+    }
+    addSort() {
+        this.view$.pipe(first()).subscribe((view) => {
+            const currentSorts = this._currentSorts$.getValue();
+            const name = view.columns.find((c) => !currentSorts.some((s) => s.name == c.name))?.name ?? '';
+            if (name) {
+                const sorts = [...currentSorts, { name, dir: 'asc' }];
+                this._currentSorts$.next(sorts);
+            }
+        });
+    }
+    removeSort(item) {
+        const currentSorts = this._currentSorts$.getValue();
+        const sorts = currentSorts.filter((c) => c != item);
+        this._currentSorts$.next(sorts);
+    }
+    resetSort() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentSorts$.next(cloneDeep(view.sorts));
+        });
+    }
+    updateSort(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.sorts = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+            const convertedSortItems = items.map((s) => ({
+                field: s.name,
+                dir: s.dir,
+            }));
+            this.dataSource.sort(...convertedSortItems);
+            this.dataSource.refresh();
+        });
+    }
+    get conditions$() {
+        return this._currentConditions$.pipe(defaultIfEmpty([]));
+    }
+    get conditionsCount$() {
+        return this.view$.pipe(map((c) => c.conditions.length));
+    }
+    getInlineFilterTitles() {
+        return this._inlineFilterItems.map((item) => item.title);
+    }
+    addCondition(selectedFields) {
+        const prevConditions = this._currentConditions$.getValue();
+        const conditionsMap = new Map(prevConditions.map((item) => [item.name, item]));
+        const newFields = selectedFields.map((field) => conditionsMap.get(field.name) || { name: field.name, operator: field.opr });
+        this._currentConditions$.next(newFields);
+    }
+    removeCondition(item) {
+        const currentConditions = this._currentConditions$.getValue();
+        const conditions = currentConditions.filter((c) => c != item);
+        this._currentConditions$.next(conditions);
+    }
+    updateConditions(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.conditions = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+        });
+        this.applyAllConditions();
+    }
+    handleInlineSearch(value) {
+        const inlineConditions = [];
+        this._inlineFilterItems?.forEach((property) => {
+            if (property?.dataType == 'string' || property?.dataType == 'number') {
+                inlineConditions.push({
+                    name: property.name,
+                    value: property.dataType == 'number' ? parseFloat(value) : value,
+                    operator: property.dataType == 'string' ? 'contains' : 'equal',
+                });
+            }
+        });
+        this.view$.pipe(first()).subscribe((view) => {
+            view.inlineConditions = cloneDeep(inlineConditions);
+        });
+        this.applyAllConditions();
+    }
+    applyAllConditions() {
+        const inlineConditions = {
+            field: null,
+            operator: null,
+            logic: 'or',
+            filters: [],
+        };
+        const mainConditions = {
+            field: null,
+            operator: null,
+            logic: 'and',
+            filters: [],
+        };
+        this.view$.pipe(first()).subscribe((view) => {
+            if (view.inlineConditions && view.inlineConditions.length) {
+                view.inlineConditions?.forEach((c) => {
+                    if (c.value) {
+                        inlineConditions.filters?.push({
+                            field: c.name,
+                            operator: { type: c.operator },
+                            value: c.value,
+                        });
+                    }
+                });
+            }
+            if (view.conditions.length) {
+                view.conditions.forEach((c) => {
+                    mainConditions.filters?.push({
+                        field: c.name,
+                        operator: { type: c.operator },
+                        value: c.value,
+                    });
+                });
+            }
+            this.dataSource.filter({
+                field: null,
+                logic: 'and',
+                operator: null,
+                filters: [mainConditions, inlineConditions],
+            });
+            this.dataSource.refresh();
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+        });
+    }
+    resetConditions() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentConditions$.next(cloneDeep(view.conditions));
+        });
+    }
+}
+const AXP_LISTVIEW_LOADER = new InjectionToken('AXP_LISTVIEW_LOADER');
+class AXPListViewLoaderFactory {
+    constructor() {
+        this.cache = new Map();
+        this.entityService = inject(AXPEntityRegistryService);
+        this.schemaService = inject(AXPSchemaRegistryService);
+        this.layout = inject(AXPLayoutService);
+    }
+    async create(moduleName, entityName) {
+        this.layout.setNavigationLoading(true);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        let result = this.cache.get(config.name);
+        if (result) {
+            this.layout.setNavigationLoading(false);
+            return result;
+        }
+        result = new AXPListViewLoaderDefault(config, this.schemaService);
+        this.cache.set(config.name, result);
+        this.layout.setNavigationLoading(false);
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXPEntityQuickViewComponent extends AXBasePageComponent {
+    /**
+     *
+     */
+    constructor(actions$) {
+        super();
+        this.actions$ = actions$;
+        this.store = inject((Store));
+        this.workflow = inject(AXPWorkflowService);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        //
+        if (this.entity.views.quickView)
+            this.root = this.entity.views.quickView?.root;
+    }
+    getProperties(names) {
+        return this.entity.properties.filter((c) => names.includes(c.name));
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleCommandClick(command) {
+        switch (command) {
+            case 'delete':
+                this.workflow.execute('delete-entity', {
+                    module: this.entity.module,
+                    entity: this.entity.name,
+                    ids: [this.data.id],
+                });
+                this.close();
+                break;
+            case 'details':
+                this.store.dispatch(AXPEntityDetailViewAction({
+                    payload: {
+                        module: this.entity.module,
+                        entity: this.entity.name,
+                        id: this.data.id,
+                    },
+                }));
+                this.close();
+                break;
+            default:
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$5.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityQuickViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div\n      *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n    >\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\"\n  >\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div\n        *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n      >\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n        ></ax-button-item>\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i1$3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityQuickViewComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXPSchemaModule,
+                        AXPCommonWidgetModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXDropdownButtonModule,
+                    ], template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div\n      *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n    >\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\"\n  >\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div\n        *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n      >\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n        ></ax-button-item>\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>\n" }]
+        }], ctorParameters: () => [{ type: i1$5.Actions }] });
+
+var entityQuickView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityQuickViewComponent: AXPEntityQuickViewComponent
+});
+
+class AXPEntityModifyLoaderDefault {
+    constructor(config, selectedData, selectedSection) {
+        this.config = config;
+        this.selectedData = selectedData;
+        this.selectedSection = selectedSection;
+        this._data = {};
+        //****************** Properties ******************//
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        this._data = this.selectedData;
+        this._currentSection = this.selectedSection;
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get data() {
+        return this._data;
+    }
+    get section() {
+        return this._currentSection;
+    }
+    get view() {
+        return this.entity.views.detailView;
+    }
+    //****************** update ******************//
+    async update(values) {
+        if (this._config.commands?.update) {
+            const updated = await this._config.commands?.update(this._data.id, values);
+            Object.assign(this._data, updated);
+            return Promise.resolve();
+        }
+        else {
+            return Promise.reject(`There is not any update commands for '${this.config.name}'`);
+        }
+    }
+}
+class AXPEntityModifyViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.layout = inject(AXPLayoutService);
+    }
+    async create(moduleName, entityName, id, section) {
+        this.layout.setNavigationLoading(true);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        if (config.dataSource.byKey) {
+            const data = await config.dataSource.byKey(id);
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityModifyLoaderDefault(config, data, section);
+        }
+        this.layout.setNavigationLoading(false);
+        return Promise.reject('cannot fetch ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
+class AXPEntityModifyPopupAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.entityCreateFactory = inject(AXPEntityModifyViewLoaderFactory);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const { module, entity: entityName, section, id } = payload;
+        const entity = await this.entityRegistery.resolve(module, entityName);
+        const loader = await this.entityCreateFactory.create(module, entityName, id, section);
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-VeTkP3-n.mjs');
+        const popup = await this.popupService.open(com.AXPEntityModifyViewComponent, {
+            title: `Modify ${payload.section.title}`,
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            data: {
+                context: loader.data,
+                loader: loader,
+                properties: payload.section.properties,
+                entity,
+            },
+        });
+        context.setOutput('popupResult', false);
+        if (popup.data?.result == true) {
+            context.setOutput('popupResult', true);
+            context.setVariable('updatedData', cloneDeep(popup.data.context));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyPopupAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyPopupAction, decorators: [{
+            type: Injectable
+        }] });
+class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const updatedData = context.getVariable('updatedData');
+        const entity = await this.entityRegistery.resolve(payload.module, payload.entity);
+        this.dispatch(AXPEntityModifyEvent({ module: entity.module, entity: entity.name, updateValues: updatedData }));
+    }
+}
+const AXPModifyEntityWorkflow = {
+    startStepId: 'modifyPopup',
+    steps: {
+        modifyPopup: {
+            id: 'modifyPopup',
+            action: 'AXPEntityModifyPopupAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
+                    nextStepId: 'successToast',
+                },
+            ],
+        },
+        successToast: {
+            id: 'successToast',
+            action: 'AXPToastAction',
+            input: {
+                color: 'success',
+                title: 'Entity Modified',
+                content: 'Record has been successfully updated.',
+            },
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'modifyConfirmed',
+                },
+            ],
+        },
+        modifyConfirmed: {
+            id: 'modifyConfirmed',
+            action: 'AXPEntityModifyConfirmedAction',
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: '',
+                },
+            ],
+        },
+    },
+};
+
+class AXPEntityDetailsViewComponent {
+    constructor(actions$, unsubscriber) {
+        this.actions$ = actions$;
+        this.unsubscriber = unsubscriber;
+        this.popupService = inject(AXPopupService);
+        this.sessionService = inject(AXPSessionService);
+        this.activeRoute = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.location = inject(Location);
+        this.cdr = inject(ChangeDetectorRef);
+        this.platform = inject(AXPlatform);
+        this.workflow = inject(AXPWorkflowService);
+        this.loader = this.activeRoute.snapshot.data['loader'];
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.isOpen = this.store.select(getChildDrawer());
+        this.editForm = {};
+        this.context = signal(cloneDeep(this.loader.data));
+        this.activeRoute.paramMap.pipe(first()).subscribe((c) => {
+            this.setSection(c.get('section'));
+        });
+        //
+        this.workflow.events$.pipe(ofType(AXPEntityDeletedEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
+            if (event.payload.entity == this.loader.entity.name &&
+                event.payload.module == this.loader.entity.module &&
+                event.payload.id.includes(this.loader.data.id)) {
+                this.store.dispatch(AXPEntityListViewAction({
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                    },
+                }));
+            }
+        });
+        this.workflow.events$
+            .pipe(ofType(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy)
+            .subscribe(async (event) => {
+            if (event.payload.entity == this.loader.entity.name &&
+                event.payload.module == this.loader.entity.module &&
+                event.payload.updateValues.id === this.loader.data.id) {
+                await this.loader.update(event.payload.updateValues);
+                this.context.set(cloneDeep(this.loader.data));
+            }
+        });
+    }
+    handleMenuClick(e, item) {
+        const entity = this.loader.entity;
+        const path = `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/${this.loader.data?.id}/view/${item.name}`;
+        this.location.go(path);
+        this.setSection(item.name);
+    }
+    handleCollapsedChange(value) {
+        if (value)
+            this.store.dispatch(AXPLayoutChildDrawerClose());
+    }
+    handleDrawerClick() {
+        this.store.dispatch(AXPLayoutChildDrawerToggle());
+    }
+    setSection(name) {
+        this.loader.setSection(name);
+    }
+    async handleSectionEdit(section) {
+        this.workflow.execute('modify-entity', {
+            payload: {
+                module: this.loader.entity.module,
+                entity: this.loader.entity.name,
+                id: this.loader.data.id,
+                section: section,
+            },
+        });
+    }
+    isActive(item) {
+        return item.name == window.location.pathname.split('/').pop();
+    }
+    handleCommandClick(command) {
+        switch (command) {
+            case 'delete':
+                this.workflow.execute('delete-entity', {
+                    module: this.loader.entity.module,
+                    entity: this.loader.entity.name,
+                    ids: [this.loader.data.id],
+                });
+                break;
+            case 'create': {
+                this.workflow.execute('create-entity', {
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                    },
+                });
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$5.Actions }, { token: i2$3.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityDetailsViewComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        @for(tab of (loader.sections$ | async); track tab.name)\n        {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\n          [disabled]=\"editForm.context\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content #content class=\"ax-overflow-x-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n    >\n      <div\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-pt-3 -ax-mx-6'\"\n        [stickyParent]=\"content.getHostElement()\"\n      >\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  <ax-button-item\n                    text=\"Create New One\"\n                    class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  <ax-button-item\n                    text=\"Delete\"\n                    class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item\n            [text]=\"tab.title\"\n            [active]=\"isActive(tab)\"\n            (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"\n          >\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\"\n                  >\n                    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"\n                      section.options?.showPropTitle == false\n                        ? 'ax-col-span-12'\n                        : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\n                    \"\n                  >\n                    <axp-widget-renderer\n                      [schema]=\"prop.schema\"\n                      [context]=\"context()\"\n                      [prop]=\"prop\"\n                      [mode]=\"'view'\"\n                    ></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i10.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$3.AXFormComponent, selector: "ax-form", inputs: ["messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i1$3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i11.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: 
+                //
+                AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXPopoverModule,
+                        AXFormModule,
+                        AXImageModule,
+                        AXActionSheetModule,
+                        AXSwitchModule,
+                        AXDrawerModule,
+                        AXDialogModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXBadgeModule,
+                        AXButtonModule,
+                        AXSwitchModule,
+                        AXPSchemaModule,
+                        AXTooltipModule,
+                        AXBreadcrumbsModule,
+                        //
+                        AXPCommonWidgetModule,
+                        AXPStickyDirective,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        @for(tab of (loader.sections$ | async); track tab.name)\n        {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\n          [disabled]=\"editForm.context\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content #content class=\"ax-overflow-x-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n    >\n      <div\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-pt-3 -ax-mx-6'\"\n        [stickyParent]=\"content.getHostElement()\"\n      >\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  <ax-button-item\n                    text=\"Create New One\"\n                    class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  <ax-button-item\n                    text=\"Delete\"\n                    class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item\n            [text]=\"tab.title\"\n            [active]=\"isActive(tab)\"\n            (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"\n          >\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\"\n                  >\n                    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"\n                      section.options?.showPropTitle == false\n                        ? 'ax-col-span-12'\n                        : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\n                    \"\n                  >\n                    <axp-widget-renderer\n                      [schema]=\"prop.schema\"\n                      [context]=\"context()\"\n                      [prop]=\"prop\"\n                      [mode]=\"'view'\"\n                    ></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i2$3.AXUnsubscriber }], propDecorators: { drawer: [{
+                type: ViewChild,
+                args: ['drawer']
+            }] } });
+
+class AXPEntityDetailLoaderDefault {
+    constructor(config, store, entityData, formatService) {
+        this.config = config;
+        this.store = store;
+        this.entityData = entityData;
+        this.formatService = formatService;
+        this._currentSection = 'default';
+        this._sections$ = new BehaviorSubject(this.sections);
+        //****************** Properties ******************//
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get data() {
+        return this.entityData;
+    }
+    get view() {
+        return (this.entity.views.detailView ?? this.entity.views.quickView);
+    }
+    //****************** Titles ******************//
+    get title() {
+        const suggestedProps = this.entity.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
+        let suggestedFormat = 'Item #{{id}}';
+        if (suggestedProps)
+            suggestedFormat = `{{${suggestedProps.name}}}`;
+        const title = this.formatService.format(this.entity.formats?.header ?? this.entity.formats?.default ?? suggestedFormat, 'string', this.data);
+        return title;
+    }
+    get sectionTitle() {
+        return `${this.entity.title}`;
+    }
+    //****************** Sections ******************//
+    get sections() {
+        return this.view.root.sections?.length
+            ? this.view.root.sections
+            : [
+                {
+                    name: 'default',
+                    title: 'Default',
+                    properties: this.view.root.properties,
+                },
+            ];
+    }
+    get sections$() {
+        return this._sections$.pipe(defaultIfEmpty([]));
+    }
+    get section$() {
+        return this.sections$.pipe(switchMap((sections) => {
+            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
+            if (!section.sections?.length) {
+                section.sections = [
+                    {
+                        name: 'default',
+                        title: 'Details',
+                        properties: section.properties,
+                    },
+                ];
+            }
+            return of(section);
+        }));
+    }
+    get hasSections$() {
+        return this.sections$.pipe(map((c) => c.length > 1));
+    }
+    setSection(name) {
+        this._currentSection = name ?? 'default';
+        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
+            name: 'default',
+            title: 'Default',
+            properties: this.view.root.properties,
+        };
+        const currentSections = this._sections$.value;
+        const updatedSections = currentSections.map((section) => {
+            if (section.name === updatedSection.name) {
+                return updatedSection;
+            }
+            else {
+                return section;
+            }
+        });
+        this._sections$.next(updatedSections);
+    }
+    //****************** Update ******************//
+    async update(values) {
+        assign(this.data, values);
+        this.setSection(this._currentSection);
+    }
+}
+class AXPEntityDetailViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.formatService = inject(AXFormatService);
+        this.layout = inject(AXPLayoutService);
+        this.store = inject(Store);
+    }
+    async create(moduleName, entityName, id) {
+        const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(true);
+        if (config.dataSource.byKey) {
+            const data = await config.dataSource.byKey(id);
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityDetailLoaderDefault(config, this.store, data, this.formatService);
+        }
+        this.layout.setNavigationLoading(false);
+        return Promise.reject('cannot fetch ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXPCustomReuseStrategy {
+    shouldDetach(route) {
+        return false;
+    }
+    store(route, detachedTree) { }
+    shouldAttach(route) {
+        return false;
+    }
+    retrieve(route) {
+        return null;
+    }
+    shouldReuseRoute(future, curr) {
+        if (future.component === AXPEntityListViewComponent || future.component === AXPEntityDetailsViewComponent) {
+            return false;
+        }
+        return future.routeConfig === curr.routeConfig;
+    }
+}
+
+class AXPEntityEffects {
+    constructor(actions$, store) {
+        this.actions$ = actions$;
+        this.store = store;
+        this.sessionService = inject(AXPSessionService);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.entityCreateFactory = inject(AXPEntityCreateViewLoaderFactory);
+        this.entityModifyFactory = inject(AXPEntityModifyViewLoaderFactory);
+        this.popupService = inject(AXPopupService);
+        this.dialogService = inject(AXDialogService);
+        this.toastService = inject(AXToastService);
+        this.formatService = inject(AXFormatService);
+        this.platform = inject(AXPlatform);
+        this.quickView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityQuickViewAction), switchMap(async (action) => {
+            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
+            const suggestedProps = entity.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
+            let suggestedFormat = 'Item #{{id}}';
+            if (suggestedProps)
+                suggestedFormat = `{{${suggestedProps.name}}}`;
+            const title = this.formatService.format(entity.formats?.header ?? entity.formats?.default ?? suggestedFormat, 'string', action.payload.data);
+            //
+            const com = await Promise.resolve().then(function () { return entityQuickView_component; });
+            this.popupService.open(com.AXPEntityQuickViewComponent, {
+                title: `${title} - Quick View`,
+                size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+                data: {
+                    entity: entity,
+                    data: action.payload.data,
+                },
+            });
+            return of();
+        })), { dispatch: false });
+        this.detailView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityDetailViewAction), switchMap(async (action) => {
+            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
+            this.store.dispatch(AXPNavigateAction$1({
+                payload: {
+                    commands: `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/${action.payload.id}/view`,
+                },
+            }));
+            return of();
+        })), { dispatch: false });
+        this.listView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityListViewAction), switchMap(async (action) => {
+            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
+            this.store.dispatch(AXPNavigateAction$1({
+                payload: {
+                    commands: `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/list`,
+                },
+            }));
+            return of();
+        })), { dispatch: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects, deps: [{ token: i1$5.Actions }, { token: i2$4.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i2$4.Store }] });
+
+class AXPAdminLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, imports: [i2$4.StoreFeatureModule, i1$5.EffectsFeatureModule, AXPAdminRootLayoutModule,
+            AXPListViewModule, i3$4.AXPWorkflowModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, providers: [{ provide: RouteReuseStrategy, useClass: AXPCustomReuseStrategy }], imports: [StoreModule.forFeature(AXPLayoutFeature),
+            EffectsModule.forFeature([AXPLayoutEffects, AXPEntityEffects]),
+            AXPAdminRootLayoutModule,
+            AXPListViewModule,
+            AXPWorkflowModule.forChild({
+                actions: {
+                    AXPEntityPerformDeleteAction,
+                    AXPEntityModifyPopupAction,
+                    AXPEntityModifyConfirmedAction,
+                    AXPEntityCreatePopupAction,
+                    AXPEntityCreateSubmittedAction,
+                },
+                workflows: {
+                    'delete-entity': AXPDeleteEntityWorkflow,
+                    'modify-entity': AXPModifyEntityWorkflow,
+                    'create-entity': AXPCreateEntityWorkflow,
+                },
+                functions: {
+                    test: AXPMyCustomFunc,
+                },
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        StoreModule.forFeature(AXPLayoutFeature),
+                        EffectsModule.forFeature([AXPLayoutEffects, AXPEntityEffects]),
+                        AXPAdminRootLayoutModule,
+                        AXPListViewModule,
+                        AXPWorkflowModule.forChild({
+                            actions: {
+                                AXPEntityPerformDeleteAction,
+                                AXPEntityModifyPopupAction,
+                                AXPEntityModifyConfirmedAction,
+                                AXPEntityCreatePopupAction,
+                                AXPEntityCreateSubmittedAction,
+                            },
+                            workflows: {
+                                'delete-entity': AXPDeleteEntityWorkflow,
+                                'modify-entity': AXPModifyEntityWorkflow,
+                                'create-entity': AXPCreateEntityWorkflow,
+                            },
+                            functions: {
+                                test: AXPMyCustomFunc,
+                            },
+                        }),
+                    ],
+                    exports: [],
+                    declarations: [],
+                    providers: [{ provide: RouteReuseStrategy, useClass: AXPCustomReuseStrategy }],
+                }]
+        }] });
+
+const AXPListViewLoaderResolver = (route, state, service = inject(AXPListViewLoaderFactory)) => {
+    const appName = route.parent?.paramMap.get('app');
+    const moduleName = route.parent?.paramMap.get('module');
+    const entityName = route.paramMap.get('entity');
+    // console.log(appName, moduleName, entityName);
+    //
+    return service.create(moduleName, entityName);
+};
+const AXPEntityDetailViewLoaderResolver = (route, state, service = inject(AXPEntityDetailViewLoaderFactory)) => {
+    const appName = route.parent?.paramMap.get('app');
+    const moduleName = route.parent?.paramMap.get('module');
+    const entityName = route.paramMap.get('entity');
+    const id = route.paramMap.get('id');
+    // console.log(appName, moduleName, entityName, id);
+    //
+    return service.create(moduleName, entityName, id);
+};
+
+const AX_ADMIN_ROUTES = [
+    {
+        path: ':app',
+        canActivate: [AXPAuthGuard],
+        children: [
+            {
+                path: ':module',
+                children: [
+                    {
+                        path: 'e/:entity/:id/view/:section',
+                        resolve: { loader: AXPEntityDetailViewLoaderResolver },
+                        component: AXPEntityDetailsViewComponent,
+                    },
+                    {
+                        path: 'e/:entity/:id/view',
+                        resolve: { loader: AXPEntityDetailViewLoaderResolver },
+                        component: AXPEntityDetailsViewComponent,
+                    },
+                    {
+                        path: 'e/:entity',
+                        redirectTo: ':entity/list',
+                        pathMatch: 'full',
+                    },
+                    {
+                        path: 'e/:entity/list',
+                        component: AXPEntityListViewComponent,
+                        resolve: { loader: AXPListViewLoaderResolver },
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+const routes = [
+    {
+        path: 'offline',
+        loadComponent: () => Promise.resolve().then(function () { return errorOffline_component; }).then(c => c.AXPErrorOfflineComponent),
+    },
+    {
+        path: '404',
+        loadComponent: () => Promise.resolve().then(function () { return error404_component; }).then(c => c.AXPError404Component),
+    },
+    {
+        path: '401',
+        loadComponent: () => Promise.resolve().then(function () { return error401_component; }).then(c => c.AXPError401Component),
+    },
+];
+
+class AXPThemeSlotComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.isDark = this.store.select(isDarkTheme());
+    }
+    switchMode() {
+        this.store.dispatch(AXPLayoutThemeDarkToggleAction());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <ax-button color="default" look="blank" (onClick)="switchMode()">
+        <ax-icon>
+            <i class="fa-solid fa-brightness ax-text-slate-400 dark:ax-text-slate-200" *ngIf="isDark | async"></i>
+            <i class="fa-solid fa-moon ax-text-slate-400 dark:ax-text-slate-200" *ngIf="!(isDark | async)"></i>
+        </ax-icon>
+        </ax-button>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ax-button color="default" look="blank" (onClick)="switchMode()">
+        <ax-icon>
+            <i class="fa-solid fa-brightness ax-text-slate-400 dark:ax-text-slate-200" *ngIf="isDark | async"></i>
+            <i class="fa-solid fa-moon ax-text-slate-400 dark:ax-text-slate-200" *ngIf="!(isDark | async)"></i>
+        </ax-icon>
+        </ax-button>
+    `,
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule
+                    ]
+                }]
+        }] });
+
+class AXPLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, imports: [i1.RouterModule, i2.AXPCommonModule, i2.AXPComponentSlotModule, i3$4.AXPWorkflowModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, imports: [RouterModule.forChild(routes),
+            AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
+            AXPComponentSlotModule.forChild({
+                'header-end': [
+                    {
+                        name: 'theme',
+                        component: AXPThemeSlotComponent,
+                    },
+                ],
+            }),
+            AXPWorkflowModule.forChild({
+                actions: {
+                    AXPNavigateAction,
+                    AXPDialogConfirmAction,
+                    AXPToastAction,
+                    AXPShowDetailViewAction,
+                    AXPShowListViewAction,
+                },
+            }), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RouterModule.forChild(routes),
+                        AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
+                        AXPComponentSlotModule.forChild({
+                            'header-end': [
+                                {
+                                    name: 'theme',
+                                    component: AXPThemeSlotComponent,
+                                },
+                            ],
+                        }),
+                        AXPWorkflowModule.forChild({
+                            actions: {
+                                AXPNavigateAction,
+                                AXPDialogConfirmAction,
+                                AXPToastAction,
+                                AXPShowDetailViewAction,
+                                AXPShowListViewAction,
+                            },
+                        }),
+                    ],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXEntityLoaderDefault, AXMWorkflowErrorHandler, AXPAdminChildFeaturesListComponent, AXPAdminChildLayoutComponent, AXPAdminChildLayoutModule, AXPAdminHeaderComponent, AXPAdminLayoutComponent, AXPAdminLayoutModule, AXPAdminRootLayoutModule, AXPCommonWidgetModule, AXPContentViewComponent, AXPCustomReuseStrategy, AXPDialogConfirmAction, AXPEntityCreateCustomViewComponent, AXPEntityDetailLoaderDefault, AXPEntityDetailViewLoaderFactory, AXPEntityDetailViewLoaderResolver, AXPEntityDetailsViewComponent, AXPEntityListViewComponent, AXPEntityListViewConfigEmpty, AXPEntityQuickViewComponent, AXPEntityRegistryService, AXPError401Component, AXPError404Component, AXPErrorOfflineComponent, AXPFooterTextSlotComponent, AXPLayoutModule, AXPLayoutService, AXPListViewLoaderDefault, AXPListViewLoaderFactory, AXPListViewLoaderResolver, AXPListViewModule, AXPListViewOptionConditionsComponent, AXPListViewOptionFilterOperatorComponent, AXPListViewOptionSortingComponent, AXPListViewOptionsColumnsComponent, AXPLogoComponent, AXPNavBarSlotComponent, AXPNavigateAction, AXPRedirectEvent, AXPShowDetailViewAction, AXPShowListViewAction, AXPToastAction, AXP_ENTITY_LOADER, AXP_LISTVIEW_LOADER, AX_ADMIN_ROUTES, convertPropertiesToColumns, convertPropertyToColumn, widgetSchemas };
+//# sourceMappingURL=acorex-platform-layouts.mjs.map