@acorex/platform 18.0.0 → 18.0.2

package/fesm2022/acorex-platform-layouts.mjs

@@ -1,1826 +1,834 @@
+import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
+import { AXBasePageComponent } from '@acorex/components/page';
+import { AXToastService } from '@acorex/components/toast';
+import * as i2$1 from '@acorex/core/utils';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i10$1 from '@acorex/platform/common';
+import { AXPSchemaRegistryService, EQ_OPER, isSmallScreen, AXPEntityRegistryService, AXPLayoutService, AXP_MENU_LOADER, AXPLayoutChildDrawerToggle, convertPropertiesToColumns, AXPSchemaModule, AXPCommonWidgetModule, AXPEntityListViewConfigEmpty, AXPWorkflowNavigateAction, getChildDrawer, AXPLayoutChildDrawerClose, AXPStickyDirective, AXPCommonModule, AXMWorkflowErrorHandler, AXPDialogConfirmAction, AXPToastAction } from '@acorex/platform/common';
+import * as i15 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectorRef, NgModule, ViewEncapsulation, signal, computed, Input, HostListener, InjectionToken, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, Injector } from '@angular/core';
-import * as i1$6 from '@ngrx/store';
-import { createAction, createFeature, createReducer, on, createSelector, Store, StoreModule } from '@ngrx/store';
-import { fromEvent, debounceTime, map, withLatestFrom, mergeMap, of, filter, first, BehaviorSubject, timer, defaultIfEmpty, switchMap } from 'rxjs';
-import * as i2$5 from '@acorex/platform/common';
-import { AXPNavigateAction as AXPNavigateAction$1, AXPLoadInitState, AXP_MENU_LOADER, AXPRouteUtilityService, AXPComponentLogoConfig, AXPFontIconLogoConfig, AXPImageUrlLogoConfig, AXPTextLogoConfig, AXP_PLATFORM_CONFIG_TOKEN, AXPStickyDirective, AXPCommonModule } from '@acorex/platform/common';
-import * as i3$3 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 { inject, signal, computed, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewEncapsulation, ChangeDetectorRef, ViewChild, Injectable, NgModule, InjectionToken } from '@angular/core';
+import { cloneDeep, assign } from 'lodash-es';
+import * as i1 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 i2$1 from '@acorex/components/button';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i3 from '@acorex/components/decorators';
+import * as i4$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXDialogModule, AXDialogService } from '@acorex/components/dialog';
-import * as i4 from '@acorex/components/drawer';
-import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i3$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 from '@acorex/platform/layout';
-import { AXPComponentSlotModule } from '@acorex/platform/layout';
-import * as i2$4 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$2 from '@acorex/components/image';
-import { AXImageModule } from '@acorex/components/image';
-import { merge, cloneDeep, assign } from 'lodash-es';
-import { AXPopupService } from '@acorex/components/popup';
-import { AXToastService, AXToastModule } from '@acorex/components/toast';
-import { AXFormatService } from '@acorex/core/format';
-import * as i3$5 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 * as i5 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i6 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$3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i8$1 from '@acorex/components/switch';
+import * as i7 from '@acorex/components/image';
+import { AXImageModule } from '@acorex/components/image';
+import * as i8 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
-import * as i6 from '@acorex/components/select-box';
+import * as i9 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i10 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i4$1 from '@acorex/components/text-box';
+import * as i11 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i7 from '@acorex/components/label';
+import * as i7$1 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i4$2 from '@acorex/components/selection-list';
+import * as i13 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 * as i1$4 from '@acorex/components/action-sheet';
+import { Store } from '@ngrx/store';
+import { of, first, map, BehaviorSubject, defaultIfEmpty, switchMap } from 'rxjs';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i1$1 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 * as i11$1 from '@acorex/components/drawer';
+import { AXDrawerModule } from '@acorex/components/drawer';
+import * as i3 from '@acorex/core/platform';
+import { AXPlatform } from '@acorex/core/platform';
+import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy } from '@angular/router';
+import * as i1$3 from '@acorex/platform/workflow';
+import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowFunction, AXPWorkflowService, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
+import { AXFormatService } from '@acorex/core/format';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import * as i10$2 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i12 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i14$1 from '@acorex/platform/auth';
+import { AXPAuthModule, AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
+import { AXCollapseModule } from '@acorex/components/collapse';
 import { AXCommonModule, AXDataSource } from '@acorex/components/common';
-import * as i3$4 from '@acorex/components/form';
+import * as i2$2 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXListModule } from '@acorex/components/list';
+import { AXLoadingModule } from '@acorex/components/loading';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i6$2 from '@acorex/components/breadcrumbs';
+import * as i1$2 from '@ngrx/effects';
+import { ofType as ofType$1 } from '@ngrx/effects';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 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: "18.0.2", ngImport: i0, type: AXPLayoutEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutEffects }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutEffects, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPAdminChildLayoutComponent {
+class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
     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 ?? []);
-            }
+        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);
         });
     }
-    handleMenuClick(e, item) {
-        if (item.command) {
-            this.store.dispatch(item.command);
-        }
-        else if (item.path) {
-            this.store.dispatch(AXPNavigateAction$1({ payload: { commands: item.path } }));
+    //****************** Columns ******************//
+    updateColumnItem(event, colName) {
+        if (event.isUserInteraction) {
+            this.columns.update((prevCols) => prevCols.map((col) => (col.name === colName ? { ...col, visible: event.value } : col)));
         }
     }
-    handleCollapsedChange(value) {
-        if (value)
-            this.store.dispatch(AXPLayoutChildDrawerClose());
+    //****************** Sorts ******************//
+    updateSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.map((sort) => (sort.name === item.name ? { ...sort, dir: sort.dir == 'asc' ? 'desc' : 'asc' } : sort)));
     }
-    ngOnDestroy() {
-        this.routeParamSub?.unsubscribe();
+    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' }]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminChildLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: "18.0.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();
-        });
+    removeSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.filter((sort) => item.name != sort.name));
     }
-    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 } } }));
-            }
-        });
+    //****************** Conditions ******************//
+    getSchema(name) {
+        return this.props().find((c) => c.name == name)?.schema ?? '';
     }
-    handleMenuClick(e, item) {
-        if (item.command) {
-            this.store.dispatch(item.command);
-        }
-        else if (item.path) {
-            this.store.dispatch(AXPNavigateAction$1({ payload: { commands: item.path } }));
-        }
+    getOperators(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.operators ?? [];
     }
-    ngOnDestroy() {
-        this.routeParamSub?.unsubscribe();
-        this.firstMenuSub?.unsubscribe();
+    getDefaultOperator(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminChildFeaturesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: "18.0.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: "18.0.2", ngImport: i0, type: AXPAdminChildLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.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: "18.0.2", ngImport: i0, type: AXPAdminChildLayoutModule, imports: [CommonModule,
-            RouterModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXBadgeModule,
-            AXDrawerModule,
-            AXDialogModule,
-            AXLoadingModule,
-            AXTabsModule,
-            AXButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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());
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
     }
-    menuClick() {
-        this.store.dispatch(AXPLayoutRootDrawerToggle());
+    resetSelectedFieldNames() {
+        this.selectedConditionNames = this.conditions().map((c) => c.name);
     }
-    logoClick() {
-        this.router.navigate(['/']);
+    addCondition() {
+        const conditions = this.selectedConditionNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                operator: opr.name,
+            };
+        });
+        this.conditions.set(conditions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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))}.profile-menus ul li:hover:is(.ax-dark *){--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: "18.0.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))}.profile-menus ul li:hover:is(.ax-dark *){--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));
+    removeCondition(item) {
+        this.conditions.update((prevConditions) => prevConditions.filter((con) => con.name != item.name));
     }
-    onResize() {
-        this.windowWidth.set(window.innerWidth);
+    //****************** 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;
+        }
     }
-    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);
-            }
-        });
+    changeViewNameToggle() {
+        this.showNameInput.update((prev) => !prev);
     }
-    toggleCollapse(collapsed) {
-        this.isOpen = !collapsed;
+    generateViewName(title) {
+        return title.replace(/\s+/g, '-').toLowerCase();
     }
-    itemClick(fragment) {
-        if (fragment) {
-            this.router.navigate([], {
-                relativeTo: this.route,
-                fragment: fragment,
+    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 });
+        }
     }
-    ngOnDestroy() {
-        this.fragmentSubscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPContentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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: "18.0.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$;
+    handleResetClick() {
+        this.conditions.set(cloneDeep(this.selectedView.conditions));
+        this.columns.set(cloneDeep(this.selectedView.columns));
+        this.sorts.set(cloneDeep(this.selectedView.sorts));
     }
-    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: "18.0.2", ngImport: i0, type: AXPError401Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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: i2$1.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: "18.0.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>" }]
-        }] });
-
-var error401_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPError401Component: AXPError401Component
-});
-
-class AXPError404Component {
-    constructor() {
-        this.sessionService = inject(AXPSessionService);
-        this.router = inject(Router);
+    handleDiscardClick() {
+        this.close({ save: false });
     }
-    goHome() {
-        this.router.navigate([`/${this.sessionService.application?.name}/home`]);
+    handleCancelClick() {
+        this.close({ save: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPError404Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: i2$1.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: "18.0.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: "18.0.2", ngImport: i0, type: AXPErrorOfflineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: i2$1.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: "18.0.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;
-        }
+    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: "18.0.2", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { classAttribute: "ax-flex ax-justify-center" }, ngImport: i0, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold 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$2.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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\">\r\n  <div class=\"ax-flex ax-items-center\">\r\n    @if (showNameInput() && mode==='create') {\r\n    <div class=\"ax-w-60\">\r\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\r\n        @if(showNameInput()){\r\n        <ax-suffix>\r\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\r\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\r\n          </ax-button>\r\n        </ax-suffix>\r\n        }\r\n      </ax-text-box>\r\n    </div>\r\n    }@else {\r\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\r\n    } @if (mode===\"create\") {\r\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\r\n      @if(!showNameInput() ){\r\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\r\n      }\r\n    </ax-button>\r\n    }\r\n  </div>\r\n  <ax-close-button></ax-close-button>\r\n</ax-header>\r\n<div class=\"ax-p-4\">\r\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\r\n    <ax-tab-item text=\"Columns\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"drop('columns', $event)\"\r\n        >\r\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\r\n            <ng-container *ngFor=\"let item of columns()\">\r\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n                </div>\r\n                <ax-switch\r\n                  class=\"ax-sm\"\r\n                  [(ngModel)]=\"item.visible\"\r\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\r\n                ></ax-switch>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Conditions\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!conditions().length\"\r\n        >\r\n          @if(!conditions().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to filter</span\r\n            >\r\n          </div>\r\n          } @else {\r\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\r\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              @for(item of conditions(); track item.name ){\r\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n                  @if(getOperatorTitle(item.name,item.operator)){\r\n                  <ax-badge\r\n                    class=\"ax-text-xs\"\r\n                    color=\"primary\"\r\n                    [look]=\"'twotone'\"\r\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n                  ></ax-badge>\r\n                  }\r\n                </div>\r\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                  <div class=\"ax-w-full\">\r\n                    <axp-widget-filter-renderer\r\n                      [schema]=\"getSchema(item.name)\"\r\n                      [prop]=\"loader.getProp(item.name)\"\r\n                      [(value)]=\"item.value\"\r\n                      [(operator)]=\"item.operator\"\r\n                    >\r\n                    </axp-widget-filter-renderer>\r\n                  </div>\r\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\r\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n                  </ax-button>\r\n                </div>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(conditions().length){\r\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n              </div>\r\n              }\r\n              <ax-popover\r\n                #conditionsPopover\r\n                [target]=\"addField\"\r\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\r\n                [offsetY]=\"8\"\r\n                [openOn]=\"'toggle'\"\r\n                [closeOn]=\"'clickOut'\"\r\n                [adaptivityEnabled]=\"true\"\r\n                (onOpened)=\"resetSelectedFieldNames()\"\r\n              >\r\n                <div\r\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\r\n                >\r\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n                  </div>\r\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\r\n                    <ax-selection-list\r\n                      [valueField]=\"'name'\"\r\n                      [textField]=\"'title'\"\r\n                      [(ngModel)]=\"selectedConditionNames\"\r\n                      [direction]=\"'vertical'\"\r\n                      [items]=\"props()\"\r\n                      [multiple]=\"true\"\r\n                    ></ax-selection-list>\r\n                  </div>\r\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n                    <ax-button\r\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\r\n                      class=\"ax-sm\"\r\n                      text=\"Confirm\"\r\n                      color=\"primary\"\r\n                    >\r\n                    </ax-button>\r\n                  </div>\r\n                </div>\r\n              </ax-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Sorting\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\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]\"\r\n          [class.ax-justify-center]=\"!sorts().length\"\r\n        >\r\n          @if(!sorts().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to sort</span\r\n            >\r\n          </div>\r\n          }@else {\r\n          <div\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\r\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\r\n          >\r\n            <ng-container *ngFor=\"let item of sorts()\">\r\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\r\n                </ax-select-box>\r\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                </ax-button>\r\n\r\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\r\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n                </ax-button>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(sorts().length){\r\n              <ax-button\r\n                (onClick)=\"addSortItem()\"\r\n                color=\"primary\"\r\n                text=\"Add field\"\r\n                look=\"blank\"\r\n                class=\"ax-sm\"\r\n              ></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button\r\n                  (onClick)=\"addSortItem()\"\r\n                  color=\"primary\"\r\n                  text=\"Add field\"\r\n                  look=\"outline\"\r\n                  class=\"ax-md ax-w-56\"\r\n                ></ax-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n  </ax-tabs>\r\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\r\n</div>\r\n<ax-footer class=\"!ax-justify-end\">\r\n  @if (mode===\"edit\") {\r\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\r\n    <ax-button-item-list>\r\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\r\n        <ax-prefix>\r\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\r\n        </ax-prefix>\r\n      </ax-button-item>\r\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\r\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\r\n      ></ax-button-item>\r\n    </ax-button-item-list>\r\n  </ax-dropdown-button>\r\n  } @else {\r\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\r\n  }\r\n  <ax-button\r\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\r\n    color=\"primary\"\r\n    (onClick)=\"handleApplyClick()\"\r\n  ></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4$1.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: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8.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: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.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$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.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: i10$1.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: "18.0.2", ngImport: i0, type: AXPLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-logo', standalone: true, imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { 'class': 'ax-flex ax-justify-center' }, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold 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: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\r\n  <div class=\"ax-flex ax-items-center\">\r\n    @if (showNameInput() && mode==='create') {\r\n    <div class=\"ax-w-60\">\r\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\r\n        @if(showNameInput()){\r\n        <ax-suffix>\r\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\r\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\r\n          </ax-button>\r\n        </ax-suffix>\r\n        }\r\n      </ax-text-box>\r\n    </div>\r\n    }@else {\r\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\r\n    } @if (mode===\"create\") {\r\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\r\n      @if(!showNameInput() ){\r\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\r\n      }\r\n    </ax-button>\r\n    }\r\n  </div>\r\n  <ax-close-button></ax-close-button>\r\n</ax-header>\r\n<div class=\"ax-p-4\">\r\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\r\n    <ax-tab-item text=\"Columns\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"drop('columns', $event)\"\r\n        >\r\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\r\n            <ng-container *ngFor=\"let item of columns()\">\r\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n                </div>\r\n                <ax-switch\r\n                  class=\"ax-sm\"\r\n                  [(ngModel)]=\"item.visible\"\r\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\r\n                ></ax-switch>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Conditions\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!conditions().length\"\r\n        >\r\n          @if(!conditions().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to filter</span\r\n            >\r\n          </div>\r\n          } @else {\r\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\r\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              @for(item of conditions(); track item.name ){\r\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n                  @if(getOperatorTitle(item.name,item.operator)){\r\n                  <ax-badge\r\n                    class=\"ax-text-xs\"\r\n                    color=\"primary\"\r\n                    [look]=\"'twotone'\"\r\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n                  ></ax-badge>\r\n                  }\r\n                </div>\r\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                  <div class=\"ax-w-full\">\r\n                    <axp-widget-filter-renderer\r\n                      [schema]=\"getSchema(item.name)\"\r\n                      [prop]=\"loader.getProp(item.name)\"\r\n                      [(value)]=\"item.value\"\r\n                      [(operator)]=\"item.operator\"\r\n                    >\r\n                    </axp-widget-filter-renderer>\r\n                  </div>\r\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\r\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n                  </ax-button>\r\n                </div>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(conditions().length){\r\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n              </div>\r\n              }\r\n              <ax-popover\r\n                #conditionsPopover\r\n                [target]=\"addField\"\r\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\r\n                [offsetY]=\"8\"\r\n                [openOn]=\"'toggle'\"\r\n                [closeOn]=\"'clickOut'\"\r\n                [adaptivityEnabled]=\"true\"\r\n                (onOpened)=\"resetSelectedFieldNames()\"\r\n              >\r\n                <div\r\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\r\n                >\r\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n                  </div>\r\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\r\n                    <ax-selection-list\r\n                      [valueField]=\"'name'\"\r\n                      [textField]=\"'title'\"\r\n                      [(ngModel)]=\"selectedConditionNames\"\r\n                      [direction]=\"'vertical'\"\r\n                      [items]=\"props()\"\r\n                      [multiple]=\"true\"\r\n                    ></ax-selection-list>\r\n                  </div>\r\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n                    <ax-button\r\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\r\n                      class=\"ax-sm\"\r\n                      text=\"Confirm\"\r\n                      color=\"primary\"\r\n                    >\r\n                    </ax-button>\r\n                  </div>\r\n                </div>\r\n              </ax-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Sorting\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\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]\"\r\n          [class.ax-justify-center]=\"!sorts().length\"\r\n        >\r\n          @if(!sorts().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to sort</span\r\n            >\r\n          </div>\r\n          }@else {\r\n          <div\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\r\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\r\n          >\r\n            <ng-container *ngFor=\"let item of sorts()\">\r\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\r\n                </ax-select-box>\r\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                </ax-button>\r\n\r\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\r\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n                </ax-button>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(sorts().length){\r\n              <ax-button\r\n                (onClick)=\"addSortItem()\"\r\n                color=\"primary\"\r\n                text=\"Add field\"\r\n                look=\"blank\"\r\n                class=\"ax-sm\"\r\n              ></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button\r\n                  (onClick)=\"addSortItem()\"\r\n                  color=\"primary\"\r\n                  text=\"Add field\"\r\n                  look=\"outline\"\r\n                  class=\"ax-md ax-w-56\"\r\n                ></ax-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n  </ax-tabs>\r\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\r\n</div>\r\n<ax-footer class=\"!ax-justify-end\">\r\n  @if (mode===\"edit\") {\r\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\r\n    <ax-button-item-list>\r\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\r\n        <ax-prefix>\r\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\r\n        </ax-prefix>\r\n      </ax-button-item>\r\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\r\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\r\n      ></ax-button-item>\r\n    </ax-button-item-list>\r\n  </ax-dropdown-button>\r\n  } @else {\r\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\r\n  }\r\n  <ax-button\r\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\r\n    color=\"primary\"\r\n    (onClick)=\"handleApplyClick()\"\r\n  ></ax-button>\r\n</ax-footer>\r\n" }]
+        }], propDecorators: { loader: [{
                 type: Input
-            }] } });
-
-class AXPFooterTextSlotComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPFooterTextSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: "18.0.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: [{
+            }], mode: [{
                 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: "18.0.2", ngImport: i0, type: AXPNavBarSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: "18.0.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: [{
+            }], selectedView: [{
                 type: Input
             }] } });
 
-class AXPThemeSlotComponent {
+class AXPListViewOptionsColumnsComponent {
     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: "18.0.2", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: i2$1.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: "18.0.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
-                    ]
-                }]
-        }] });
-
-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
+        this.isSM = this.store.select(isSmallScreen());
+        this.columns$ = of([]);
+        this.onClosed = new EventEmitter();
     }
-    /**
-     * 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);
+    ngOnInit() {
+        this.columns$ = this.loader.displayColumns$;
     }
-    /**
-     * 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}`);
-            }
+    handleVisibilityChange(e, name) {
+        if (e.isUserInteraction) {
+            this.loader.setColumnVisibility(name, e.value);
         }
-        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}`;
+    drop(event) {
+        this.columns$.pipe(first()).subscribe((columns) => {
+            moveItemInArray(columns, event.previousIndex, event.currentIndex);
+        });
+    }
+    handleClose() {
+        this.onClosed.emit();
+    }
+    handleResetClick() {
+        this.loader.resetColumns();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityRegistryService, providedIn: 'root' }); }
+    handleApplyClick() {
+        this.columns$.pipe(first()).subscribe((data) => {
+            this.loader.updateColumns(data);
+        });
+        this.onClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\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\">\r\n    <ng-container *ngFor=\"let item of columns$ | async\">\r\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n        </div>\r\n        <ax-switch\r\n          class=\"ax-sm\"\r\n          [ngModel]=\"item.visible\"\r\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\r\n        ></ax-switch>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.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.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.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-list-view-option-columns', template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\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\">\r\n    <ng-container *ngFor=\"let item of columns$ | async\">\r\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n        </div>\r\n        <ax-switch\r\n          class=\"ax-sm\"\r\n          [ngModel]=\"item.visible\"\r\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\r\n        ></ax-switch>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+        }], propDecorators: { loader: [{
+                type: Input
+            }], onClosed: [{
+                type: Output
+            }] } });
 
-class AXPLayoutService {
+class AXPListViewOptionConditionsComponent {
     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);
-                    }
-                });
-            }
-        }
+        this.onClosed = new EventEmitter();
+        this.schemaRegistery = inject(AXPSchemaRegistryService);
+        this.popopService = inject(AXPopupService);
+        this.isSM = false;
+        this.props$ = of([]);
+        this.props = [];
+        this.conditions$ = of([]);
+        this.selectedFieldNames = [];
     }
-    updateNavigationLoadingState(state) {
-        if (state !== this.navigationLoadingStateActive) {
-            this.navigationLoadingStateActive = state;
-            this.navigationLoadingSubject.next(state);
-        }
+    onNameChange(item) {
+        console.log('onName changed!', item);
     }
-    get overlayLoading$() {
-        return this.overlayLoadingSubject.asObservable();
+    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;
+        });
     }
-    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);
-                    }
-                });
-            }
-        }
+    getOperators(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.operators ?? [];
     }
-    updateOverlayLoadingState(state) {
-        if (state !== this.overlayLoadingStateActive) {
-            this.overlayLoadingStateActive = state;
-            this.overlayLoadingSubject.next(state);
-        }
+    getDefaultOperator(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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);
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
     }
-    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);
-        }
+    getSchema(name) {
+        return this.props.find((c) => c.name == name)?.schema ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNavigateAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNavigateAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNavigateAction, decorators: [{
-            type: Injectable
-        }] });
-class AXPDialogConfirmAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.dialogService = inject(AXDialogService);
+    drop(event) {
+        this.conditions$.pipe(first()).subscribe((conditions) => {
+            console.log('conditions: ', conditions);
+            moveItemInArray(conditions, event.previousIndex, event.currentIndex);
+        });
     }
-    async execute(context) {
-        context.setOutput('deleteConfirmed', false);
-        const dialogResult = await this.dialogService.confirm(this.title, this.message, this.type);
-        context.setOutput('deleteConfirmed', dialogResult.result);
+    handleClose() {
+        this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDialogConfirmAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDialogConfirmAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDialogConfirmAction, decorators: [{
-            type: Injectable
-        }] });
-class AXPToastAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.toastService = inject(AXToastService);
+    handleRemoveCondition(item) {
+        this.selectedFieldNames = this.selectedFieldNames.filter((i) => i !== item.name);
+        this.loader.removeCondition(item);
     }
-    async execute(context) {
-        this.toastService.show({
-            color: this.color,
-            title: this.title,
-            content: this.content,
-            closeButton: true,
-            timeOut: 3000,
-            timeOutProgress: true,
+    resetSelectedFieldNames() {
+        this.conditions$.pipe(first()).subscribe((initialConditions) => {
+            this.selectedFieldNames = initialConditions.map((i) => i.name);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPToastAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPToastAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPToastAction, decorators: [{
-            type: Injectable
-        }] });
-class AXPShowDetailViewAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.navigation = inject(AXPNavigateAction);
-        this.sessionService = inject(AXPSessionService);
+    handleResetClick() {
+        this.loader.resetConditions();
     }
-    async execute(context) {
-        const payload = context.getVariable('payload');
-        const id = context.getVariable('id');
-        const newPayload = {
-            commands: `/${this.sessionService.application?.name}/${payload.module}/e/${payload.entity}/${id}/view`,
-        };
-        context.setVariable('payload', newPayload);
-        this.navigation.execute(context);
+    onConfirmFields() {
+        const fileds = this.selectedFieldNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                opr: opr.name,
+            };
+        });
+        this.loader.addCondition(fileds);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
-            type: Injectable
-        }] });
-class AXPShowQuickViewAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.entityRegistery = inject(AXPEntityRegistryService);
-        this.formatService = inject(AXFormatService);
-        this.popupService = inject(AXPopupService);
-        this.platform = inject(AXPlatform);
-    }
-    async execute(context) {
-        const payload = context.getVariable('payload');
-        const entity = await this.entityRegistery.resolve(payload.module, 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', 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: payload.data,
-            },
+    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: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction, 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: "18.0.2", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\r\n>\r\n  @if(!(conditions$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\r\n  </div>\r\n  } @else {\r\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n      @for(item of conditions$ | async; track item.name ){\r\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n          @if(getOperatorTitle(item.name,item.operator)){\r\n          <ax-badge\r\n            class=\"ax-text-xs\"\r\n            color=\"primary\"\r\n            [look]=\"'twotone'\"\r\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n          ></ax-badge>\r\n          }\r\n        </div>\r\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n          <div class=\"ax-w-full\">\r\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\r\n            <axp-widget-filter-renderer\r\n              [schema]=\"getSchema(item.name)\"\r\n              [prop]=\"loader.getProp(item.name)\"\r\n              [(value)]=\"item.value\"\r\n              [(operator)]=\"item.operator\"\r\n            >\r\n            </axp-widget-filter-renderer>\r\n          </div>\r\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\r\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((conditions$ | async)?.length){\r\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n    <ax-popover\r\n      #fieldsPopover\r\n      [target]=\"addField\"\r\n      [openOn]=\"'toggle'\"\r\n      [closeOn]=\"'clickOut'\"\r\n      [adaptivityEnabled]=\"true\"\r\n      (onOpened)=\"resetSelectedFieldNames()\"\r\n      [offsetX]=\"15\"\r\n    >\r\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\r\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n        </div>\r\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\r\n          <ax-selection-list\r\n            [valueField]=\"'name'\"\r\n            [textField]=\"'title'\"\r\n            [(ngModel)]=\"selectedFieldNames\"\r\n            [direction]=\"'vertical'\"\r\n            [items]=\"props\"\r\n            [multiple]=\"true\"\r\n          ></ax-selection-list>\r\n        </div>\r\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n    </ax-popover>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.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: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.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: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\r\n>\r\n  @if(!(conditions$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\r\n  </div>\r\n  } @else {\r\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n      @for(item of conditions$ | async; track item.name ){\r\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n          @if(getOperatorTitle(item.name,item.operator)){\r\n          <ax-badge\r\n            class=\"ax-text-xs\"\r\n            color=\"primary\"\r\n            [look]=\"'twotone'\"\r\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n          ></ax-badge>\r\n          }\r\n        </div>\r\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n          <div class=\"ax-w-full\">\r\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\r\n            <axp-widget-filter-renderer\r\n              [schema]=\"getSchema(item.name)\"\r\n              [prop]=\"loader.getProp(item.name)\"\r\n              [(value)]=\"item.value\"\r\n              [(operator)]=\"item.operator\"\r\n            >\r\n            </axp-widget-filter-renderer>\r\n          </div>\r\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\r\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((conditions$ | async)?.length){\r\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n    <ax-popover\r\n      #fieldsPopover\r\n      [target]=\"addField\"\r\n      [openOn]=\"'toggle'\"\r\n      [closeOn]=\"'clickOut'\"\r\n      [adaptivityEnabled]=\"true\"\r\n      (onOpened)=\"resetSelectedFieldNames()\"\r\n      [offsetX]=\"15\"\r\n    >\r\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\r\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n        </div>\r\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\r\n          <ax-selection-list\r\n            [valueField]=\"'name'\"\r\n            [textField]=\"'title'\"\r\n            [(ngModel)]=\"selectedFieldNames\"\r\n            [direction]=\"'vertical'\"\r\n            [items]=\"props\"\r\n            [multiple]=\"true\"\r\n          ></ax-selection-list>\r\n        </div>\r\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n    </ax-popover>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
 
-class AXMWorkflowErrorHandler {
+class AXPListViewOptionFilterOperatorComponent {
     constructor() {
-        this.dialog = inject(AXDialogService);
+        this.visible = false;
+        this.cdr = inject(ChangeDetectorRef);
+        this._items = [];
+        this.valueChange = new EventEmitter();
     }
-    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);
-        }
+    get items() {
+        return this._items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXMWorkflowErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXMWorkflowErrorHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXMWorkflowErrorHandler, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPAdminFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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: "18.0.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);
+    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;
+                }
+            });
         });
     }
-    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 } }));
-        }
+    get value() {
+        return this._value;
     }
-    handleCollapsedChange(value) {
-        if (value)
-            this.store.dispatch(AXPLayoutRootDrawerClose());
+    set value(v) {
+        this._value = v;
+        this.valueChange.emit(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4.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", "isLoading", "text", "isCollapsed", "active"], outputs: ["textChange", "isCollapsedChange", "activeChange", "onClick"] }, { kind: "directive", type: i3$2.AXLoadingDirective, selector: "[axIsLoading]", inputs: ["axIsLoading"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "directive", type: i8.AXPPermissionDirective, selector: "[permission]", inputs: ["permission", "permissionElse"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, 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: "18.0.2", ngImport: i0, type: AXPAdminRootLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.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: "18.0.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: "18.0.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: [],
+                    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 AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
+class AXPListViewOptionSortingComponent {
     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 = [];
+        this.isSM = false;
+        this.onClosed = new EventEmitter();
+        this.props$ = of([]);
+        this.sorts$ = of([]);
     }
     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' }]);
+        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canSort != false)));
+        this.loader.sorts$.subscribe((data) => { });
+        this.sorts$ = this.loader.sorts$;
     }
-    removeSortItem(item) {
-        this.sorts.update((prevSorts) => prevSorts.filter((sort) => item.name != sort.name));
+    drop(event) {
+        this.sorts$.pipe(first()).subscribe((sorts) => {
+            moveItemInArray(sorts, event.previousIndex, event.currentIndex);
+        });
     }
-    //****************** Conditions ******************//
-    getSchema(name) {
-        return this.props().find((c) => c.name == name)?.schema ?? '';
+    changeItemSort(item) {
+        item.dir = item.dir == 'asc' ? 'desc' : 'asc';
     }
-    getOperators(name) {
-        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.operators ?? [];
+    handleClose() {
+        this.onClosed.emit();
     }
-    getDefaultOperator(name) {
-        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
+    handleResetClick() {
+        this.loader.resetSort();
     }
-    getOperatorTitle(schemaName, oprName) {
-        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
+    handleApplyClick() {
+        this.sorts$.pipe(first()).subscribe((data) => {
+            this.loader.updateSort(data);
+        });
+        this.onClosed.emit();
     }
-    resetSelectedFieldNames() {
-        this.selectedConditionNames = this.conditions().map((c) => c.name);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\r\n>\r\n  @if(!(sorts$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\r\n  </div>\r\n  }\r\n  <div\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"drop($event)\"\r\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\"\r\n  >\r\n    <ng-container *ngFor=\"let item of sorts$ | async\">\r\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n        <ax-select-box\r\n          [dataSource]=\"(props$ | async) ?? []\"\r\n          valueField=\"name\"\r\n          textField=\"title\"\r\n          [(ngModel)]=\"item.name\"\r\n        >\r\n        </ax-select-box>\r\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n        </ax-button>\r\n\r\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\r\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n        </ax-button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((sorts$ | async)?.length){\r\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button\r\n          (onClick)=\"loader.addSort()\"\r\n          color=\"primary\"\r\n          text=\"Add field\"\r\n          look=\"outline\"\r\n          class=\"ax-md ax-w-56\"\r\n        ></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.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: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-list-view-option-sorting', template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\r\n>\r\n  @if(!(sorts$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\r\n  </div>\r\n  }\r\n  <div\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"drop($event)\"\r\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\"\r\n  >\r\n    <ng-container *ngFor=\"let item of sorts$ | async\">\r\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n        <ax-select-box\r\n          [dataSource]=\"(props$ | async) ?? []\"\r\n          valueField=\"name\"\r\n          textField=\"title\"\r\n          [(ngModel)]=\"item.name\"\r\n        >\r\n        </ax-select-box>\r\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n        </ax-button>\r\n\r\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\r\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n        </ax-button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((sorts$ | async)?.length){\r\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button\r\n          (onClick)=\"loader.addSort()\"\r\n          color=\"primary\"\r\n          text=\"Add field\"\r\n          look=\"outline\"\r\n          class=\"ax-md ax-w-56\"\r\n        ></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+        }], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
+
+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';
     }
-    addCondition() {
-        const conditions = this.selectedConditionNames.map((c) => {
-            const opr = this.getDefaultOperator(c);
-            return {
-                name: c,
-                operator: opr.name,
-            };
-        });
-        this.conditions.set(conditions);
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
     }
-    removeCondition(item) {
-        this.conditions.update((prevConditions) => prevConditions.filter((con) => con.name != item.name));
+    get data() {
+        return this._data;
     }
-    //****************** 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;
-        }
+    get view() {
+        return this.entity.views.createView;
     }
-    changeViewNameToggle() {
-        this.showNameInput.update((prev) => !prev);
+    //****************** Sections ******************//
+    get sections() {
+        return this.view.root.sections?.length
+            ? this.view.root.sections
+            : [
+                {
+                    name: 'default',
+                    title: 'Default',
+                    properties: this.view.root.properties,
+                },
+            ];
     }
-    generateViewName(title) {
-        return title.replace(/\s+/g, '-').toLowerCase();
+    get sections$() {
+        return this._sections$.pipe(defaultIfEmpty([]));
     }
-    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 });
-        }
+    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);
+        }));
     }
-    handleResetClick() {
-        this.conditions.set(cloneDeep(this.selectedView.conditions));
-        this.columns.set(cloneDeep(this.selectedView.columns));
-        this.sorts.set(cloneDeep(this.selectedView.sorts));
+    get hasSections$() {
+        return this.sections$.pipe(map((c) => c.length > 1));
     }
-    handleDiscardClick() {
-        this.close({ save: false });
+    get isLast$() {
+        return this.sections$.pipe(map((c) => this.sections.length - this.sections.findIndex((c) => c.name == this._currentSection) == 1));
     }
-    handleCancelClick() {
-        this.close({ save: false });
+    get isFirst$() {
+        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection) == 0));
     }
-    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 });
+    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);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.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$2.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", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i4$1.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$2.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: "18.0.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);
+    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();
         }
     }
-    drop(event) {
-        this.columns$.pipe(first()).subscribe((columns) => {
-            moveItemInArray(columns, event.previousIndex, event.currentIndex);
-        });
-    }
-    handleClose() {
-        this.onClosed.emit();
+    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();
+        }
     }
-    handleResetClick() {
-        this.loader.resetColumns();
+}
+class AXPEntityCreateViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.formatService = inject(AXFormatService);
+        this.layout = inject(AXPLayoutService);
+        this.store = inject(Store);
     }
-    handleApplyClick() {
-        this.columns$.pipe(first()).subscribe((data) => {
-            this.loader.updateColumns(data);
-        });
-        this.onClosed.emit();
+    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: "18.0.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class AXPListViewOptionConditionsComponent {
+const AXPEntityCreateEvent = createWorkFlowEvent('[Entity] Created!');
+class AXPEntityCreatePopupAction extends AXPWorkflowAction {
     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();
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+        this.entityCreateFactory = inject(AXPEntityCreateViewLoaderFactory);
     }
-    onConfirmFields() {
-        const fileds = this.selectedFieldNames.map((c) => {
-            const opr = this.getDefaultOperator(c);
-            return {
-                name: c,
-                opr: opr.name,
-            };
+    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-BmSMt95H.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,
+            },
         });
-        this.loader.addCondition(fileds);
+        if (result.data?.save) {
+            context.setOutput('popupResult', true);
+            context.setVariable('redirect', result.data.redirect);
+            context.setVariable('id', result.data.recordId);
+        }
     }
-    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: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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 }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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$2.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$2.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: "18.0.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
-            }] } });
+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',
+        },
+    },
+};
 
-class AXPListViewOptionFilterOperatorComponent {
+const AXPEntityDeletedEvent = createWorkFlowEvent('[Entity] Deleted');
+class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
     constructor() {
-        this.visible = false;
-        this.cdr = inject(ChangeDetectorRef);
-        this._items = [];
-        this.valueChange = new EventEmitter();
-    }
-    get items() {
-        return this._items;
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.dialogService = inject(AXDialogService);
+        this.loadingDialog = inject(AXLoadingDialogService);
     }
-    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;
-                }
-            });
+    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.`);
+        }
     }
-    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: "18.0.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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: "18.0.2", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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$2.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", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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: "18.0.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
-            }] } });
-
-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: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
+            type: Injectable
         }] });
-
-const AXPEntityCreateEvent = createWorkFlowEvent('[Entity] Created!');
-class AXPEntityCreatePopupAction extends AXPWorkflowAction {
+class AXPMyCustomFunc extends AXPWorkflowFunction {
     constructor() {
         super(...arguments);
         this.entityRegistery = inject(AXPEntityRegistryService);
-        this.popupService = inject(AXPopupService);
-        this.platform = inject(AXPlatform);
-        this.entityCreateFactory = inject(AXPEntityCreateViewLoaderFactory);
+        this.dialogService = inject(AXDialogService);
     }
-    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-C3TUCnB2.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);
-        }
+    async execute(val) {
+        return val == 'abc';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPMyCustomFunc, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPMyCustomFunc }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPMyCustomFunc, 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',
+const AXPDeleteEntityWorkflow = {
+    startStepId: 'confirmDelete',
     steps: {
-        createPopup: {
-            id: 'createPopup',
-            action: 'AXPEntityCreatePopupAction',
+        confirmDelete: {
+            id: 'confirmDelete',
+            action: 'AXPDialogConfirmAction',
+            input: {
+                title: 'Warning',
+                message: `Are you sure want to delete selected item(s)?`,
+                type: 'danger',
+            },
             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: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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: "18.0.2", ngImport: i0, type: AXPMyCustomFunc, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPMyCustomFunc }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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',
+                    conditions: [
+                        {
+                            type: 'AND',
+                            conditions: [
+                                { type: 'SINGLE', expression: 'context.getOutput("deleteConfirmed") == true' },
+                                { type: 'SINGLE', expression: 'await test("abc")' },
+                            ],
+                        },
+                    ],
+                    nextStepId: 'performDelete',
                 },
             ],
         },
@@ -1900,7 +908,7 @@ class AXPEntityListViewComponent {
         //TODO: namespace, module name issues
         this.title = this.manuLoader.currentMenuItem()?.text ?? this.loader.entity.formats?.list ?? this.loader.entity.formats?.default ?? 'Title';
         //
-        this.workflow.events$.pipe(ofType$1(AXPEntityDeletedEvent, AXPEntityCreateEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
+        this.workflow.events$.pipe(ofType(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();
@@ -1943,645 +951,146 @@ class AXPEntityListViewComponent {
     async handleRowCommandClick(e) {
         switch (e.name) {
             case 'view': {
-                await this.workflow.execute('show-quick-view', {
-                    payload: {
-                        module: this.loader.entity.module,
-                        entity: this.loader.entity.name,
-                        data: e.data,
-                    },
-                });
-                break;
-            }
-            case 'edit': {
-                await this.workflow.execute('show-details', {
-                    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 = [];
-    }
-    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);
-        }
-    }
-    ngOnDestroy() {
-        this.dataSource.reset();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$4.AXActionSheetService }, { token: i2$4.AXUnsubscriber }, { token: i3$3.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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          @if(canCreate)\n          {\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          }\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          @if(canDelete)\n          {\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          }\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              <ng-container *feature=\"'axp-entity-list-custom-view'\">\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              </ng-container>\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 *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\n            [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 *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\n        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          @if(canCreate)\n          {\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          }\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          @if(canDelete)\n          {\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          }\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                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\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                  </ng-container>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\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=\"Filters\" 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 ax-h-10\">\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 ax-overflow-auto\">\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\n          [allowSorting]=\"false\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column fixed=\"end\" [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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { 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", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i2$1.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: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.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.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4.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", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i8.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { 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: "18.0.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          @if(canCreate)\n          {\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          }\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          @if(canDelete)\n          {\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          }\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              <ng-container *feature=\"'axp-entity-list-custom-view'\">\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              </ng-container>\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 *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\n            [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 *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\n        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          @if(canCreate)\n          {\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          }\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          @if(canDelete)\n          {\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          }\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                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\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                  </ng-container>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\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=\"Filters\" 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 ax-h-10\">\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 ax-overflow-auto\">\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\n          [allowSorting]=\"false\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column fixed=\"end\" [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$4.AXUnsubscriber }, { type: i3$3.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-XHN41M3T.mjs').then((c) => c.AXPTextWidgetViewComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.mjs').then((c) => c.AXPStringWidgetFilterComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-text-widget-edit.component-BrDbNXgJ.mjs').then((c) => c.AXPTextWidgetEditComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-text-widget-column.component-D8WDAbQB.mjs').then((c) => c.AXPTextWidgetColumnComponent),
-                    options: { allowResizing: true },
-                },
-            },
-            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-CmH9daul.mjs').then((c) => c.AXPLargeTextWidgetEditComponent),
-                },
-                column: {
-                    options: {
-                        width: '400px',
-                    },
-                },
-            },
-        });
-        //
-        service.register({
-            component: {
-                view: {
-                    component: () => import('./acorex-platform-layouts-number-widget-view.component-B0duuEhX.mjs').then((c) => c.AXPNumberWidgetViewComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-number-widget-filter.component-ARH7BdkE.mjs').then((c) => c.AXPNumberWidgetFilterComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-number-widget-edit.component-CXTwKvM4.mjs').then((c) => c.AXPNumberWidgetEditComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-number-widget-view.component-B0duuEhX.mjs').then((c) => c.AXPNumberWidgetViewComponent),
-                    options: { allowResizing: true },
-                },
-            },
-            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-C7EN8qDk.mjs').then((c) => c.AXPPhoneWidgetViewComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-phone-widget-column.component-BtZ5Qke0.mjs').then((c) => c.AXPPhoneWidgetColumnComponent),
-                    options: { allowResizing: true },
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-phone-widget-edit.component-BugCYS-l.mjs').then((c) => c.AXPPhoneWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.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-BZsLYW2w.mjs').then((c) => c.AXPEmailWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-email-widget-edit.component-DqnNien2.mjs').then((c) => c.AXPEmailWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.mjs').then((c) => c.AXPStringWidgetFilterComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-email-widget-column.component-CUnxKERe.mjs').then((c) => c.AXPEmailWidgetColumnComponent),
-                    options: { allowResizing: true },
-                },
-            },
-            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-CjChqiJw.mjs').then((c) => c.AXPDateTimeWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-dateTime-widget-edit.component-BLqAWdRX.mjs').then((c) => c.AXPDateTimeWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-dateTime-widget-filter.component-tvc-cTos.mjs').then((c) => c.AXPDateTimeWidgetFilterComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-dateTime-widget-column.component-D0eNN66F.mjs').then((c) => c.AXPDateTimeWidgetColumnComponent),
-                    options: {
-                        width: '200px',
-                        allowResizing: true,
-                    },
-                },
-            },
-            formats: {
-                default: 'date',
-            },
-            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-CyjhQSiV.mjs').then((c) => c.AXPToggleWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-toggle-widget-edit.component-BKbBile6.mjs').then((c) => c.AXPToggleWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-boolean-widget-filter.component-CHW4rgxA.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-toggle-widget-column.component-BjIyTuZj.mjs').then((c) => c.AXPToggleWidgetColumnComponent),
-                    options: {
-                        width: '100px',
-                        allowResizing: true
-                    },
-                },
-            },
-            filterOptions: {
-                operators: [],
-                default: EQ_OPER,
-            },
-            name: widgetSchemas.toggle,
-            dataType: 'boolean',
-        });
-        //checkbox
-        service.register({
-            component: {
-                view: {
-                    component: () => import('./acorex-platform-layouts-checkbox-widget-view.component-DQLggJ9x.mjs').then((c) => c.AXPCheckboxWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-checkbox-widget-edit.component-Cqn_QBcv.mjs').then((c) => c.AXPCheckboxWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-boolean-widget-filter.component-CHW4rgxA.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-checkbox-widget-column.component-BNEtAS7g.mjs').then((c) => c.AXPCheckboxWidgetColumnComponent),
-                    options: {
-                        width: '100px',
-                        allowResizing: true
-                    },
-                },
-            },
-            filterOptions: {
-                operators: [],
-                default: EQ_OPER,
-            },
-            name: widgetSchemas.checkbox,
-            dataType: 'boolean',
-        });
-        //password
-        service.register({
-            component: {
-                view: {
-                    component: () => import('./acorex-platform-layouts-password-widget-view.component-BaipF6fT.mjs').then((c) => c.AXPPasswordWidgetViewComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-password-widget-column.component-Cav_zCe4.mjs').then((c) => c.AXPPasswordWidgetColumnComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-password-widget-edit.component-Dm2E5zA_.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-DVlbi33v.mjs').then((c) => c.AXPFileWidgetViewComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-file-widget-column.component-f54Z9E5C.mjs').then((c) => c.AXPFileWidgetColumnComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-file-widget-edit.component-CW9ESi46.mjs').then((c) => c.AXPFileWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-file-widget-filter.component-K3mC1xLX.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-Bmp_zVcQ.mjs').then((c) => c.AXPLookupWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-lookup-widget-edit.component-B2Qyoi4Q.mjs').then((c) => c.AXPLookupWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-lookup-widget-filter.component-JJzSun3D.mjs').then((c) => c.AXPLookupWidgetFilterComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-lookup-widget-column.component-C4Bb5AYW.mjs').then((c) => c.AXPLookupWidgetColumnComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-            },
-            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-BDupWZy-.mjs').then((c) => c.AXPSelectionListWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-selection-list-widget-edit.component-DU-U-Af-.mjs').then((c) => c.AXPSelectionListWidgetEditComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-selection-list-widget-column.component-Cx9QqR9f.mjs').then((c) => c.AXPSelectionListWidgetColumnComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-selection-list-widget-filter.component-B8y8heXR.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-B_QG0YJc.mjs').then((c) => c.AXPRichTextWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-rich-text-widget-edit.component-Di1P6EQV.mjs').then((c) => c.AXPRichTextWidgetEditComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-rich-text-widget-column.component-B99s2Zhi.mjs').then((c) => c.AXPRichTextWidgetColumnComponent),
-                    options: {
-                        width: '400px',
-                    },
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.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-cB5Mq7G7.mjs').then((c) => c.AXPMapWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-map-widget-edit.component-EWlgQnx5.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-wwI7L0Kc.mjs').then((c) => c.AXPAvatarWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-avatar-widget-edit.component-a_eCmVu5.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-uciMJWYn.mjs').then((c) => c.AXPMessengerWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-messenger-widget-edit.component-C7VOe49a.mjs').then((c) => c.AXPMessengerWidgetEditComponent),
-                },
-                column: {
-                    component: () => import('./acorex-platform-layouts-messenger-widget-column.component-DWgWrdmz.mjs').then((c) => c.AXPMessengerWidgetColumnComponent),
-                    options: {
-                        allowResizing: true
-                    }
-                },
-            },
-            filterOptions: {
-                operators: [],
-                default: EQ_OPER,
+                await this.workflow.execute('show-quick-view', {
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                        data: e.data,
+                    },
+                });
+                break;
+            }
+            case 'edit': {
+                await this.workflow.execute('show-details', {
+                    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,
             },
-            name: widgetSchemas.messenger,
-            dataType: 'object',
         });
-        //
-        // gallery
-        service.register({
-            component: {
-                view: {
-                    component: () => import('./acorex-platform-layouts-gallery-widget-view.component-BqVO3rDH.mjs').then((c) => c.AXPGalleryWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-gallery-widget-edit.component-BUlkUU5u.mjs').then((c) => c.AXPGalleryWidgetEditComponent),
-                },
-                filter: {
-                    component: () => import('./acorex-platform-layouts-gallery-widget-filter.component-BYFQSXOV.mjs').then((c) => c.AXPGalleryWidgetFilterComponent),
-                },
-            },
-            filterOptions: {
-                operators: [],
-                default: EQ_OPER,
+    }
+    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 = [];
+    }
+    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',
             },
-            name: widgetSchemas.gallery,
-            dataType: 'object',
         });
-        // signature-pad
-        service.register({
-            component: {
-                view: {
-                    component: () => import('./acorex-platform-layouts-signature-pad-widget-view.component-DB903O2F.mjs').then((c) => c.AXPSignaturePadWidgetViewComponent),
-                },
-                edit: {
-                    component: () => import('./acorex-platform-layouts-signature-pad-widget-edit.component-bEDsl8mg.mjs').then((c) => c.AXPSignaturePadWidgetEditComponent),
-                },
-            },
-            filterOptions: {
-                operators: [],
-                default: EQ_OPER,
+        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',
             },
-            name: widgetSchemas.signaturePad,
-            dataType: 'object',
         });
-        //
+        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);
+        }
+    }
+    ngOnDestroy() {
+        this.dataSource.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPCommonWidgetModule, deps: [{ token: i1$3.AXPSchemaRegistryService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$1.AXActionSheetService }, { token: i2$1.AXUnsubscriber }, { token: i3.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\r\n    <ax-content class=\"ax-w-64 ax-border-e\">\r\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\r\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\r\n        <ax-side-menu>\r\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\r\n          </ng-container>\r\n        </ax-side-menu>\r\n        <ng-template #sideMenu let-item>\r\n          <ax-side-menu-item [text]=\"item.text\">\r\n            <ax-prefix>\r\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\r\n            </ax-prefix>\r\n            <ng-container *ngIf=\"item.children\">\r\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\r\n              </ng-container>\r\n            </ng-container>\r\n          </ax-side-menu-item>\r\n        </ng-template>\r\n      </div>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\r\n    <div\r\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\">\r\n      @if(platform.is('MD')){\r\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\r\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n          <span (click)=\"clearSelectedItems()\"\r\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n            Items</span>\r\n        </div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\r\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\r\n          <ax-suffix>\r\n            <i class=\"fa-solid fa-caret-down\"></i>\r\n          </ax-suffix>\r\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n            <ax-button-item-list class=\"ax-bg-surface\">\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                <ax-divider></ax-divider>\r\n                <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\r\n                  class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n              </ng-container>\r\n            </ax-button-item-list>\r\n          </ax-dropdown-panel>\r\n        </ax-button>\r\n        <div class=\"ax-flex ax-gap-2\">\r\n          @if(searchBoxTitle){\r\n          <ax-button *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\r\n            [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\r\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\r\n            (onClick)=\"conditionsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\r\n            @if ((conditionsCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\r\n            @if ((sortCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      <div *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\r\n        class=\"ax-transition-all ax-mt-4\">\r\n        <ax-search-box [title]=\"searchBoxTitle\"\r\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n      </div>\r\n      } @else {\r\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\r\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-add\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-trash\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <!-----------------------  View Mode   --------------------->\r\n        @if(this.grid?.selectedRows?.length==0) {\r\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-eye\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <i class=\"fa-solid fa-caret-down\"></i>\r\n              </ax-suffix>\r\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n                <ax-button-item-list class=\"ax-bg-surface\">\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\r\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\r\n                    <ax-suffix>\r\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\r\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\r\n                      </ax-button>\r\n                    </ax-suffix>\r\n                  </ax-button-item>\r\n                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                    <ax-divider></ax-divider>\r\n                    <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\r\n                      class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n                  </ng-container>\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            @if(searchBoxTitle){\r\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\r\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\r\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\r\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-sliders\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars-sort\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\r\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n          </div>\r\n        </div>\r\n\r\n        } @else{\r\n        <!-----------------------  Selection Mode   --------------------->\r\n        <div>\r\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\r\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n            <span (click)=\"clearSelectedItems()\"\r\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n              Items</span>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-overflow-auto\">\r\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\r\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\r\n        [loading]=\"{ enabled: true, animation: true }\">\r\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\r\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\r\n        @for(col of (columns$ | async);track col.name) {\r\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\r\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\r\n          [allowSorting]=\"false\">\r\n        </axp-widget-column-renderer>\r\n        }\r\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\r\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\r\n      </ax-data-table>\r\n    </div>\r\n  </ax-content>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\r\n      <axp-list-view-option-conditions [loader]=\"loader\"\r\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\r\n    </ax-content>\r\n  </ax-drawer>\r\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { 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", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "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: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4$1.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: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i10$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i11$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i11$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: i10$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i14$1.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { 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.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPCommonWidgetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [AXToastModule],
-                    exports: [],
-                    declarations: [],
-                    providers: [],
-                }]
-        }], ctorParameters: () => [{ type: i1$3.AXPSchemaRegistryService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityListViewComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\r\n    <ax-content class=\"ax-w-64 ax-border-e\">\r\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\r\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\r\n        <ax-side-menu>\r\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\r\n          </ng-container>\r\n        </ax-side-menu>\r\n        <ng-template #sideMenu let-item>\r\n          <ax-side-menu-item [text]=\"item.text\">\r\n            <ax-prefix>\r\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\r\n            </ax-prefix>\r\n            <ng-container *ngIf=\"item.children\">\r\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\r\n              </ng-container>\r\n            </ng-container>\r\n          </ax-side-menu-item>\r\n        </ng-template>\r\n      </div>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\r\n    <div\r\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\">\r\n      @if(platform.is('MD')){\r\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\r\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n          <span (click)=\"clearSelectedItems()\"\r\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n            Items</span>\r\n        </div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\r\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\r\n          <ax-suffix>\r\n            <i class=\"fa-solid fa-caret-down\"></i>\r\n          </ax-suffix>\r\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n            <ax-button-item-list class=\"ax-bg-surface\">\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                <ax-divider></ax-divider>\r\n                <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\r\n                  class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n              </ng-container>\r\n            </ax-button-item-list>\r\n          </ax-dropdown-panel>\r\n        </ax-button>\r\n        <div class=\"ax-flex ax-gap-2\">\r\n          @if(searchBoxTitle){\r\n          <ax-button *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\r\n            [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\r\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\r\n            (onClick)=\"conditionsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\r\n            @if ((conditionsCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\r\n            @if ((sortCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      <div *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\r\n        class=\"ax-transition-all ax-mt-4\">\r\n        <ax-search-box [title]=\"searchBoxTitle\"\r\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n      </div>\r\n      } @else {\r\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\r\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-add\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-trash\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <!-----------------------  View Mode   --------------------->\r\n        @if(this.grid?.selectedRows?.length==0) {\r\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-eye\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <i class=\"fa-solid fa-caret-down\"></i>\r\n              </ax-suffix>\r\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n                <ax-button-item-list class=\"ax-bg-surface\">\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\r\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\r\n                    <ax-suffix>\r\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\r\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\r\n                      </ax-button>\r\n                    </ax-suffix>\r\n                  </ax-button-item>\r\n                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                    <ax-divider></ax-divider>\r\n                    <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\r\n                      class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n                  </ng-container>\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            @if(searchBoxTitle){\r\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\r\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\r\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\r\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-sliders\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars-sort\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\r\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n          </div>\r\n        </div>\r\n\r\n        } @else{\r\n        <!-----------------------  Selection Mode   --------------------->\r\n        <div>\r\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\r\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n            <span (click)=\"clearSelectedItems()\"\r\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n              Items</span>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-overflow-auto\">\r\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\r\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\r\n        [loading]=\"{ enabled: true, animation: true }\">\r\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\r\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\r\n        @for(col of (columns$ | async);track col.name) {\r\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\r\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\r\n          [allowSorting]=\"false\">\r\n        </axp-widget-column-renderer>\r\n        }\r\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\r\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\r\n      </ax-data-table>\r\n    </div>\r\n  </ax-content>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\r\n      <axp-list-view-option-conditions [loader]=\"loader\"\r\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\r\n    </ax-content>\r\n  </ax-drawer>\r\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$1.AXActionSheetService }, { type: i2$1.AXUnsubscriber }, { type: i3.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
+                type: ViewChild,
+                args: ['viewsTemplate']
+            }], grid: [{
+                type: ViewChild,
+                args: ['grid']
+            }], entityViewDrawer: [{
+                type: ViewChild,
+                args: ['entityViewDrawer']
+            }] } });
 
 class AXPListViewModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3089,13 +1598,13 @@ class AXPEntityQuickViewComponent extends AXBasePageComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$5.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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 *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      <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 *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    <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 *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        @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        @if(canDelete)\n        {\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></ax-button-item>\n        }\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>", 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: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$2.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\r\n    <div *ngFor=\"let p of getProperties(root.properties)\"\r\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\r\n        <span>{{ p.title }}</span>\r\n      </div>\r\n      <div class=\"ax-min-w-[30rem]\">\r\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngFor=\"let s of root.sections\"\r\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\r\n    <div class=\"ax-pb-4\">\r\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\r\n    </div>\r\n    <div class=\"ax-flex ax-flex-col\">\r\n      <div *ngFor=\"let p of getProperties(s.properties)\"\r\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\">\r\n        @if (s.options?.showPropTitle!=false) {\r\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\r\n          <span>{{ p.title }}</span>\r\n        </div>\r\n        }\r\n        <div class=\"md:ax-min-w-[30rem]\">\r\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer>\r\n  <ax-prefix> </ax-prefix>\r\n  <ax-suffix>\r\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\r\n      <ax-button-item-list>\r\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\r\n          <ax-prefix>\r\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\r\n          </ax-prefix>\r\n        </ax-button-item>\r\n        @if(canDelete)\r\n        {\r\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\r\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\r\n        }\r\n      </ax-button-item-list>\r\n    </ax-dropdown-button>\r\n  </ax-suffix>\r\n</ax-footer>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.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: "18.0.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 *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      <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 *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    <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 *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        @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        @if(canDelete)\n        {\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></ax-button-item>\n        }\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>" }]
-        }], ctorParameters: () => [{ type: i1$5.Actions }] });
+            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\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\r\n    <div *ngFor=\"let p of getProperties(root.properties)\"\r\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\r\n        <span>{{ p.title }}</span>\r\n      </div>\r\n      <div class=\"ax-min-w-[30rem]\">\r\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngFor=\"let s of root.sections\"\r\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\r\n    <div class=\"ax-pb-4\">\r\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\r\n    </div>\r\n    <div class=\"ax-flex ax-flex-col\">\r\n      <div *ngFor=\"let p of getProperties(s.properties)\"\r\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\">\r\n        @if (s.options?.showPropTitle!=false) {\r\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\r\n          <span>{{ p.title }}</span>\r\n        </div>\r\n        }\r\n        <div class=\"md:ax-min-w-[30rem]\">\r\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer>\r\n  <ax-prefix> </ax-prefix>\r\n  <ax-suffix>\r\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\r\n      <ax-button-item-list>\r\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\r\n          <ax-prefix>\r\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\r\n          </ax-prefix>\r\n        </ax-button-item>\r\n        @if(canDelete)\r\n        {\r\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\r\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\r\n        }\r\n      </ax-button-item-list>\r\n    </ax-dropdown-button>\r\n  </ax-suffix>\r\n</ax-footer>" }]
+        }], ctorParameters: () => [{ type: i1$2.Actions }] });
 
 var entityQuickView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3178,7 +1687,7 @@ class AXPEntityModifyPopupAction extends AXPWorkflowAction {
         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-BnSfJlc5.mjs');
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-D1h1xORH.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',
@@ -3198,58 +1707,162 @@ class AXPEntityModifyPopupAction extends AXPWorkflowAction {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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 AXPShowQuickViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.formatService = inject(AXFormatService);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const entity = await this.entityRegistery.resolve(payload.module, 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', 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: payload.data,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowQuickViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowQuickViewWorkflow = {
+    startStepId: 'showQuickView',
+    steps: {
+        showQuickView: {
+            id: 'showQuickView',
+            action: 'AXPShowQuickViewAction',
+        },
+    },
+};
+
+class AXPShowDetailViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+        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.module}/e/${payload.entity}/${id}/view`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
             type: Injectable
         }] });
-class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
+const AXPShowDetailsViewWorkflow = {
+    startStepId: 'showDetailView',
+    steps: {
+        showDetailView: {
+            id: 'showDetailView',
+            action: 'AXPShowDetailViewAction',
+        },
+    },
+};
+
+class AXPShowListViewAction extends AXPWorkflowAction {
     constructor() {
         super(...arguments);
-        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+        this.sessionService = inject(AXPSessionService);
     }
     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 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: "18.0.2", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction }); }
 }
-const AXPModifyEntityWorkflow = {
-    startStepId: 'modifyPopup',
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowListViewWorkflow = {
+    startStepId: 'showListView',
     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: '',
-                },
-            ],
+        showListView: {
+            id: 'showListView',
+            action: 'AXPShowListViewAction',
         },
     },
 };
@@ -3280,7 +1893,7 @@ class AXPEntityDetailsViewComponent {
             this.setSection(c.get('section'));
         });
         //
-        this.workflow.events$.pipe(ofType(AXPEntityDeletedEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
+        this.workflow.events$.pipe(ofType$1(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)) {
@@ -3292,7 +1905,7 @@ class AXPEntityDetailsViewComponent {
                 });
             }
         });
-        this.workflow.events$.pipe(ofType(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy).subscribe(async (event) => {
+        this.workflow.events$.pipe(ofType$1(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) {
@@ -3352,10 +1965,10 @@ class AXPEntityDetailsViewComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$5.Actions }, { token: i2$4.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\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            @if(canCreate || canUpdate) {\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                  @if(canCreate) {\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            }\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 [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"> </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            @if(canUpdate) {\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            }\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                    <div class=\"ax-flex ax-flex-col ax-items-start\">\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                      @if(prop.description) {\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\n                      [mode]=\"'view'\"></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>", 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: i2$1.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: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.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$4.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "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.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: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$2.Actions }, { token: i2$1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n      <ax-tabs look=\"with-line\" location=\"start\">\r\n        @for(tab of (loader.sections$ | async); track tab.name)\r\n        {\r\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n          [disabled]=\"editForm.context\">\r\n        </ax-tab-item>\r\n        }\r\n      </ax-tabs>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content #content class=\"ax-overflow-x-hidden\">\r\n    <div\r\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\">\r\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\r\n        <!-------- Begin Toolbar  -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <!-------- Begin Title  -------->\r\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n            <!-- <ax-button class=\"lg:ax-hidden\">\r\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\r\n            </ax-button> -->\r\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\r\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\r\n                <ng-template #divider>\r\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                </ng-template>\r\n                <ax-breadcrumbs-item>\r\n                  <a>Home</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item>\r\n                  <a>{{ loader.entity.title }}</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\r\n                  {{ loader.title }}\r\n                </ax-breadcrumbs-item>\r\n              </ax-breadcrumbs> -->\r\n            </div>\r\n          </div>\r\n          <!-------- Finish Title  -------->\r\n          <!--------------------------------------------------------------->\r\n          <!-- Begin Action Menu  -->\r\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n            @if(canCreate || canUpdate) {\r\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n              </ax-prefix>\r\n              <ax-dropdown-panel>\r\n                <ax-button-item-list>\r\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item> \r\n                  <ax-divider></ax-divider>-->\r\n                  @if(canCreate) {\r\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\r\n                    (onClick)=\"handleCommandClick('create')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  } @if(canDelete) {\r\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\r\n                    (onClick)=\"handleCommandClick('delete')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  }\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <!-- Finish Action Menu  -->\r\n        </div>\r\n        <!----- Finish Toolbar  ----->\r\n        <!--------------------------------------------------------------->\r\n        <!-- Begin Section Tab Items  -->\r\n        @if((loader.hasSections$| async)) {\r\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\r\n          @for(tab of (loader.sections$ | async); track tab.name) {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\r\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n        }\r\n        <!-- Finish Section Tab Items  -->\r\n      </div>\r\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\r\n      <ax-form #form>\r\n        <div class=\"ax-card ax-shadow-md\">\r\n          <div class=\"ax-card-header\">\r\n            <p>{{ section.title }}</p>\r\n            @if(canUpdate) {\r\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\r\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\r\n            <ng-container *ngFor=\"let name of section.properties\">\r\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\r\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\r\n                  @if(section.options?.showPropTitle!=false){\r\n                  <div\r\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\">\r\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\r\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\r\n                      <!-- @if(prop.description) {\r\n                      <i\r\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\r\n                        [axTooltip]=\"prop.description\"\r\n                        [axTooltipPlacement]=\"'end'\"\r\n                      ></i>\r\n                      } -->\r\n                      @if(prop.description) {\r\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                  <div\r\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\r\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\r\n                      [mode]=\"'view'\"></axp-widget-renderer>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-form>\r\n      }\r\n    </div>\r\n  </ax-content>\r\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.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: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.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$2.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: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i11$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: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { 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 }); }
+                AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailsViewComponent, decorators: [{
             type: Component,
@@ -3384,8 +1997,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         //
                         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      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\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            @if(canCreate || canUpdate) {\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                  @if(canCreate) {\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            }\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 [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"> </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            @if(canUpdate) {\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            }\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                    <div class=\"ax-flex ax-flex-col ax-items-start\">\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                      @if(prop.description) {\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\n                      [mode]=\"'view'\"></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>" }]
-        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i2$4.AXUnsubscriber }], propDecorators: { drawer: [{
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n      <ax-tabs look=\"with-line\" location=\"start\">\r\n        @for(tab of (loader.sections$ | async); track tab.name)\r\n        {\r\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n          [disabled]=\"editForm.context\">\r\n        </ax-tab-item>\r\n        }\r\n      </ax-tabs>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content #content class=\"ax-overflow-x-hidden\">\r\n    <div\r\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\">\r\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\r\n        <!-------- Begin Toolbar  -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <!-------- Begin Title  -------->\r\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n            <!-- <ax-button class=\"lg:ax-hidden\">\r\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\r\n            </ax-button> -->\r\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\r\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\r\n                <ng-template #divider>\r\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                </ng-template>\r\n                <ax-breadcrumbs-item>\r\n                  <a>Home</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item>\r\n                  <a>{{ loader.entity.title }}</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\r\n                  {{ loader.title }}\r\n                </ax-breadcrumbs-item>\r\n              </ax-breadcrumbs> -->\r\n            </div>\r\n          </div>\r\n          <!-------- Finish Title  -------->\r\n          <!--------------------------------------------------------------->\r\n          <!-- Begin Action Menu  -->\r\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n            @if(canCreate || canUpdate) {\r\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n              </ax-prefix>\r\n              <ax-dropdown-panel>\r\n                <ax-button-item-list>\r\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item> \r\n                  <ax-divider></ax-divider>-->\r\n                  @if(canCreate) {\r\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\r\n                    (onClick)=\"handleCommandClick('create')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  } @if(canDelete) {\r\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\r\n                    (onClick)=\"handleCommandClick('delete')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  }\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <!-- Finish Action Menu  -->\r\n        </div>\r\n        <!----- Finish Toolbar  ----->\r\n        <!--------------------------------------------------------------->\r\n        <!-- Begin Section Tab Items  -->\r\n        @if((loader.hasSections$| async)) {\r\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\r\n          @for(tab of (loader.sections$ | async); track tab.name) {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\r\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n        }\r\n        <!-- Finish Section Tab Items  -->\r\n      </div>\r\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\r\n      <ax-form #form>\r\n        <div class=\"ax-card ax-shadow-md\">\r\n          <div class=\"ax-card-header\">\r\n            <p>{{ section.title }}</p>\r\n            @if(canUpdate) {\r\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\r\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\r\n            <ng-container *ngFor=\"let name of section.properties\">\r\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\r\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\r\n                  @if(section.options?.showPropTitle!=false){\r\n                  <div\r\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\">\r\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\r\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\r\n                      <!-- @if(prop.description) {\r\n                      <i\r\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\r\n                        [axTooltip]=\"prop.description\"\r\n                        [axTooltipPlacement]=\"'end'\"\r\n                      ></i>\r\n                      } -->\r\n                      @if(prop.description) {\r\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                  <div\r\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\r\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\r\n                      [mode]=\"'view'\"></axp-widget-renderer>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-form>\r\n      }\r\n    </div>\r\n  </ax-content>\r\n</ax-drawer-container>" }]
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.AXUnsubscriber }], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: ['drawer']
             }] } });
@@ -3527,48 +2140,92 @@ class AXPCustomReuseStrategy {
     }
 }
 
-const AXPShowDetailsViewWorkflow = {
-    startStepId: 'showDetailView',
+class AXPEntityModifySectionPopupAction 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-D1h1xORH.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: "18.0.2", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifySectionPopupAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifySectionPopupAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPModifyEntitySectionWorkflow = {
+    startStepId: 'modifyPopup',
     steps: {
-        showDetailView: {
-            id: 'showDetailView',
-            action: 'AXPShowDetailViewAction',
+        modifyPopup: {
+            id: 'modifyPopup',
+            action: 'AXPEntityModifySectionPopupAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
+                    nextStepId: 'successToast',
+                },
+            ],
         },
-    },
-};
-
-const AXPShowListViewWorkflow = {
-    startStepId: 'showListView',
-    steps: {
-        showListView: {
-            id: 'showListView',
-            action: 'AXPShowListViewAction',
+        successToast: {
+            id: 'successToast',
+            action: 'AXPToastAction',
+            input: {
+                color: 'success',
+                title: 'Entity Modified',
+                content: 'Record has been successfully updated.',
+            },
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'modifyConfirmed',
+                },
+            ],
         },
-    },
-};
-
-const AXPShowQuickViewWorkflow = {
-    startStepId: 'showQuickView',
-    steps: {
-        showQuickView: {
-            id: 'showQuickView',
-            action: 'AXPShowQuickViewAction',
+        modifyConfirmed: {
+            id: 'modifyConfirmed',
+            action: 'AXPEntityModifyConfirmedAction',
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: '',
+                },
+            ],
         },
     },
 };
 
 class AXPAdminLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, imports: [i1$6.StoreFeatureModule, i1$5.EffectsFeatureModule, AXPAdminRootLayoutModule,
-            AXPListViewModule, i3$5.AXPWorkflowModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, providers: [{ provide: RouteReuseStrategy, useClass: AXPCustomReuseStrategy }], imports: [StoreModule.forFeature(AXPLayoutFeature),
-            EffectsModule.forFeature([AXPLayoutEffects]),
-            AXPAdminRootLayoutModule,
-            AXPListViewModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, imports: [AXPListViewModule, i1$3.AXPWorkflowModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, providers: [{ provide: RouteReuseStrategy, useClass: AXPCustomReuseStrategy }], imports: [AXPListViewModule,
             AXPWorkflowModule.forChild({
                 actions: {
                     AXPEntityPerformDeleteAction,
                     AXPEntityModifyPopupAction,
+                    AXPEntityModifySectionPopupAction,
                     AXPEntityModifyConfirmedAction,
                     AXPEntityCreatePopupAction,
                     AXPEntityCreateSubmittedAction,
@@ -3576,6 +2233,7 @@ class AXPAdminLayoutModule {
                 workflows: {
                     'delete-entity': AXPDeleteEntityWorkflow,
                     'modify-entity': AXPModifyEntityWorkflow,
+                    'modify-entity-section': AXPModifyEntitySectionWorkflow,
                     'create-entity': AXPCreateEntityWorkflow,
                     'show-details': AXPShowDetailsViewWorkflow,
                     'show-quick-view': AXPShowQuickViewWorkflow,
@@ -3590,14 +2248,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: NgModule,
             args: [{
                     imports: [
-                        StoreModule.forFeature(AXPLayoutFeature),
-                        EffectsModule.forFeature([AXPLayoutEffects]),
-                        AXPAdminRootLayoutModule,
                         AXPListViewModule,
                         AXPWorkflowModule.forChild({
                             actions: {
                                 AXPEntityPerformDeleteAction,
                                 AXPEntityModifyPopupAction,
+                                AXPEntityModifySectionPopupAction,
                                 AXPEntityModifyConfirmedAction,
                                 AXPEntityCreatePopupAction,
                                 AXPEntityCreateSubmittedAction,
@@ -3605,6 +2261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             workflows: {
                                 'delete-entity': AXPDeleteEntityWorkflow,
                                 'modify-entity': AXPModifyEntityWorkflow,
+                                'modify-entity-section': AXPModifyEntitySectionWorkflow,
                                 'create-entity': AXPCreateEntityWorkflow,
                                 'show-details': AXPShowDetailsViewWorkflow,
                                 'show-quick-view': AXPShowQuickViewWorkflow,
@@ -3635,141 +2292,6 @@ const AXPEntityDetailViewLoaderResolver = (route, state, service = inject(AXPEnt
     return service.create(moduleName, entityName, id);
 };
 
-class AXPEntityDetailViewModel {
-    constructor(injector, config, entityData) {
-        this.injector = injector;
-        this.config = config;
-        this.entityData = entityData;
-        this._entityDef = cloneDeep(this.config.newStruct);
-        this._entityData = cloneDeep(this.entityData);
-        this._viewDef = cloneDeep(this._entityDef.views?.details);
-        this.store = this.injector.get(Store);
-        this.formatService = this.injector.get(AXFormatService);
-        this.workflow = this.injector.get(AXPWorkflowService);
-        this.title = signal('');
-        this.description = signal(this._viewDef.description);
-        this.canCreate = signal(true);
-        this.canUpdate = signal(true);
-        this.canDelete = signal(true);
-        this.actions = computed(() => {
-            const result = this._viewDef.actions?.map(action => {
-                if (typeof action === 'string') {
-                    return this._entityDef.actions?.find(c => c.name === action);
-                }
-                else {
-                    return action;
-                }
-            }).filter(action => action !== undefined);
-            return (result ?? []);
-        });
-        this.updateTitle();
-    }
-    //****************** Titles ******************//
-    updateTitle() {
-        const suggestedProps = this._entityDef.attributes.find((c) => ['title', 'name', 'code'].includes(c.name));
-        let suggestedFormat = 'Item #{{id}}';
-        if (suggestedProps)
-            suggestedFormat = `{{${suggestedProps.name}}}`;
-        const title = this.formatService.format(this._viewDef.title ?? suggestedFormat, 'string', this._entityData);
-        this.title.set(title);
-    }
-    executeCommand(command) {
-        switch (command) {
-            case 'delete':
-                this.workflow.execute('delete-entity', {
-                    module: this._entityDef.module,
-                    entity: this._entityDef.name,
-                    ids: [this._entityData.id],
-                });
-                break;
-            case 'create': {
-                this.workflow.execute('create-entity', {
-                    payload: {
-                        module: this._entityDef.module,
-                        entity: this._entityDef.name,
-                    },
-                });
-                break;
-            }
-        }
-    }
-}
-class AXPEntityDetailViewModelFactory {
-    constructor() {
-        this.entityService = inject(AXPEntityRegistryService);
-        this.layout = inject(AXPLayoutService);
-        this.injector = inject(Injector);
-    }
-    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 AXPEntityDetailViewModel(this.injector, config, data);
-        }
-        this.layout.setNavigationLoading(false);
-        return Promise.reject('cannot fetch ');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewModelFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewModelFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEntityDetailViewModelFactory)) => {
-    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');
-    //
-    return service.create(moduleName, entityName, id);
-};
-
-class AXPDefaultThemeEntityDetailsViewComponent {
-    constructor() {
-        this.activeRoute = inject(ActivatedRoute);
-        this.vm = this.activeRoute.snapshot.data['vm'];
-        //
-        this.store = inject((Store));
-        this.isSM = this.store.select(isSmallScreen());
-        this.isOpen = this.store.select(getChildDrawer());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDefaultThemeEntityDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPDefaultThemeEntityDetailsViewComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], 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            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n                [stickyParent]=\"content.getHostElement()\">\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                        <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\n                            @if(vm.description())\n                            {\n                            <div class=\"ax-text-sm ax-text-neutral-600\">{{ vm.description() }}</div>\n                            }\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>\n                                        <i class=\"fa-solid fa-home ax-text-xs ax-me-2\"></i>\n                                        Home\n                                    </a>\n                                </ax-breadcrumbs-item>\n                                <ax-breadcrumbs-item>\n                                    <a>{{ vm.title() }}</a>\n                                </ax-breadcrumbs-item>\n                                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                                    {{ vm.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                        @if(vm.actions().length) {\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                                    @for(action of vm.actions();track action.name)\n                                    {\n                                    <ax-button-item text=\"Create New One\"\n                                        class=\"ax-font-semibold ax-text-{{action.color}}\"\n                                        (onClick)=\"vm.executeCommand('create')\">\n                                        <ax-prefix>\n                                            <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                                        </ax-prefix>\n                                    </ax-button-item>\n                                    }\n                                </ax-button-item-list>\n                            </ax-dropdown-panel>\n                        </ax-button>\n                        }\n                    </div>\n                    <!-- Finish Action Menu  -->\n                </div>\n                <!----- Finish Toolbar  ----->\n                <!--------------------------------------------------------------->\n                <!-- Begin Section Tab Items  -->\n                <!-- Finish Section Tab Items  -->\n            </div>\n\n        </div>\n    </ax-content>\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.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: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i6$2.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i6$2.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { 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: "18.0.2", ngImport: i0, type: AXPDefaultThemeEntityDetailsViewComponent, 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,
-                        //
-                        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            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n                [stickyParent]=\"content.getHostElement()\">\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                        <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\n                            @if(vm.description())\n                            {\n                            <div class=\"ax-text-sm ax-text-neutral-600\">{{ vm.description() }}</div>\n                            }\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>\n                                        <i class=\"fa-solid fa-home ax-text-xs ax-me-2\"></i>\n                                        Home\n                                    </a>\n                                </ax-breadcrumbs-item>\n                                <ax-breadcrumbs-item>\n                                    <a>{{ vm.title() }}</a>\n                                </ax-breadcrumbs-item>\n                                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                                    {{ vm.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                        @if(vm.actions().length) {\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                                    @for(action of vm.actions();track action.name)\n                                    {\n                                    <ax-button-item text=\"Create New One\"\n                                        class=\"ax-font-semibold ax-text-{{action.color}}\"\n                                        (onClick)=\"vm.executeCommand('create')\">\n                                        <ax-prefix>\n                                            <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                                        </ax-prefix>\n                                    </ax-button-item>\n                                    }\n                                </ax-button-item-list>\n                            </ax-dropdown-panel>\n                        </ax-button>\n                        }\n                    </div>\n                    <!-- Finish Action Menu  -->\n                </div>\n                <!----- Finish Toolbar  ----->\n                <!--------------------------------------------------------------->\n                <!-- Begin Section Tab Items  -->\n                <!-- Finish Section Tab Items  -->\n            </div>\n\n        </div>\n    </ax-content>\n</ax-drawer-container>" }]
-        }] });
-
 const AX_ADMIN_ROUTES = [
     {
         path: ':app',
@@ -3804,40 +2326,24 @@ const AX_ADMIN_ROUTES = [
                         //   requiredPermission: "dynamic"
                         // }
                     },
-                    {
-                        path: 'ee/:entity/:id/view',
-                        resolve: { vm: AXPEntityDetailViewModelResolver },
-                        component: AXPDefaultThemeEntityDetailsViewComponent,
-                    },
+                    // {
+                    //   path: 'ee/:entity/:id/view',
+                    //   resolve: { vm: AXPEntityDetailViewModelResolver },
+                    //   component: AXPDefaultThemeEntityDetailsViewComponent,
+                    // },
                 ],
             },
         ],
     },
 ];
 
-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 AXPLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, imports: [i1.RouterModule, i2$5.AXPCommonModule, i3$5.AXPWorkflowModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, imports: [RouterModule.forChild(routes),
-            AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, imports: [i10$1.AXPCommonModule, i1$3.AXPWorkflowModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, imports: [AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
             AXPWorkflowModule.forChild({
                 actions: {
-                    AXPNavigateAction,
+                    AXPWorkflowNavigateAction: AXPWorkflowNavigateAction,
                     AXPDialogConfirmAction,
                     AXPToastAction,
                     AXPShowDetailViewAction,
@@ -3850,11 +2356,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: NgModule,
             args: [{
                     imports: [
-                        RouterModule.forChild(routes),
                         AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
                         AXPWorkflowModule.forChild({
                             actions: {
-                                AXPNavigateAction,
+                                AXPWorkflowNavigateAction: AXPWorkflowNavigateAction,
                                 AXPDialogConfirmAction,
                                 AXPToastAction,
                                 AXPShowDetailViewAction,
@@ -3871,5 +2376,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXEntityLoaderDefault, AXMWorkflowErrorHandler, AXPAdminChildFeaturesListComponent, AXPAdminChildLayoutComponent, AXPAdminChildLayoutModule, AXPAdminHeaderComponent, AXPAdminLayoutComponent, AXPAdminLayoutModule, AXPAdminRootLayoutModule, AXPCommonWidgetModule, AXPContentViewComponent, AXPCreateEntityWorkflow, AXPCustomReuseStrategy, AXPDeleteEntityWorkflow, AXPDialogConfirmAction, AXPEntityCreateCustomViewComponent, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityDeletedEvent, AXPEntityDetailLoaderDefault, AXPEntityDetailViewLoaderFactory, AXPEntityDetailViewLoaderResolver, AXPEntityDetailsViewComponent, AXPEntityListViewComponent, AXPEntityListViewConfigEmpty, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifyPopupAction, AXPEntityPerformDeleteAction, AXPEntityQuickViewComponent, AXPEntityRegistryService, AXPError401Component, AXPError404Component, AXPErrorOfflineComponent, AXPFooterTextSlotComponent, AXPLayoutModule, AXPLayoutService, AXPListViewLoaderDefault, AXPListViewLoaderFactory, AXPListViewLoaderResolver, AXPListViewModule, AXPListViewOptionConditionsComponent, AXPListViewOptionFilterOperatorComponent, AXPListViewOptionSortingComponent, AXPListViewOptionsColumnsComponent, AXPLogoComponent, AXPModifyEntityWorkflow, AXPMyCustomFunc, AXPNavBarSlotComponent, AXPNavigateAction, AXPRedirectEvent, AXPShowDetailViewAction, AXPShowListViewAction, AXPShowQuickViewAction, AXPThemeSlotComponent, AXPToastAction, AXP_ENTITY_LOADER, AXP_LISTVIEW_LOADER, AX_ADMIN_ROUTES, convertPropertiesToColumns, convertPropertyToColumn, widgetSchemas };
+export { AXPAdminLayoutModule, AXPCreateEntityWorkflow, AXPCustomReuseStrategy, AXPDeleteEntityWorkflow, AXPEntityCreateCustomViewComponent, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityDeletedEvent, AXPEntityDetailLoaderDefault, AXPEntityDetailViewLoaderFactory, AXPEntityDetailViewLoaderResolver, AXPEntityDetailsViewComponent, AXPEntityListViewComponent, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifyPopupAction, AXPEntityPerformDeleteAction, AXPEntityQuickViewComponent, AXPLayoutModule, AXPListViewLoaderDefault, AXPListViewLoaderFactory, AXPListViewLoaderResolver, AXPListViewModule, AXPListViewOptionConditionsComponent, AXPListViewOptionFilterOperatorComponent, AXPListViewOptionSortingComponent, AXPListViewOptionsColumnsComponent, AXPModifyEntityWorkflow, AXPMyCustomFunc, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPShowQuickViewAction, AXPShowQuickViewWorkflow, AXP_LISTVIEW_LOADER, AX_ADMIN_ROUTES };
 //# sourceMappingURL=acorex-platform-layouts.mjs.map