@acorex/platform 1.0.0 → 1.0.1

package/fesm2022/acorex-platform-layouts.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectorRef, NgModule, ViewEncapsulation, signal, computed, Input, HostListener, InjectionToken, ViewChild, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
-import * as i2$4 from '@ngrx/store';
-import { createAction, createFeature, createReducer, on, createSelector, Store, props, StoreModule } from '@ngrx/store';
+import { 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 from '@acorex/platform/common';
-import { AXPNavigateAction as AXPNavigateAction$1, AXPLoadInitState, AXP_MENU_LOADER, AXPRouteUtilityService, AXPComponentLogoConfig, AXPFontIconLogoConfig, AXPImageUrlLogoConfig, AXPTextLogoConfig, AXP_PLATFORM_CONFIG_TOKEN, AXPComponentSlotModule, AXPStickyDirective, AXPCommonModule } from '@acorex/platform/common';
-import * as i3$2 from '@acorex/core/platform';
+import * 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';
@@ -15,29 +15,33 @@ import * as i1$1 from '@angular/common';
 import { CommonModule, Location } from '@angular/common';
 import * as i1$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i4 from '@acorex/components/button';
+import * as i2$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDialogModule, AXDialogService } from '@acorex/components/dialog';
-import * as i4$1 from '@acorex/components/drawer';
+import * as i4 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i4$2 from '@acorex/components/loading';
+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$3 from '@acorex/core/utils';
+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$1 from '@acorex/components/image';
+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 * as i3$4 from '@acorex/platform/workflow';
+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';
@@ -51,36 +55,34 @@ import * as i1$3 from '@acorex/platform/schema';
 import { AXPSchemaRegistryService, EQ_OPER, STRING_OPERATORS, CONTAINS_OPER, NUMBER_OPERATORS, BETWEEN_OPER, DATE_OPERATORS, AXPSchemaModule } from '@acorex/platform/schema';
 import * as i15 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i2$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i8$1 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i6 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i4$3 from '@acorex/components/text-box';
+import * as i4$1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i7 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i4$4 from '@acorex/components/selection-list';
+import * as i4$2 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import * as i14 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXPopupService } from '@acorex/components/popup';
 import * as i1$4 from '@acorex/components/action-sheet';
 import { AXActionSheetModule } from '@acorex/components/action-sheet';
 import * as i6$1 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
-import { AXFormatService } from '@acorex/core/format';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i12 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXCommonModule, AXDataSource } from '@acorex/components/common';
-import * as i3$3 from '@acorex/components/form';
+import * as i3$4 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXListModule } from '@acorex/components/list';
 import { PortalModule } from '@angular/cdk/portal';
+import * as i6$2 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i11 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 
 const AXPWindowResizeAction = createAction('[Layout] Resize');
@@ -183,10 +185,10 @@ class AXPLayoutEffects {
             return of();
         })), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutEffects }); }
+    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: "17.1.2", ngImport: i0, type: AXPLayoutEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -224,10 +226,10 @@ class AXPAdminChildLayoutComponent {
     ngOnDestroy() {
         this.routeParamSub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminChildLayoutComponent, selector: "ng-component", ngImport: i0, template: "<!-- <ax-drawer-container>\n  <ax-drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\" ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{title}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        <ax-tab-item [text]=\"tab.text\" *ngFor=\"let tab of menuItems$ | async\" [active]=\"isActiveRoute(tab)\"\n          (onClick)=\"handleMenuClick($event,tab)\">\n        </ax-tab-item>\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer>\n  <ax-content>\n    <router-outlet></router-outlet>\n  </ax-content>\n</ax-drawer-container> -->\n<router-outlet></router-outlet>", dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutComponent, decorators: [{
+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: () => [] });
@@ -274,17 +276,17 @@ class AXPAdminChildFeaturesListComponent {
         this.routeParamSub?.unsubscribe();
         this.firstMenuSub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildFeaturesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminChildFeaturesListComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n        class=\"ax-flex md:ax-flex-col ax-gap-4 ax-justify-between ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <div class=\"ax-text-xl ax-font-bold\">{{title}}</div>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-flex-col ax-gap-2  ax-divide-y ax-divide-solid\">\n        <div *ngFor=\"let item of menuItems$ | async\"\n            class=\"ax-py-2 ax-font-semibold ax-flex ax-justify-between ax-cursor-pointer ax-items-center\"\n            (click)=\"handleMenuClick($event,item)\">\n            <span>{{item.text}}</span>\n            <i class=\"fa-solid fa-chevron-right ax-text-md ax-text-slate-400 \"></i>\n        </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPAdminChildFeaturesListComponent, decorators: [{
+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: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, declarations: [AXPAdminChildLayoutComponent, AXPAdminChildFeaturesListComponent], imports: [CommonModule,
+    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,
@@ -294,7 +296,7 @@ class AXPAdminChildLayoutModule {
             AXLoadingModule,
             AXTabsModule,
             AXButtonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminChildLayoutModule, imports: [CommonModule,
             RouterModule,
             AXButtonModule,
             AXDecoratorModule,
@@ -305,7 +307,7 @@ class AXPAdminChildLayoutModule {
             AXTabsModule,
             AXButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminChildLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminChildLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -338,14 +340,14 @@ class AXPAdminHeaderComponent {
     logoClick() {
         this.router.navigate(['/']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminHeaderComponent, selector: "axp-dashboard-admin-header", host: { classAttribute: "ax-h-16 ax-flex ax-justify-between ax-px-4 md:ax-px-0 md:ax-pe-6 ax-py-4 ax-bg-surface ax-border-b" }, ngImport: i0, template: "<div class=\"ax-w-full ax-flex ax-justify-between\">\n  <div class=\"ax-flex ax-items-center md:ax-hidden\">\n    <i class=\"fa-solid fa-bars ax-text-lg ax-me-3\" (click)=\"menuClick()\"></i>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <div\n      class=\"ax-hidden md:ax-flex ax-items-center ax-justify-center ax-w-8 ax-h-8 ax-bg-on-surface ax-rounded ax-rounded-s-none ax-me-8 ax-cursor-pointer\"\n      (click)=\"menuClick()\">\n      <i class=\"fa-solid fa-chevrons-left ax-text-sm\" [ngClass]=\"{ 'ax-rotate-180': !(isOpen | async) }\"> </i>\n    </div>\n    <axp-component-slot name=\"header-start\"></axp-component-slot>\n  </div>\n  <div class=\"ax-flex ax-items-center\">\n    <axp-component-slot name=\"header-end\"></axp-component-slot>\n  </div>\n</div>", styles: [".profile-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));padding-left:.5rem;padding-right:.5rem}.profile-menus ul:last-child{border-width:0px}.profile-menus ul li{display:flex;cursor:pointer;border-radius:.375rem;padding:.5rem}.profile-menus ul li:last-child{margin-bottom:.5rem}.profile-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}:is(.ax-dark .profile-menus ul li:hover){--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.profile-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    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: "17.1.2", ngImport: i0, type: AXPAdminHeaderComponent, decorators: [{
+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))}:is(.ax-dark .profile-menus ul li:hover){--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.profile-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}\n"] }]
+                    }, 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 {
@@ -385,10 +387,10 @@ class AXPContentViewComponent {
     ngOnDestroy() {
         this.fragmentSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPContentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPContentViewComponent, isStandalone: true, selector: "axp-content-view", inputs: { dataSource: "dataSource", hasSidebar: ["hasSideBar", "hasSidebar"] }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"ax-relative ax-grid\" [class.ax-grid-cols-12]=\"hasSidebar\">\n  @if(hasSidebar){\n  <div class=\"ax-hidden ax-fixed lg:ax-block ax-w-72 ax-right-0\">\n    <ax-nav class=\"ax-h-[calc(100vh-120px)] ax-px-2 ax-py-4\">\n      @for (section of dataSource.sections; track $index) {\n      <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: section }\"> </ng-container>\n      }\n      <ng-template #navTemplate let-item>\n        <ax-nav-item [active]=\"activeFragment()==item.fragment\" (onClick)=\"itemClick(item.fragment)\">\n          <span>{{item.title}}</span>\n          <ax-prefix>\n            <ax-icon [class]=\"item.icon\"></ax-icon>\n          </ax-prefix>\n          @if(item.children){\n          <ng-container>\n            @for (child of item.children; track $index) {\n            <ng-container [ngTemplateOutlet]=\"navTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n            </ng-container>\n            }\n          </ng-container>\n          }\n        </ax-nav-item>\n      </ng-template>\n    </ax-nav>\n  </div>\n  }\n  <div\n    class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-9 2xl:ax-col-end-11 ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-6 ax-py-4 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n  >\n    <span class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{dataSource.title}}</span>\n    @if(dataSource.subTitle){\n    <span>{{dataSource.subTitle}}</span>\n    } @for (section of dataSource.sections; track $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: section }\"\n    ></ng-container>\n    }\n    <ng-template #contentTemplate let-section>\n      @if(section.title){\n      <h1 [id]=\"section.fragment\" class=\"ax-font-bold ax-text-lg\">{{section.title}}</h1>\n      } @if(section.children){ @for (subSection of section.children; track $index) {\n      <ng-container\n        [ngTemplateOutlet]=\"contentTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: subSection }\"\n      ></ng-container>\n      } }@else { @for (item of section.content; track $index){ @if(item.type===\"paragraph\"){\n\n      <p>{{item.text}}</p>\n      }@else {\n      <ul class=\"ax-list-disc ax-ps-10\">\n        @for (option of item.text; track $index) {\n        <li>{{option}}</li>\n        }\n      </ul>\n      } } }\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXCollapseModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXNavModule }, { kind: "component", type: i3$1.AXNavComponent, selector: "ax-nav" }, { kind: "component", type: i3$1.AXNavItemComponent, selector: "ax-nav-item", inputs: ["disabled", "color", "active"], outputs: ["onClick", "activeChange"] }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPContentViewComponent, decorators: [{
+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: [{
@@ -408,20 +410,19 @@ class AXPError401Component {
         this.router = inject(Router);
         this.isAuthorized$ = this.sessionService.isAuthorized$;
     }
-    ngOnInit() { }
     handleHomeClick() {
         this.router.navigate([`/${this.sessionService.application?.name}/home`]);
     }
     handleSignInClick() {
         this.router.navigate([`/auth/login`]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError401Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPError401Component, isStandalone: true, selector: "axp-error-401", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-401.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Hold on a second!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, but you are not authorized to view this page.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        @if((isAuthorized$ | async))\n        {\n        <ax-button (onClick)=\"handleHomeClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        } @else {\n        <ax-button (onClick)=\"handleSignInClick()\" class=\"ax-px-4\" color=\"primary\" text=\"Sign Up / Sign In\"></ax-button>\n        }\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPError401Component, decorators: [{
+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>" }]
-        }], ctorParameters: () => [] });
+        }] });
 
 var error401_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -436,10 +437,10 @@ class AXPError404Component {
     goHome() {
         this.router.navigate([`/${this.sessionService.application?.name}/home`]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPError404Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPError404Component, isStandalone: true, selector: "axp-error-404", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/3\" src=\" /assets/images/error/error-404.svg\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">No Result Found.</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Whoops! Looks like that page doesn't exist.</p>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPError404Component, decorators: [{
+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>" }]
         }] });
@@ -453,10 +454,10 @@ class AXPErrorOfflineComponent {
     constructor() { }
     ngOnInit() { }
     goHome() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPErrorOfflineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPErrorOfflineComponent, isStandalone: true, selector: "axp-error-offline", ngImport: i0, template: "<div class=\"ax-h-full ax-flex ax-flex-col ax-gap-8 ax-items-center ax-justify-center\">\n    <img class=\"ax-w-3/4 md:ax-w-1/2 lg:ax-w-1/3 xl:ax-w-1/4\" src=\"/assets/images/error/error-offline.png\"\n        alt=\"Oops! Error 404. No result found.\">\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-gap-2 md:ax-gap-4\">\n        <h1 class=\"ax-font-bold ax-text-2xl md:ax-text-4xl\">Please check your connectivity!</h1>\n        <p class=\"md:ax-text-lg ax-text-neutral-400\">Sorry, it seems you don't have access to the internet.</p>\n\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 md:ax-gap-4 md:ax-flex-row\">\n        <ax-button (onClick)=\"goHome()\" class=\"ax-px-4\" color=\"primary\" text=\"Go back to home\"></ax-button>\n        <ax-button class=\"ax-px-4\" color=\"ghost\" text=\"Contact us\"></ax-button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPErrorOfflineComponent, decorators: [{
+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: () => [] });
@@ -485,23 +486,23 @@ class AXPLogoComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { styleAttribute: "display:block" }, ngImport: i0, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold ax-text-lg ax-select-none\">{{ source.text }}</span>\n}\n@case ('url') {\n<ax-image [src]=\"source.url\"></ax-image>\n} @case ('iconClass') {\n<ax-icon class=\"{{ source.classIcon }}\"></ax-icon>\n} @case ('component') {\n<ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n}\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-logo', standalone: true, imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { 'style': 'display:block' }, template: "@switch (logoType) {\n@case ('text') {\n<span class=\"ax-font-bold ax-text-lg ax-select-none\">{{ source.text }}</span>\n}\n@case ('url') {\n<ax-image [src]=\"source.url\"></ax-image>\n} @case ('iconClass') {\n<ax-icon class=\"{{ source.classIcon }}\"></ax-icon>\n} @case ('component') {\n<ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n}\n}" }]
+            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: [{
                 type: Input
             }] } });
 
 class AXPFooterTextSlotComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPFooterTextSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPFooterTextSlotComponent, isStandalone: true, selector: "ng-component", inputs: { text: "text" }, ngImport: i0, template: `
+    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: "17.1.2", ngImport: i0, type: AXPFooterTextSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPFooterTextSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -521,14 +522,14 @@ class AXPNavBarSlotComponent {
         if (action)
             this.store.dispatch(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavBarSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPNavBarSlotComponent, isStandalone: true, selector: "ng-component", inputs: { items: "items" }, ngImport: i0, template: `
+    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: "17.1.2", ngImport: i0, type: AXPNavBarSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNavBarSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -544,6 +545,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }] } });
 
+class AXPThemeSlotComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.isDark = this.store.select(isDarkTheme());
+    }
+    switchMode() {
+        this.store.dispatch(AXPLayoutThemeDarkToggleAction());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [],
@@ -644,10 +683,10 @@ class AXPEntityRegistryService {
     createEntityKey(moduleName, entityName) {
         return `${moduleName}.${entityName}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -722,10 +761,10 @@ class AXPLayoutService {
             this.overlayLoadingSubject.next(state);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutService, providedIn: 'root' }); }
+    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: "17.1.2", ngImport: i0, type: AXPLayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -748,10 +787,10 @@ class AXPNavigateAction extends AXPWorkflowAction {
                 this.router.navigate([payload.commands], payload.extras);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavigateAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPNavigateAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPNavigateAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNavigateAction, decorators: [{
             type: Injectable
         }] });
 class AXPDialogConfirmAction extends AXPWorkflowAction {
@@ -764,10 +803,10 @@ class AXPDialogConfirmAction extends AXPWorkflowAction {
         const dialogResult = await this.dialogService.confirm(this.title, this.message, this.type);
         context.setOutput('deleteConfirmed', dialogResult.result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPDialogConfirmAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDialogConfirmAction, decorators: [{
             type: Injectable
         }] });
 class AXPToastAction extends AXPWorkflowAction {
@@ -785,10 +824,10 @@ class AXPToastAction extends AXPWorkflowAction {
             timeOutProgress: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPToastAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPToastAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPToastAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPToastAction, decorators: [{
             type: Injectable
         }] });
 class AXPShowDetailViewAction extends AXPWorkflowAction {
@@ -801,15 +840,48 @@ class AXPShowDetailViewAction extends AXPWorkflowAction {
         const payload = context.getVariable('payload');
         const id = context.getVariable('id');
         const newPayload = {
-            commands: `/${this.sessionService.application?.name}/${payload.entity.module}/e/${payload.entity}/${id}/view`,
+            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: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
+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,
+            },
+        });
+    }
+    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 {
@@ -826,10 +898,10 @@ class AXPShowListViewAction extends AXPWorkflowAction {
         context.setVariable('payload', newPayload);
         this.navigation.execute(context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
             type: Injectable
         }] });
 
@@ -846,18 +918,18 @@ class AXMWorkflowErrorHandler {
             next(error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler }); }
+    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: "17.1.2", ngImport: i0, type: AXMWorkflowErrorHandler, decorators: [{
+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: "17.1.2", ngImport: i0, type: AXPAdminFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPAdminFooterComponent, selector: "axp-dashboard-admin-footer", host: { classAttribute: "ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-surface ax-px-6 ax-border-t" }, providers: [], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-justify-start ax-gap-1\">\n  <axp-component-slot name=\"footer-start\"></axp-component-slot>\n</div>\n<div class=\"ax-flex ax-items-center ax-justify-end ax-gap-1\">\n  <axp-component-slot name=\"footer-end\"></axp-component-slot>\n</div>", dependencies: [{ kind: "directive", type: i2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    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: "17.1.2", ngImport: i0, type: AXPAdminFooterComponent, decorators: [{
+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',
@@ -901,28 +973,28 @@ class AXPAdminLayoutComponent {
         if (value)
             this.store.dispatch(AXPLayoutRootDrawerClose());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPAdminLayoutComponent, selector: "ng-component", providers: [
+    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$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i5.AXSideMenuComponent, selector: "ax-side-menu" }, { kind: "component", type: i5.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "color", "text", "isCollapsed", "active"], outputs: ["textChange", "isCollapsedChange", "activeChange", "onClick"] }, { kind: "directive", type: i4$2.AXLoadingDirective, selector: "[axIsLoading]", inputs: ["axIsLoading"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "directive", type: i8.AXPPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "component", type: AXPAdminFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPAdminHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AXUnsubscriber,
                         },
-                    ], template: "<ax-drawer-container>\n  <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\"(isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content\n      class=\"ax-w-64 ax-h-full ax-flex ax-flex-col ax-bg-secondary-600 dark:ax-bg-surface ax-text-primary-fore ax-border-e ax-border-primary-700 dark:ax-border-default\">\n      <header class=\"ax-px-7 ax-h-16 ax-flex ax-items-center ax-border-b ax-border-white/10\">\n        <axp-logo [source]=\"logo?.light\"></axp-logo>\n      </header>\n      <div class=\"ax-px-2 ax-py-4 ax-overflow-y-auto ax-flex-1 ax-h-full\">\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of this.menuItems$ | async\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          @if(item.type=='group') {\n          <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text }}</ax-title>\n          } @else {\n          <ax-side-menu-item *permission=\"item.data?.requiredPermission\" (onClick)=\"handleMenuClick($event, item)\"\n            [active]=\"isActiveRoute(item) && !item.children?.length\" [isCollapsed]=\"item.opened == true ? false : true\">\n            <ax-prefix>\n              <ax-icon [class]=\"item.icon\"></ax-icon>\n            </ax-prefix>\n            {{ item.text }}\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n          }\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer>\n  <ax-content class=\"ax-flex ax-flex-col ax-relative\">\n    @if(showNavigationProgress())\n    {\n    <div class=\"axp-navigating-progress\">\n      <div></div>\n    </div>\n    }\n    <axp-dashboard-admin-header></axp-dashboard-admin-header>\n    <div class=\"ax-flex-1 ax-overflow-auto ax-relative\" [axIsLoading]=\"isLoading()\">\n      <router-outlet></router-outlet>\n    </div>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n  </ax-content>\n</ax-drawer-container>" }]
+                    ], template: "<ax-drawer-container>\n  <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\"(isSM | async) ? 'overlay' : 'push'\"\n    (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content\n      class=\"ax-w-64 ax-h-full ax-flex ax-flex-col ax-bg-secondary-600 dark:ax-bg-surface ax-text-primary-fore ax-border-e ax-border-primary-700 dark:ax-border-default\">\n      <header class=\"ax-px-7 ax-h-16 ax-flex ax-items-center ax-border-b ax-border-white/10\">\n        <axp-logo [source]=\"logo?.light\"></axp-logo>\n      </header>\n      <div class=\"ax-px-2 ax-py-4 ax-overflow-y-auto ax-flex-1 ax-h-full\">\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of this.menuItems$ | async\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          @if(item.type=='group') {\n          <ax-title *permission=\"item.data?.requiredPermission;\">{{ item.text }}</ax-title>\n          } @else {\n          <ax-side-menu-item *permission=\"item.data?.requiredPermission\" (onClick)=\"handleMenuClick($event, item)\"\n            [active]=\"isActiveRoute(item) && !item.children?.length\" [isCollapsed]=\"item.opened == true ? false : true\">\n            <ax-prefix>\n              <ax-icon [class]=\"item.icon\"></ax-icon>\n            </ax-prefix>\n            {{ item.text }}\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n          }\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer>\n  <ax-content class=\"ax-flex ax-flex-col ax-relative\">\n    @if(showNavigationProgress())\n    {\n    <div class=\"axp-navigating-progress\">\n      <div></div>\n    </div>\n    }\n    <axp-dashboard-admin-header></axp-dashboard-admin-header>\n    <div class=\"ax-flex-1 ax-overflow-auto ax-relative\" [axIsLoading]=\"isLoading()\">\n      <router-outlet></router-outlet>\n    </div>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n  </ax-content>\n</ax-drawer-container>" }]
         }], ctorParameters: () => [], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: ['drawer']
             }] } });
 
 class AXPAdminRootLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, declarations: [AXPAdminFooterComponent,
+    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,
@@ -941,7 +1013,7 @@ class AXPAdminRootLayoutModule {
             AXPLogoComponent,
             AXPAuthModule,
             AXPComponentSlotModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminRootLayoutModule, imports: [CommonModule,
             RouterModule,
             AXButtonModule,
             AXDecoratorModule,
@@ -959,7 +1031,7 @@ class AXPAdminRootLayoutModule {
             AXPAuthModule,
             AXPComponentSlotModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminRootLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminRootLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1144,14 +1216,14 @@ class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityCreateCustomViewComponent, selector: "ng-component", inputs: { loader: "loader", mode: "mode", selectedView: "selectedView" }, providers: [
+    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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8$1.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "component", type: i4$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i4$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1$3.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: "17.1.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1198,10 +1270,10 @@ class AXPListViewOptionsColumnsComponent {
         });
         this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    <ng-container *ngFor=\"let item of columns$ | async\">\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i8$1.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, decorators: [{
+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: [{
@@ -1287,10 +1359,10 @@ class AXPListViewOptionConditionsComponent {
         });
         this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i4$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1$3.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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: "17.1.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, decorators: [{
+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: [{
@@ -1317,7 +1389,7 @@ class AXPListViewOptionFilterOperatorComponent {
             this.cdr.markForCheck();
             setTimeout(() => {
                 if (this.selectBox) {
-                    this.selectBox.defaultValue = this.items[0]?.name;
+                    //this.selectBox.defaultValue = this.items[0]?.name;
                 }
             });
         });
@@ -1329,8 +1401,8 @@ class AXPListViewOptionFilterOperatorComponent {
         this._value = v;
         this.valueChange.emit(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
+    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"
@@ -1339,9 +1411,9 @@ class AXPListViewOptionFilterOperatorComponent {
       *ngIf="visible"
     >
     </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, decorators: [{
+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',
@@ -1401,10 +1473,10 @@ class AXPListViewOptionSortingComponent {
         });
         this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\n>\n  @if(!(sorts$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\n  </div>\n  }\n  <div\n    cdkDropList\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\n  >\n    <ng-container *ngFor=\"let item of sorts$ | async\">\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n        <ax-select-box\n          [dataSource]=\"(props$ | async) ?? []\"\n          valueField=\"name\"\n          textField=\"title\"\n          [(ngModel)]=\"item.name\"\n        >\n        </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n          ></ax-icon>\n        </ax-button>\n\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n        </ax-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((sorts$ | async)?.length){\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button\n          (onClick)=\"loader.addSort()\"\n          color=\"primary\"\n          text=\"Add field\"\n          look=\"outline\"\n          class=\"ax-md ax-w-56\"\n        ></ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$1.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    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: "17.1.2", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
+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: [{
@@ -1413,23 +1485,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }] } });
 
-const AXPEntityQuickViewAction = createAction('[Entity] QuickView', props());
-//
-const AXPEntityListViewAction = createAction('[Entity] ListView', props());
-//
-const AXPEntityDetailViewAction = createAction('[Entity] DetailView', props());
-const AXPEntityReloadAction = createAction('[Entity] Reload', props());
-//
-//
-// export const AXPEntityCreateAction = createAction('[Entity] Create', props<{ payload: { module: string, entity: string } }>());
-// export const AXPEntityCreatedAction = createAction('[Entity] Created', props<{ payload: { module: string, entity: string, id: string } }>());
-//
-// export const AXPEntityDeleteAction = createAction('[Entity] Delete', props<{ payload: { module: string, entity: string, ids: string[] } }>());
-// export const AXPEntityDeletedAction = createAction('[Entity] Deleted', props<{ payload: { module: string, entity: string, id: string } }>());
-// export const AXPEntityBulkDeletedAction = createAction('[Entity] Bulk Deleted', props<{ payload: { module: string, entity: string } }>());
-// export const AXPEntityModifyAction = createAction('[Entity] Modify', props<{ payload: {  module: string, entity: string, context:any, properties:any } }>());
-// export const AXPEntityModifiedAction = createAction('[Entity] Modified', props<{ payload: {  module: string, entity: string, id:string } }>());
-
 class AXPEntityCreateLoaderDefault {
     constructor(config, store, formatService) {
         this.config = config;
@@ -1552,10 +1607,10 @@ class AXPEntityCreateViewLoaderFactory {
         }
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, providedIn: 'root' }); }
+    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: "17.1.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateViewLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1572,7 +1627,7 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
     async execute(context) {
         const { module, entity: entityName } = context.getVariable('payload');
         const entity = await this.entityRegistery.resolve(module, entityName);
-        const com = await import('./acorex-platform-layouts-entity-create-view.component-8rtifIvM.mjs');
+        const 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',
@@ -1587,10 +1642,10 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
             context.setVariable('id', result.data.recordId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
             type: Injectable
         }] });
 class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
@@ -1722,10 +1777,10 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
             throw new Error(`The delete operation cannot be performed on ${entity.title}. This action might be restricted or not applicable for the selected item.`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
+    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: "17.1.2", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
             type: Injectable
         }] });
 class AXPMyCustomFunc extends AXPWorkflowFunction {
@@ -1737,10 +1792,10 @@ class AXPMyCustomFunc extends AXPWorkflowFunction {
     async execute(val) {
         return val == 'abc';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPMyCustomFunc, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPMyCustomFunc }); }
+    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: "17.1.2", ngImport: i0, type: AXPMyCustomFunc, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPMyCustomFunc, decorators: [{
             type: Injectable
         }] });
 const AXPDeleteEntityWorkflow = {
@@ -1769,21 +1824,6 @@ const AXPDeleteEntityWorkflow = {
                 },
             ],
         },
-        // loadingDialog: {
-        //   id: 'loadingDialog',
-        //   action: 'AXPDeleteLoadingDialogAction',
-        //   input: {
-        //     title: 'Warning',
-        //     message: `Are you sure want to delete selected item(s)?`,
-        //     type: 'danger',
-        //   },
-        //   nextSteps: [
-        //     {
-        //       conditions: [{ type: 'SINGLE', expression: 'context.getOutput("deleteDone") == true' }],
-        //       nextStepId: 'performDelete',
-        //     },
-        //   ],
-        // },
         performDelete: {
             id: 'performDelete',
             action: 'AXPEntityPerformDeleteAction',
@@ -1823,11 +1863,15 @@ class AXPEntityListViewComponent {
         this.sortCount$ = this.loader.sortsCount$;
         //
         this.dataSource = this.loader.dataSource;
+        //
+        this.canDelete = this.loader.entity.editOptions?.delete ?? true;
+        this.canCreate = this.loader.entity.editOptions?.create ?? true;
+        this.canUpdate = this.loader.entity.editOptions?.update ?? true;
         this.popupService = inject(AXPopupService);
         this.dropdownRowItems = [
             {
-                text: 'Edit',
-                icon: 'fa-solid fa-floppy-disk',
+                text: 'Details',
+                icon: 'fa-solid fa-eye',
                 name: 'edit',
                 divided: true,
             },
@@ -1836,6 +1880,7 @@ class AXPEntityListViewComponent {
                 icon: 'fa-solid fa-trash-can',
                 name: 'delete',
                 color: 'danger',
+                disabled: !this.canDelete,
             },
         ];
         this.inlineRowItems = [
@@ -1852,16 +1897,10 @@ class AXPEntityListViewComponent {
         this.getInlineRowItems = (rowData) => {
             return this.inlineRowItems;
         };
-        this.log = () => console.log('abc');
         //TODO: namespace, module name issues
-        this.title = this.manuLoader.currentMenuItem()?.text ?? '';
-        this.loader.views$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
-            this.grid?.render();
-        });
+        this.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$1(AXPEntityDeletedEvent, AXPEntityCreateEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
             if (event.payload.entity == this.loader.entity.name && event.payload.module == this.loader.entity.module) {
                 this.grid.selectedRows = [];
                 this.grid?.refresh();
@@ -1873,6 +1912,9 @@ class AXPEntityListViewComponent {
         });
         this._getInlineConditionTitles();
     }
+    ngAfterViewInit() {
+        this.loader.setDefaultView();
+    }
     _getInlineConditionTitles() {
         const titles = this.loader.getInlineFilterTitles();
         this.searchBoxTitle = titles.join(', ');
@@ -1901,23 +1943,23 @@ class AXPEntityListViewComponent {
     async handleRowCommandClick(e) {
         switch (e.name) {
             case 'view': {
-                this.store.dispatch(AXPEntityQuickViewAction({
+                await this.workflow.execute('show-quick-view', {
                     payload: {
                         module: this.loader.entity.module,
                         entity: this.loader.entity.name,
                         data: e.data,
                     },
-                }));
+                });
                 break;
             }
             case 'edit': {
-                this.store.dispatch(AXPEntityDetailViewAction({
+                await this.workflow.execute('show-details', {
                     payload: {
                         module: this.loader.entity.module,
                         entity: this.loader.entity.name,
-                        id: e.data.id,
                     },
-                }));
+                    id: e.data.id,
+                });
                 break;
             }
             case 'delete': {
@@ -1953,7 +1995,6 @@ class AXPEntityListViewComponent {
     }
     clearSelectedItems() {
         this.grid.selectedRows = [];
-        this.grid?.render();
     }
     closeDrawer(name, collapsed) {
         if (collapsed != false) {
@@ -2023,13 +2064,16 @@ class AXPEntityListViewComponent {
             this.loader.updateView(popup.data.updatedView);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$4.AXActionSheetService }, { token: i2$3.AXUnsubscriber }, { token: i3$2.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityListViewComponent, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewsTemplate", first: true, predicate: ["viewsTemplate"], descendants: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }, { propertyName: "entityViewDrawer", first: true, predicate: ["entityViewDrawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\n    <ax-content class=\"ax-w-64 ax-border-e\">\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          <ax-side-menu-item [text]=\"item.text\">\n            <ax-prefix>\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\n            </ax-prefix>\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\n      @if(platform.is('MD')){\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n          <span (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n            Items</span>\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n          </ax-button>\n        </div>\n        }\n      </div>\n\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\n          <ax-suffix>\n            <i class=\"fa-solid fa-caret-down\"></i>\n          </ax-suffix>\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n            <ax-button-item-list class=\"ax-bg-surface\">\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\n                class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        <div class=\"ax-flex ax-gap-2\">\n          @if(searchBoxTitle){\n          <ax-button (onClick)=\"toggleSearchBox()\" [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          }\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\n            @if ((conditionsCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\n            @if ((sortCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n        </div>\n      </div>\n      <div [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\"\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n      </div>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\n                    <ax-suffix>\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\n                      </ax-button>\n                    </ax-suffix>\n                  </ax-button-item>\n                  <ax-divider></ax-divider>\n                  <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\n                    class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\">\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Conditions\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n              Items</span>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex\">\n      <ax-data-table class=\"ax-flex-1\" #grid [dataSource]=\"dataSource\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer [schema]=\"col.schema\" [dataField]=\"col.name\" [caption]=\"col.title\"\n          *ngIf=\"col.visible\" width=\"180px\" [allowSorting]=\"false\" [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column [width]=\"'60px'\" [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      </ax-data-table>\n    </div>\n  </ax-content>\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\n      <axp-list-view-option-conditions [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["rowTemplate", "emptyTemplate", "showHeader", "fetchDataMode", "dataSource", "loading", "focusedRow", "selectedRows", "itemHeight"], outputs: ["onPageChanged", "onRowClick", "onRowDbClick", "focusedRowChange", "selectedRowsChange", "onScrolledIndexChanged"] }, { kind: "component", type: i6$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i10.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i4$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i1$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "options", "dataField", "displayFormat", "schema"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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: "17.1.2", ngImport: i0, type: AXPEntityListViewComponent, decorators: [{
+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          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n          <span (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n            Items</span>\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\n          </ax-button>\n        </div>\n        }\n      </div>\n\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\n          <ax-suffix>\n            <i class=\"fa-solid fa-caret-down\"></i>\n          </ax-suffix>\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n            <ax-button-item-list class=\"ax-bg-surface\">\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\n                class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        <div class=\"ax-flex ax-gap-2\">\n          @if(searchBoxTitle){\n          <ax-button (onClick)=\"toggleSearchBox()\" [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          }\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\n            @if ((conditionsCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\n            @if ((sortCount$ | async)) {\n            <ax-suffix>\n              <ax-badge [color]=\"'primary'\"></ax-badge>\n            </ax-suffix>\n            }\n          </ax-button>\n        </div>\n      </div>\n      <div [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\"\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n      </div>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\n        @if(this.grid?.selectedRows?.length==0){\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\n                    <ax-suffix>\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\n                      </ax-button>\n                    </ax-suffix>\n                  </ax-button-item>\n                  <ax-divider></ax-divider>\n                  <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\n                    class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            @if(searchBoxTitle){\n            <div class=\"ax-w-72\">\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Conditions\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\n              Items</span>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex\">\n      <ax-data-table class=\"ax-flex-1\" #grid [dataSource]=\"dataSource\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\n        <ax-select-column [width]=\"'50px'\"></ax-select-column>\n        @for(col of (columns$ | async);track col.name) {\n        <axp-widget-column-renderer [schema]=\"col.schema\" [dataField]=\"col.name\" [caption]=\"col.title\"\n          *ngIf=\"col.visible\" width=\"180px\" [allowSorting]=\"false\" [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\">\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n        <ax-command-column [width]=\"'60px'\" [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      </ax-data-table>\n    </div>\n  </ax-content>\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\n      <axp-list-view-option-conditions [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\n    </ax-content>\n  </ax-drawer>\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.AXActionSheetService }, { type: i2$3.AXUnsubscriber }, { type: i3$2.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
+            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: [{
@@ -2070,16 +2114,17 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-text-widget-view.component-65eOj0qR.mjs').then((c) => c.AXPTextWidgetViewComponent),
+                    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-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                    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-TC127Dq8.mjs').then((c) => c.AXPTextWidgetEditComponent),
+                    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-qhh6MT79.mjs').then((c) => c.AXPTextWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-text-widget-column.component-D8WDAbQB.mjs').then((c) => c.AXPTextWidgetColumnComponent),
+                    options: { allowResizing: true },
                 },
             },
             filterOptions: {
@@ -2093,7 +2138,7 @@ class AXPCommonWidgetModule {
             name: widgetSchemas.largetext,
             component: {
                 edit: {
-                    component: () => import('./acorex-platform-layouts-largetext-widget-edit.component-Um_eBRFi.mjs').then((c) => c.AXPLargeTextWidgetEditComponent),
+                    component: () => import('./acorex-platform-layouts-largetext-widget-edit.component-CmH9daul.mjs').then((c) => c.AXPLargeTextWidgetEditComponent),
                 },
                 column: {
                     options: {
@@ -2106,16 +2151,17 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-number-widget-view.component-hqkAR0LG.mjs').then((c) => c.AXPNumberWidgetViewComponent),
+                    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-DPGSzdNm.mjs').then((c) => c.AXPNumberWidgetFilterComponent),
+                    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-DDi-o_Zn.mjs').then((c) => c.AXPNumberWidgetEditComponent),
+                    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-hqkAR0LG.mjs').then((c) => c.AXPNumberWidgetViewComponent),
+                    component: () => import('./acorex-platform-layouts-number-widget-view.component-B0duuEhX.mjs').then((c) => c.AXPNumberWidgetViewComponent),
+                    options: { allowResizing: true },
                 },
             },
             name: widgetSchemas.number,
@@ -2142,16 +2188,17 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs').then((c) => c.AXPPhoneWidgetViewComponent),
+                    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-s04WZfzv.mjs').then((c) => c.AXPPhoneWidgetColumnComponent),
+                    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-MKzlZ0_B.mjs').then((c) => c.AXPPhoneWidgetEditComponent),
+                    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-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.mjs').then((c) => c.AXPStringWidgetFilterComponent),
                 },
             },
             name: widgetSchemas.phone,
@@ -2165,16 +2212,17 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-email-widget-view.component-XrV8va7z.mjs').then((c) => c.AXPEmailWidgetViewComponent),
+                    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-m2dI7y9X.mjs').then((c) => c.AXPEmailWidgetEditComponent),
+                    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-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                    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-ac8gqsFT.mjs').then((c) => c.AXPEmailWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-email-widget-column.component-CUnxKERe.mjs').then((c) => c.AXPEmailWidgetColumnComponent),
+                    options: { allowResizing: true },
                 },
             },
             name: widgetSchemas.email,
@@ -2188,23 +2236,24 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-dateTime-widget-view.component-BrwycTWz.mjs').then((c) => c.AXPDateTimeWidgetViewComponent),
+                    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-zeJXGXY8.mjs').then((c) => c.AXPDateTimeWidgetEditComponent),
+                    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-DJ6esclU.mjs').then((c) => c.AXPDateTimeWidgetFilterComponent),
+                    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-qeQRJePy.mjs').then((c) => c.AXPDateTimeWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-dateTime-widget-column.component-D0eNN66F.mjs').then((c) => c.AXPDateTimeWidgetColumnComponent),
                     options: {
-                        width: '150px',
+                        width: '200px',
+                        allowResizing: true,
                     },
                 },
             },
             formats: {
-                default: 'date time',
+                default: 'date',
             },
             filterOptions: {
                 operators: [...DATE_OPERATORS],
@@ -2243,18 +2292,19 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-toggle-widget-view.component-DTOeAUiy.mjs').then((c) => c.AXPToggleWidgetViewComponent),
+                    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-R44L1pgJ.mjs').then((c) => c.AXPToggleWidgetEditComponent),
+                    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-H056Q5Gz.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
+                    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-uxOXR-bL.mjs').then((c) => c.AXPToggleWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-toggle-widget-column.component-BjIyTuZj.mjs').then((c) => c.AXPToggleWidgetColumnComponent),
                     options: {
                         width: '100px',
+                        allowResizing: true
                     },
                 },
             },
@@ -2269,18 +2319,19 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-checkbox-widget-view.component-m6bF8XFR.mjs').then((c) => c.AXPCheckboxWidgetViewComponent),
+                    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-P4cD_Nwg.mjs').then((c) => c.AXPCheckboxWidgetEditComponent),
+                    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-H056Q5Gz.mjs').then((c) => c.AXPBooleanWidgetFilterComponent),
+                    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-vRJI5S-w.mjs').then((c) => c.AXPCheckboxWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-checkbox-widget-column.component-BNEtAS7g.mjs').then((c) => c.AXPCheckboxWidgetColumnComponent),
                     options: {
                         width: '100px',
+                        allowResizing: true
                     },
                 },
             },
@@ -2295,13 +2346,16 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-password-widget-view.component-E2vtPKRO.mjs').then((c) => c.AXPPasswordWidgetViewComponent),
+                    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-ic1jykZL.mjs').then((c) => c.AXPPasswordWidgetColumnComponent),
+                    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-D8xI17yk.mjs').then((c) => c.AXPPasswordWidgetEditComponent),
+                    component: () => import('./acorex-platform-layouts-password-widget-edit.component-Dm2E5zA_.mjs').then((c) => c.AXPPasswordWidgetEditComponent),
                 },
             },
             filterOptions: {
@@ -2315,16 +2369,19 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-file-widget-view.component-mXBrKX0K.mjs').then((c) => c.AXPFileWidgetViewComponent),
+                    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-v7kAdIQ9.mjs').then((c) => c.AXPFileWidgetColumnComponent),
+                    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-Wrq7ZL9R.mjs').then((c) => c.AXPFileWidgetEditComponent),
+                    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-1-NJh38j.mjs').then((c) => c.AXPFileWidgetFilterComponent),
+                    component: () => import('./acorex-platform-layouts-file-widget-filter.component-K3mC1xLX.mjs').then((c) => c.AXPFileWidgetFilterComponent),
                 },
             },
             filterOptions: {
@@ -2338,16 +2395,19 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-lookup-widget-view.component-ftFXFj6k.mjs').then((c) => c.AXPLookupWidgetViewComponent),
+                    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-l5nSr9Cm.mjs').then((c) => c.AXPLookupWidgetEditComponent),
+                    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-gp5skvmz.mjs').then((c) => c.AXPLookupWidgetFilterComponent),
+                    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-Ts0MJe8O.mjs').then((c) => c.AXPLookupWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-lookup-widget-column.component-C4Bb5AYW.mjs').then((c) => c.AXPLookupWidgetColumnComponent),
+                    options: {
+                        allowResizing: true
+                    }
                 },
             },
             filterOptions: {
@@ -2361,16 +2421,19 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-selection-list-widget-view.component-s9xq___Y.mjs').then((c) => c.AXPSelectionListWidgetViewComponent),
+                    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-FpOQ12Ie.mjs').then((c) => c.AXPSelectionListWidgetEditComponent),
+                    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-9FTkDGmq.mjs').then((c) => c.AXPSelectionListWidgetColumnComponent),
+                    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-hGk-ZZ78.mjs').then((c) => c.AXPSelectionListWidgetFilterComponent),
+                    component: () => import('./acorex-platform-layouts-selection-list-widget-filter.component-B8y8heXR.mjs').then((c) => c.AXPSelectionListWidgetFilterComponent),
                 },
             },
             filterOptions: {
@@ -2384,19 +2447,22 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-rich-text-widget-view.component--Rzxm2a6.mjs').then((c) => c.AXPRichTextWidgetViewComponent),
+                    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-ro2yg7PR.mjs').then((c) => c.AXPRichTextWidgetEditComponent),
+                    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-P0YzXTIB.mjs').then((c) => c.AXPRichTextWidgetColumnComponent),
+                    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-4oZ6BVis.mjs').then((c) => c.AXPStringWidgetFilterComponent),
+                    component: () => import('./acorex-platform-layouts-string-widget-filter.component-D3ZxVk6S.mjs').then((c) => c.AXPStringWidgetFilterComponent),
                 },
             },
             filterOptions: {
@@ -2410,10 +2476,10 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-map-widget-view.component-1Lj9efbd.mjs').then((c) => c.AXPMapWidgetViewComponent),
+                    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-SOQvPhmX.mjs').then((c) => c.AXPMapWidgetEditComponent),
+                    component: () => import('./acorex-platform-layouts-map-widget-edit.component-EWlgQnx5.mjs').then((c) => c.AXPMapWidgetEditComponent),
                 },
             },
             filterOptions: {
@@ -2427,10 +2493,10 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-avatar-widget-view.component-pJJYkvdH.mjs').then((c) => c.AXPAvatarWidgetViewComponent),
+                    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-PZr1lXj-.mjs').then((c) => c.AXPAvatarWidgetEditComponent),
+                    component: () => import('./acorex-platform-layouts-avatar-widget-edit.component-a_eCmVu5.mjs').then((c) => c.AXPAvatarWidgetEditComponent),
                 },
             },
             filterOptions: {
@@ -2444,13 +2510,16 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-messenger-widget-view.component-9TJiFdq-.mjs').then((c) => c.AXPMessengerWidgetViewComponent),
+                    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-dAX8nirB.mjs').then((c) => c.AXPMessengerWidgetEditComponent),
+                    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-W7ZY-W84.mjs').then((c) => c.AXPMessengerWidgetColumnComponent),
+                    component: () => import('./acorex-platform-layouts-messenger-widget-column.component-DWgWrdmz.mjs').then((c) => c.AXPMessengerWidgetColumnComponent),
+                    options: {
+                        allowResizing: true
+                    }
                 },
             },
             filterOptions: {
@@ -2465,13 +2534,13 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-gallery-widget-view.component-xU52uaP0.mjs').then((c) => c.AXPGalleryWidgetViewComponent),
+                    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-cWNvVwum.mjs').then((c) => c.AXPGalleryWidgetEditComponent),
+                    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-OCz0hj5i.mjs').then((c) => c.AXPGalleryWidgetFilterComponent),
+                    component: () => import('./acorex-platform-layouts-gallery-widget-filter.component-BYFQSXOV.mjs').then((c) => c.AXPGalleryWidgetFilterComponent),
                 },
             },
             filterOptions: {
@@ -2485,10 +2554,10 @@ class AXPCommonWidgetModule {
         service.register({
             component: {
                 view: {
-                    component: () => import('./acorex-platform-layouts-signature-pad-widget-view.component-R40Ml757.mjs').then((c) => c.AXPSignaturePadWidgetViewComponent),
+                    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-W28Uk9zO.mjs').then((c) => c.AXPSignaturePadWidgetEditComponent),
+                    component: () => import('./acorex-platform-layouts-signature-pad-widget-edit.component-bEDsl8mg.mjs').then((c) => c.AXPSignaturePadWidgetEditComponent),
                 },
             },
             filterOptions: {
@@ -2500,11 +2569,11 @@ class AXPCommonWidgetModule {
         });
         //
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, deps: [{ token: i1$3.AXPSchemaRegistryService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, imports: [AXToastModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPCommonWidgetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPCommonWidgetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXToastModule],
@@ -2515,8 +2584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         }], ctorParameters: () => [{ type: i1$3.AXPSchemaRegistryService }] });
 
 class AXPListViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, declarations: [AXPEntityListViewComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewModule, declarations: [AXPEntityListViewComponent,
             AXPEntityCreateCustomViewComponent,
             AXPListViewOptionsColumnsComponent,
             AXPListViewOptionConditionsComponent,
@@ -2554,8 +2623,9 @@ class AXPListViewModule {
             CdkDragHandle,
             PortalModule,
             AXPSchemaModule,
-            AXPCommonWidgetModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, imports: [CommonModule,
+            AXPCommonWidgetModule,
+            AXPAuthModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewModule, imports: [CommonModule,
             FormsModule,
             AXCommonModule,
             AXDataTableModule,
@@ -2583,9 +2653,10 @@ class AXPListViewModule {
             AXDropdownButtonModule,
             PortalModule,
             AXPSchemaModule,
-            AXPCommonWidgetModule] }); }
+            AXPCommonWidgetModule,
+            AXPAuthModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2623,6 +2694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         PortalModule,
                         AXPSchemaModule,
                         AXPCommonWidgetModule,
+                        AXPAuthModule
                     ],
                     declarations: [
                         AXPEntityListViewComponent,
@@ -2654,7 +2726,6 @@ class AXPListViewLoaderDefault {
         this._currentSorts$ = new BehaviorSubject([]);
         //****************** Conditions ******************//
         this._currentConditions$ = new BehaviorSubject([]);
-        this.setView(this.views[0].name);
         this._inlineFilterItems = this.entity.properties
             .filter((property) => property.canInlineFilter)
             .map((item) => {
@@ -2679,7 +2750,7 @@ class AXPListViewLoaderDefault {
         return this._props$;
     }
     get views() {
-        return this.entity.views.list.views;
+        return this.entity.views.list?.views;
     }
     get views$() {
         return this._views$;
@@ -2707,6 +2778,9 @@ class AXPListViewLoaderDefault {
     get hasCustomViews$() {
         return this.customViews$.pipe(map((c) => c.length > 0));
     }
+    setDefaultView() {
+        this.setView(this.views[0].name);
+    }
     setView(name) {
         let propNames = [];
         this.properties$.pipe(first()).subscribe((properties) => {
@@ -2954,10 +3028,10 @@ class AXPListViewLoaderFactory {
         this.layout.setNavigationLoading(false);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPListViewLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2971,12 +3045,19 @@ class AXPEntityQuickViewComponent extends AXBasePageComponent {
         this.actions$ = actions$;
         this.store = inject((Store));
         this.workflow = inject(AXPWorkflowService);
+        this.canDelete = false;
+        this.canCreate = false;
+        this.canUpdate = false;
     }
     ngOnInit() {
         super.ngOnInit();
         //
-        if (this.entity.views.quickView)
+        if (this.entity.views.quickView) {
             this.root = this.entity.views.quickView?.root;
+            this.canDelete = this.entity.editOptions?.delete ?? true;
+            this.canCreate = this.entity.editOptions?.create ?? true;
+            this.canUpdate = this.entity.editOptions?.update ?? true;
+        }
     }
     getProperties(names) {
         return this.entity.properties.filter((c) => names.includes(c.name));
@@ -2995,33 +3076,25 @@ class AXPEntityQuickViewComponent extends AXBasePageComponent {
                 this.close();
                 break;
             case 'details':
-                this.store.dispatch(AXPEntityDetailViewAction({
+                this.workflow.execute('show-details', {
                     payload: {
                         module: this.entity.module,
                         entity: this.entity.name,
-                        id: this.data.id,
                     },
-                }));
+                    id: this.data.id,
+                });
                 this.close();
                 break;
             default:
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$5.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityQuickViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div\n      *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n    >\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\"\n  >\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div\n        *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n      >\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n        ></ax-button-item>\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i1$3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityQuickViewComponent, decorators: [{
+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\n      *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n    >\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\"\n  >\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div\n        *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\"\n      >\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n        ></ax-button-item>\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>\n" }]
+            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 }] });
 
 var entityQuickView_component = /*#__PURE__*/Object.freeze({
@@ -3083,10 +3156,10 @@ class AXPEntityModifyViewLoaderFactory {
         this.layout.setNavigationLoading(false);
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3105,7 +3178,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-VeTkP3-n.mjs');
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-BnSfJlc5.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',
@@ -3122,10 +3195,10 @@ class AXPEntityModifyPopupAction extends AXPWorkflowAction {
             context.setVariable('updatedData', cloneDeep(popup.data.context));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityModifyPopupAction }); }
+    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: "17.1.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 {
@@ -3197,7 +3270,11 @@ class AXPEntityDetailsViewComponent {
         this.store = inject((Store));
         this.isSM = this.store.select(isSmallScreen());
         this.isOpen = this.store.select(getChildDrawer());
-        this.editForm = {};
+        //
+        this.canDelete = this.loader.entity.editOptions?.delete ?? true;
+        this.canCreate = this.loader.entity.editOptions?.create ?? true;
+        this.canUpdate = this.loader.entity.editOptions?.update ?? true;
+        //
         this.context = signal(cloneDeep(this.loader.data));
         this.activeRoute.paramMap.pipe(first()).subscribe((c) => {
             this.setSection(c.get('section'));
@@ -3207,17 +3284,15 @@ class AXPEntityDetailsViewComponent {
             if (event.payload.entity == this.loader.entity.name &&
                 event.payload.module == this.loader.entity.module &&
                 event.payload.id.includes(this.loader.data.id)) {
-                this.store.dispatch(AXPEntityListViewAction({
+                this.workflow.execute('show-list-view', {
                     payload: {
                         module: this.loader.entity.module,
                         entity: this.loader.entity.name,
                     },
-                }));
+                });
             }
         });
-        this.workflow.events$
-            .pipe(ofType(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy)
-            .subscribe(async (event) => {
+        this.workflow.events$.pipe(ofType(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy).subscribe(async (event) => {
             if (event.payload.entity == this.loader.entity.name &&
                 event.payload.module == this.loader.entity.module &&
                 event.payload.updateValues.id === this.loader.data.id) {
@@ -3277,12 +3352,12 @@ class AXPEntityDetailsViewComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$5.Actions }, { token: i2$3.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPEntityDetailsViewComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        @for(tab of (loader.sections$ | async); track tab.name)\n        {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\n          [disabled]=\"editForm.context\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content #content class=\"ax-overflow-x-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n    >\n      <div\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-pt-3 -ax-mx-6'\"\n        [stickyParent]=\"content.getHostElement()\"\n      >\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  <ax-button-item\n                    text=\"Create New One\"\n                    class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  <ax-button-item\n                    text=\"Delete\"\n                    class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item\n            [text]=\"tab.title\"\n            [active]=\"isActive(tab)\"\n            (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"\n          >\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\"\n                  >\n                    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"\n                      section.options?.showPropTitle == false\n                        ? 'ax-col-span-12'\n                        : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\n                    \"\n                  >\n                    <axp-widget-renderer\n                      [schema]=\"prop.schema\"\n                      [context]=\"context()\"\n                      [prop]=\"prop\"\n                      [mode]=\"'view'\"\n                    ></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i10.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$3.AXFormComponent, selector: "ax-form", inputs: ["messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i1$3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i11.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: 
+    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: 
                 //
                 AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailsViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -3309,8 +3384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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    >\n      <div\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-pt-3 -ax-mx-6'\"\n        [stickyParent]=\"content.getHostElement()\"\n      >\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  <ax-button-item\n                    text=\"Create New One\"\n                    class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  <ax-button-item\n                    text=\"Delete\"\n                    class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item\n            [text]=\"tab.title\"\n            [active]=\"isActive(tab)\"\n            (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"\n          >\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\"\n                  >\n                    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"\n                      section.options?.showPropTitle == false\n                        ? 'ax-col-span-12'\n                        : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\n                    \"\n                  >\n                    <axp-widget-renderer\n                      [schema]=\"prop.schema\"\n                      [context]=\"context()\"\n                      [prop]=\"prop\"\n                      [mode]=\"'view'\"\n                    ></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i2$3.AXUnsubscriber }], propDecorators: { drawer: [{
+                    ], 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: [{
                 type: ViewChild,
                 args: ['drawer']
             }] } });
@@ -3425,10 +3500,10 @@ class AXPEntityDetailViewLoaderFactory {
         this.layout.setNavigationLoading(false);
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3452,70 +3527,42 @@ class AXPCustomReuseStrategy {
     }
 }
 
-class AXPEntityEffects {
-    constructor(actions$, store) {
-        this.actions$ = actions$;
-        this.store = store;
-        this.sessionService = inject(AXPSessionService);
-        this.entityRegistery = inject(AXPEntityRegistryService);
-        this.entityCreateFactory = inject(AXPEntityCreateViewLoaderFactory);
-        this.entityModifyFactory = inject(AXPEntityModifyViewLoaderFactory);
-        this.popupService = inject(AXPopupService);
-        this.dialogService = inject(AXDialogService);
-        this.toastService = inject(AXToastService);
-        this.formatService = inject(AXFormatService);
-        this.platform = inject(AXPlatform);
-        this.quickView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityQuickViewAction), switchMap(async (action) => {
-            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
-            const suggestedProps = entity.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
-            let suggestedFormat = 'Item #{{id}}';
-            if (suggestedProps)
-                suggestedFormat = `{{${suggestedProps.name}}}`;
-            const title = this.formatService.format(entity.formats?.header ?? entity.formats?.default ?? suggestedFormat, 'string', action.payload.data);
-            //
-            const com = await Promise.resolve().then(function () { return entityQuickView_component; });
-            this.popupService.open(com.AXPEntityQuickViewComponent, {
-                title: `${title} - Quick View`,
-                size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
-                data: {
-                    entity: entity,
-                    data: action.payload.data,
-                },
-            });
-            return of();
-        })), { dispatch: false });
-        this.detailView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityDetailViewAction), switchMap(async (action) => {
-            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
-            this.store.dispatch(AXPNavigateAction$1({
-                payload: {
-                    commands: `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/${action.payload.id}/view`,
-                },
-            }));
-            return of();
-        })), { dispatch: false });
-        this.listView$ = createEffect(() => this.actions$.pipe(ofType(AXPEntityListViewAction), switchMap(async (action) => {
-            const entity = await this.entityRegistery.resolve(action.payload.module, action.payload.entity);
-            this.store.dispatch(AXPNavigateAction$1({
-                payload: {
-                    commands: `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/list`,
-                },
-            }));
-            return of();
-        })), { dispatch: false });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects, deps: [{ token: i1$5.Actions }, { token: i2$4.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPEntityEffects, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i2$4.Store }] });
+const AXPShowDetailsViewWorkflow = {
+    startStepId: 'showDetailView',
+    steps: {
+        showDetailView: {
+            id: 'showDetailView',
+            action: 'AXPShowDetailViewAction',
+        },
+    },
+};
+
+const AXPShowListViewWorkflow = {
+    startStepId: 'showListView',
+    steps: {
+        showListView: {
+            id: 'showListView',
+            action: 'AXPShowListViewAction',
+        },
+    },
+};
+
+const AXPShowQuickViewWorkflow = {
+    startStepId: 'showQuickView',
+    steps: {
+        showQuickView: {
+            id: 'showQuickView',
+            action: 'AXPShowQuickViewAction',
+        },
+    },
+};
 
 class AXPAdminLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, imports: [i2$4.StoreFeatureModule, i1$5.EffectsFeatureModule, AXPAdminRootLayoutModule,
-            AXPListViewModule, i3$4.AXPWorkflowModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, providers: [{ provide: RouteReuseStrategy, useClass: AXPCustomReuseStrategy }], imports: [StoreModule.forFeature(AXPLayoutFeature),
-            EffectsModule.forFeature([AXPLayoutEffects, AXPEntityEffects]),
+    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,
             AXPWorkflowModule.forChild({
@@ -3530,18 +3577,21 @@ class AXPAdminLayoutModule {
                     'delete-entity': AXPDeleteEntityWorkflow,
                     'modify-entity': AXPModifyEntityWorkflow,
                     'create-entity': AXPCreateEntityWorkflow,
+                    'show-details': AXPShowDetailsViewWorkflow,
+                    'show-quick-view': AXPShowQuickViewWorkflow,
+                    'show-list-view': AXPShowListViewWorkflow,
                 },
                 functions: {
                     test: AXPMyCustomFunc,
                 },
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPAdminLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPAdminLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         StoreModule.forFeature(AXPLayoutFeature),
-                        EffectsModule.forFeature([AXPLayoutEffects, AXPEntityEffects]),
+                        EffectsModule.forFeature([AXPLayoutEffects]),
                         AXPAdminRootLayoutModule,
                         AXPListViewModule,
                         AXPWorkflowModule.forChild({
@@ -3556,6 +3606,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                 'delete-entity': AXPDeleteEntityWorkflow,
                                 'modify-entity': AXPModifyEntityWorkflow,
                                 'create-entity': AXPCreateEntityWorkflow,
+                                'show-details': AXPShowDetailsViewWorkflow,
+                                'show-quick-view': AXPShowQuickViewWorkflow,
+                                'show-list-view': AXPShowListViewWorkflow,
                             },
                             functions: {
                                 test: AXPMyCustomFunc,
@@ -3572,8 +3625,6 @@ const AXPListViewLoaderResolver = (route, state, service = inject(AXPListViewLoa
     const appName = route.parent?.paramMap.get('app');
     const moduleName = route.parent?.paramMap.get('module');
     const entityName = route.paramMap.get('entity');
-    // console.log(appName, moduleName, entityName);
-    //
     return service.create(moduleName, entityName);
 };
 const AXPEntityDetailViewLoaderResolver = (route, state, service = inject(AXPEntityDetailViewLoaderFactory)) => {
@@ -3581,11 +3632,144 @@ const AXPEntityDetailViewLoaderResolver = (route, state, service = inject(AXPEnt
     const moduleName = route.parent?.paramMap.get('module');
     const entityName = route.paramMap.get('entity');
     const id = route.paramMap.get('id');
-    // console.log(appName, moduleName, entityName, id);
+    return service.create(moduleName, entityName, id);
+};
+
+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                                    <!-- @if(vm.canCreate()) {\n                                    <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\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                                    } @if(vm.canDelete()) {\n                                    <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                                        (onClick)=\"vm.executeCommand('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                <!-- 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                                    <!-- @if(vm.canCreate()) {\n                                    <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\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                                    } @if(vm.canDelete()) {\n                                    <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                                        (onClick)=\"vm.executeCommand('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                <!-- Finish Section Tab Items  -->\n            </div>\n\n        </div>\n    </ax-content>\n</ax-drawer-container>" }]
+        }] });
+
 const AX_ADMIN_ROUTES = [
     {
         path: ':app',
@@ -3612,7 +3796,18 @@ const AX_ADMIN_ROUTES = [
                     {
                         path: 'e/:entity/list',
                         component: AXPEntityListViewComponent,
-                        resolve: { loader: AXPListViewLoaderResolver },
+                        resolve: {
+                            loader: AXPListViewLoaderResolver,
+                        },
+                        // canActivate: [AXPPermissionGuard],
+                        // data: {
+                        //   requiredPermission: "dynamic"
+                        // }
+                    },
+                    {
+                        path: 'ee/:entity/:id/view',
+                        resolve: { vm: AXPEntityDetailViewModelResolver },
+                        component: AXPDefaultThemeEntityDetailsViewComponent,
                     },
                 ],
             },
@@ -3635,57 +3830,11 @@ const routes = [
     },
 ];
 
-class AXPThemeSlotComponent {
-    constructor() {
-        this.store = inject((Store));
-        this.isDark = this.store.select(isDarkTheme());
-    }
-    switchMode() {
-        this.store.dispatch(AXPLayoutThemeDarkToggleAction());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
-        <ax-button color="default" look="blank" (onClick)="switchMode()">
-        <ax-icon>
-            <i class="fa-solid fa-brightness ax-text-slate-400 dark:ax-text-slate-200" *ngIf="isDark | async"></i>
-            <i class="fa-solid fa-moon ax-text-slate-400 dark:ax-text-slate-200" *ngIf="!(isDark | async)"></i>
-        </ax-icon>
-        </ax-button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <ax-button color="default" look="blank" (onClick)="switchMode()">
-        <ax-icon>
-            <i class="fa-solid fa-brightness ax-text-slate-400 dark:ax-text-slate-200" *ngIf="isDark | async"></i>
-            <i class="fa-solid fa-moon ax-text-slate-400 dark:ax-text-slate-200" *ngIf="!(isDark | async)"></i>
-        </ax-icon>
-        </ax-button>
-    `,
-                    standalone: true,
-                    imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule
-                    ]
-                }]
-        }] });
-
 class AXPLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, imports: [i1.RouterModule, i2.AXPCommonModule, i2.AXPComponentSlotModule, i3$4.AXPWorkflowModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, imports: [RouterModule.forChild(routes),
+    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] }),
-            AXPComponentSlotModule.forChild({
-                'header-end': [
-                    {
-                        name: 'theme',
-                        component: AXPThemeSlotComponent,
-                    },
-                ],
-            }),
             AXPWorkflowModule.forChild({
                 actions: {
                     AXPNavigateAction,
@@ -3693,23 +3842,16 @@ class AXPLayoutModule {
                     AXPToastAction,
                     AXPShowDetailViewAction,
                     AXPShowListViewAction,
+                    AXPShowQuickViewAction,
                 },
             }), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         RouterModule.forChild(routes),
                         AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
-                        AXPComponentSlotModule.forChild({
-                            'header-end': [
-                                {
-                                    name: 'theme',
-                                    component: AXPThemeSlotComponent,
-                                },
-                            ],
-                        }),
                         AXPWorkflowModule.forChild({
                             actions: {
                                 AXPNavigateAction,
@@ -3717,6 +3859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                 AXPToastAction,
                                 AXPShowDetailViewAction,
                                 AXPShowListViewAction,
+                                AXPShowQuickViewAction,
                             },
                         }),
                     ],
@@ -3728,5 +3871,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXEntityLoaderDefault, AXMWorkflowErrorHandler, AXPAdminChildFeaturesListComponent, AXPAdminChildLayoutComponent, AXPAdminChildLayoutModule, AXPAdminHeaderComponent, AXPAdminLayoutComponent, AXPAdminLayoutModule, AXPAdminRootLayoutModule, AXPCommonWidgetModule, AXPContentViewComponent, AXPCustomReuseStrategy, AXPDialogConfirmAction, AXPEntityCreateCustomViewComponent, AXPEntityDetailLoaderDefault, AXPEntityDetailViewLoaderFactory, AXPEntityDetailViewLoaderResolver, AXPEntityDetailsViewComponent, AXPEntityListViewComponent, AXPEntityListViewConfigEmpty, AXPEntityQuickViewComponent, AXPEntityRegistryService, AXPError401Component, AXPError404Component, AXPErrorOfflineComponent, AXPFooterTextSlotComponent, AXPLayoutModule, AXPLayoutService, AXPListViewLoaderDefault, AXPListViewLoaderFactory, AXPListViewLoaderResolver, AXPListViewModule, AXPListViewOptionConditionsComponent, AXPListViewOptionFilterOperatorComponent, AXPListViewOptionSortingComponent, AXPListViewOptionsColumnsComponent, AXPLogoComponent, AXPNavBarSlotComponent, AXPNavigateAction, AXPRedirectEvent, AXPShowDetailViewAction, AXPShowListViewAction, AXPToastAction, AXP_ENTITY_LOADER, AXP_LISTVIEW_LOADER, AX_ADMIN_ROUTES, convertPropertiesToColumns, convertPropertyToColumn, widgetSchemas };
+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 };
 //# sourceMappingURL=acorex-platform-layouts.mjs.map